wickes-css2 2.106.0-develop.6 → 2.106.0-develop.7

package/src/js/emulation/plp-load-more.js

@@ -1,5 +1,8 @@
 function getHtmlByCurrentPage({currentPage}) {
-  const matchingData = Wick.FEMock.productListPagesData.find(item => item.page === currentPage);
+  const pagesData = Wick.VatToggle.isToggleVatAvailable()
+    ? Wick.FEMock.productListVatPagesData
+    : Wick.FEMock.productListPagesData;
+  const matchingData = pagesData.find(item => item.page === currentPage);
 
   return matchingData.html;
 }

package/src/js/page/filters/plp-filters-mobile.js

@@ -65,6 +65,11 @@ Wick.PLPFiltersMobile = {
         $btn.text(total > 0 ? `View results (${total})` : 'View results');
     },
 
+    hideAccordions() {
+        $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
+        $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
+    },
+
     init() {
         // two-way binding for input between desktop and modal
         $(document)
@@ -81,14 +86,13 @@ Wick.PLPFiltersMobile = {
         $(document)
             .off('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.draftState);
+                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
             });
 
         $(document)
             .off('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
             .on('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add($(this));
-                Wick.PLPFilters.draftState = Wick.PLPFilters.collectStateFromDOM(scope);
+                Wick.PLPFiltersMobile.hideAccordions();
             });
 
         // mobile "View results" button in modal
@@ -122,7 +126,6 @@ Wick.PLPFiltersMobile = {
 
                 e.preventDefault();
 
-                Wick.PLPFilters.draftState = {};
                 Wick.PLPFilters.appliedState = {};
                 Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
 

package/src/js/page/filters/plp-filters-utils.js

@@ -1,14 +1,6 @@
 var Wick = window.Wick || {};
 
 Wick.PLPUtils = (function () {
-    function cloneState(state) {
-        const out = {};
-        Object.keys(state).forEach((k) => {
-            out[k] = new Set(state[k]);
-        });
-        return out;
-    }
-
     function syncTwinInputsByName(name, checked, source) {
         const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input').filter(
             function () {
@@ -65,7 +57,6 @@ Wick.PLPUtils = (function () {
     }
 
     return {
-        cloneState,
         syncTwinInputsByName,
         getPanelType,
         countItems,

package/src/js/page/filters/plp-filters.js

@@ -6,7 +6,6 @@ Wick.PLPFilters = {
     ROOT: '.plp-filters',
     GROUP: '.plp-filters__group',
     APPLY_BTN: '.plp-filters__apply',
-    draftState: null,
 
     INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
 
@@ -25,7 +24,6 @@ Wick.PLPFilters = {
         }
 
         Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
-        Wick.PLPFilters.draftState = Wick.PLPUtils.cloneState(Wick.PLPFilters.appliedState);
         Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
 
         // 3) chips
@@ -45,11 +43,8 @@ Wick.PLPFilters = {
     handlePageShow() {
         window.addEventListener('pageshow', function () {
             const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
-            const stateScope = rootWrapper.add($(Wick.PLPFiltersMobile.MODAL_SEL));
-
-            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(stateScope);
-            Wick.PLPFilters.draftState = Wick.PLPFilters.appliedState;
-            Wick.PLPFilters.setDOMFromState(stateScope, Wick.PLPFilters.appliedState);
+            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+            Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
         });
     },
 
@@ -192,10 +187,7 @@ Wick.PLPFilters = {
 
     // ===== APPLY
     applyFromScopes(scopeForCollect, push) {
-        const nextState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
-
-        Wick.PLPFilters.draftState = nextState;
-        Wick.PLPFilters.appliedState = nextState;
+        Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
         Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
     },
 

package/src/js/page/plp-img-v2.js

@@ -0,0 +1,25 @@
+$(document).ready(function () {
+    
+    let imgWrap = $('.products-list-v2 .card__img-wrap');
+    let img = $('.products-list-v2 .card__img-v2');
+    
+    square();
+
+    img.height(function () {
+        if (Math.round($(this).height()) > Math.round($(this).width())) {
+            $(this).height('99.9%'); //fix for ie
+        } else if ((Math.round($(this).height()) < Math.round($(this).width()))){
+            $(this).width('99.9%'); // fix for ie
+        } else {
+            $(this).width('99.9%'); // fix for ie
+            $(this).height('99.9%'); // fix for ie
+        }
+    });
+
+    function square() {
+        let width = imgWrap.width();
+        imgWrap.height(width);
+    }
+
+    $(window).on('resize', square);
+});

package/src/js/page/share-project-list.js

@@ -1,175 +1,57 @@
 import { copyToClipboard } from './utils/copy-to-clipboard';
 
-var Wick = window.Wick || {};
-
+var Wick = Wick || {};
 Wick.ShareProjectList = (function () {
-    const SELECTORS = {
-        input: '#share-list-modal #shopping-list-link',
-        linkContainer: '#copy-link',
-        link: 'a',
-    };
-
-    const CLASSES = {
-        copied: 'copy-link_hovered',
-    };
-
-    function logActiveElement() {
-        const active = document.activeElement;
-
-        if (!active) {
-            return;
-        }
-    }
-
-    function getElements() {
-        const $input = $(SELECTORS.input);
-        const $linkContainer = $(SELECTORS.linkContainer);
-        const $link = $linkContainer.find(SELECTORS.link);
-
-        return {
-            $input: $input,
-            $linkContainer: $linkContainer,
-            $link: $link,
-        };
-    }
-
-    function enableFocusAndSelect($input, source) {
-        if (!$input.length) {
-            return;
-        }
+    function init() {
+        var $input = $('#share-list-modal #shopping-list-link');
+        var linkContainer = $('#copy-link');
+        var $actualLink = linkContainer.find('a');
+        var copyClass = 'copy-link_hovered';
 
-        const input = $input.get(0);
-        const value = input.value || '';
-        const valueLength = value.length;
+        $actualLink.on('click', function (e) {
+            e.preventDefault();
+        });
 
-        logActiveElement('[ShareProjectList] before removeAttr disabled');
+        function focusAndSelectInput() {
+            if (!$input.length) return;
 
-        $input.removeAttr('disabled');
+            var el = $input.get(0);
 
-        try {
-            input.focus();
-        } catch (error) {
-            console.error('[ShareProjectList] input.focus() failed', {
-                source: source,
-                error: error,
-            });
-        }
+            $input.removeAttr('disabled');
 
-        logActiveElement('[ShareProjectList] after input.focus()');
+            el.focus();
 
-        try {
-            if (typeof input.setSelectionRange === 'function') {
-                input.setSelectionRange(0, valueLength);
-            } else if (typeof input.select === 'function') {
-                input.select();
+            var len = (el.value || '').length;
+            if (typeof el.setSelectionRange === 'function') {
+                el.setSelectionRange(0, len);
+            } else if (typeof el.select === 'function') {
+                el.select();
             }
-        } catch (error) {
-            console.error('[ShareProjectList] selection failed', {
-                source: source,
-                error: error,
-            });
         }
 
-        logActiveElement('[ShareProjectList] after selection');
-
-        setTimeout(function () {
-            logActiveElement('[ShareProjectList] after 0ms timeout');
-        }, 0);
-
-        setTimeout(function () {
-            logActiveElement('[ShareProjectList] after 50ms timeout');
-        }, 50);
-
-        setTimeout(function () {
-            logActiveElement('[ShareProjectList] after 150ms timeout');
-        }, 150);
-    }
-
-    function getInputValue($input) {
-        const value = String($input.val() || '').trim();
-
-        return value;
-    }
-
-    function bindEvents(elements) {
-        const $input = elements.$input;
-        const $linkContainer = elements.$linkContainer;
-        const $link = elements.$link;
+        linkContainer.on('click', function (e) {
+            e.preventDefault();
 
-        $input.on('focus', function () {
-            logActiveElement('[ShareProjectList] on input focus');
-        });
+            focusAndSelectInput();
 
-        $input.on('blur', function () {
-            logActiveElement('[ShareProjectList] on input blur');
-        });
+            var value = ($input.val() || '').trim();
+            if (!value) return;
 
-        $link.on('click', function (event) {
-            event.preventDefault();
-        });
-
-        $linkContainer.on('mousedown', function () {
-            logActiveElement('[ShareProjectList] on mousedown before focus');
-        });
-
-        $linkContainer.on('click', function (event) {
-            let value;
-
-            logActiveElement('[ShareProjectList] before click preventDefault');
-
-            event.preventDefault();
-
-            enableFocusAndSelect($input, 'linkContainer click');
-
-            value = getInputValue($input);
-            if (!value) {
-                return;
-            }
-
-            copyToClipboard(value, $linkContainer.get(0), { noUpperCase: true })
+            copyToClipboard(value, linkContainer[0], { noUpperCase: true })
                 .then(function () {
-                    $link.addClass(CLASSES.copied);
-
-                    logActiveElement('[ShareProjectList] after copy success before refocus');
-
-                    enableFocusAndSelect($input, 'copy success refocus');
-
-                    setTimeout(function () {
-                        enableFocusAndSelect($input, 'copy success refocus timeout 0');
-                    }, 0);
-
-                    setTimeout(function () {
-                        enableFocusAndSelect($input, 'copy success refocus timeout 50');
-                    }, 50);
+                    $actualLink.addClass(copyClass);
                 })
-                .catch(function (error) {
-                    console.error('[ShareProjectList] Failed to copy shopping list link', error);
-
-                    logActiveElement('[ShareProjectList] after copy error before refocus');
-
-                    enableFocusAndSelect($input, 'copy error refocus');
+                .catch(function (e) {
+                    console.error(e);
                 });
         });
 
-        $input.on('click', function () {
-            enableFocusAndSelect($input, 'input click');
-            $link.removeClass(CLASSES.copied);
+        $input.on('click', function (e) {
+            e.preventDefault();
+            focusAndSelectInput();
+            $actualLink.removeClass(copyClass);
         });
     }
 
-    function init() {
-        var elements = getElements();
-
-        if (!elements.$input.length || !elements.$linkContainer.length || !elements.$link.length) {
-            return;
-        }
-
-        bindEvents(elements);
-    }
-
-    return {
-        init: init,
-    };
+    init();
 })();
-
-Wick.ShareProjectList.init();

package/src/page_plp-with-paint.html

@@ -63,7 +63,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-energy-efficiency.html

@@ -70,7 +70,7 @@
 
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-favourite-products.html

@@ -69,7 +69,7 @@
     {{/content}}
     {{#content "foot" mode="append"}}
         <script defer src="./js/page/plp.js"></script>
-
+        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/plp-favourite-product.bundle.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_plp_v2-vat.html

@@ -1,19 +1,20 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" pagePlp=true switch-vat=true}}
-    {{#content "head" mode="append" pagePlp=true}}
-        <link type="text/css" rel="stylesheet" href="./css/pages/page_products-list.css">
-    {{/content}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true switch-vat=true bundle="plp"}}
+{{#content "head" mode="append" pagePlp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+<style></style>
     {{#content "body"}}
         <main>
             <div class="container">
-
                 <div class="page-header page-header_border-all">
                     <h1 class="page-header__title">
                         Fire Doors
                     </h1>
-
                     {{> srp-injected}}
                 </div>
 
+                {{> color-picker-plp }}
+
                 <div class="row">
                     <aside class="left-aside">
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
@@ -21,35 +22,39 @@
 
                     <div class="content">
                         <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__pagination">
-                                {{> pagination pagination1="true" }}
-                                {{> pagination pagination2="true" }}
+                            <input id="numberOfPagesPLP" value="3" type="hidden">
+                            <div class="sort-products-list__total">
+                                <span>{{plp_load-more.pagination.totalNumberOfResults}} products</span>
                             </div>
                             <div class="sort-products-list__section sort-products-list__sort-by">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d2" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
+                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="#sort_form1" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
                             </div>
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#if search-result_v2.product-banner}}
-                                {{>card_product_banner_v2}}
-                            {{/if}}
                             {{#each search-result_v2.products}}
                                 {{>card_product_v2 switch-vat=true}}
                             {{/each}}
+                            {{#if search-result_v2.product-banner}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-product}}
+                                {{#each search-result_v2.sponsor-product}}
+                                    {{>card_sponsor_product}}
+                                {{/each}}
+                            {{/if}}
                         </div>
-
-                        <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page is-hidden">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-bottom" label="Products per page" label-hidden="true" placeholder="All products per page"}}
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__pagination">
-                                {{> pagination pagination1="true" }}
-                                {{> pagination pagination2="true" }}
-                            </div>
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
                         </div>
                     </div>
                     <!-- ./content -->
@@ -65,9 +70,9 @@
         </main>
     {{/content}}
     {{#content "foot" mode="append"}}
-        <script defer src="./js/page/plp.js"></script>
-
+        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -83,7 +83,7 @@
     {{#content "foot" mode="append"}}
     {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
         <script defer src="./js/plp.bundle.min.js"></script>
-
+        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_product-details-cnc-success-notification-vat.html

@@ -1,12 +1,13 @@
 {{#extend "base" pageClass="page-product-details" title="Product details page WisDOM VAT"
           isDiscount=true
           isSQM=true
-          isDescription=false
+          isDescription=true
           isCashback=false
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
+          badge-text='2 for £47'
+          badge-text-exc='2 for £46'
           badge-color='yellow'
           badge-text-color='gray'
           currentlyInStock=true

package/src/page_product_search-vat.html

@@ -60,7 +60,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
 <script defer src="./js/search-filter.min.js"></script>

package/src/page_product_search.html

@@ -60,7 +60,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/components/badge-cashback.js"></script>
 <script defer src="./js/search-filter.min.js"></script>

package/src/page_search-results.html

@@ -72,7 +72,7 @@
 {{#content "foot" mode="append"}}
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-
+<script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/partials/scripts.hbs

@@ -13,6 +13,9 @@
 {{#ifCond bundle "==" "basket"}}
   <script src="./js/basket.min.js"></script>
 {{/ifCond}}
+{{#ifCond bundle "==" "plp"}}
+  <script src="./js/plp.bundle.min.js"></script>
+{{/ifCond}}
 {{!-- BUNDLES END --}}
 <script src="./js/mini-basket-slider.min.js"></script>
 <script src="./js/pdp-count-stepper.min.js"></script>

package/src/scss/components/_custom-slider.scss

@@ -337,7 +337,7 @@
     transition: all 0.3s ease;
 
     &.footer-fixed {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -408,7 +408,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       flex-direction: column;
     }
   }

package/src/scss/helpers/_variables.scss

@@ -33,6 +33,7 @@ $error-bg: #fcf2f3; // Error notification background colour
 $positive: #8dc63f; // Positive colour
 $negative: #ed1c24; // Negative colour
 $blue-badge: #019ee3;
+$pacific-depths: #004587;
 $usp-icon-color: #1a77bc; // Usp icon color
 $pacific-depths: #004587;
 $line-through: #242424;
@@ -46,6 +47,10 @@ $footer-gray: #f5f5f5;
 $footer-bullet: #c8c8c8;
 $footer-copyright: #626262;
 
+$footer-gray: #f5f5f5;
+$footer-bullet: #c8c8c8;
+$footer-copyright: #626262;
+
 $white: #fff;
 $black: #000;
 $black-lite: #111;
@@ -62,6 +67,7 @@ $blue-ocean: #003058;
 $blue-ocean-dark: #0a3054;
 $gray-middle: #aaa;
 $light-blue: #e6f1f8;
+
 // Colour block colours
 $moon-shadow: #658089;
 $fawn: #f0ddce;
@@ -105,7 +111,7 @@ $black-transparent75: rgba(0, 0, 0, 0.75);
 $black-transparent80: rgba(0, 0, 0, 0.8);
 $blue-transparent20: rgba(2, 119, 189, 0.2);
 $blue-transparent10: rgba(2, 119, 189, 0.1);
-$blue-transparent3: rgba(2, 119, 189, 0.32);
+$blue-transparent3: #0277bd52;
 $blue-transparent5: rgba(2, 119, 189, 0.05);
 $blue-transparent5-rgb: rgb(242, 248, 251);
 $dark-blue-transparent10: rgba(10, 48, 85, 0.1);
@@ -299,7 +305,7 @@ $btn-line-height-sm: $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-line-height-lg: $input-btn-line-height-lg !default;
+$btn-line-height-lg: $input-btn_line-height-lg !default;
 
 $btn-border-radius: $border-radius !default;
 $btn-border-radius-lg: $border-radius-lg !default;
@@ -379,7 +385,8 @@ $zindex-share: 1 !default;
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
-// sass-lint:disable indentation
+
+/* sass-lint:disable indentation */
 $sizes: map-merge(
   (
     25: 25%,
@@ -389,7 +396,8 @@ $sizes: map-merge(
   ),
   $sizes
 );
-// sass-lint:enable indentation
+/* sass-lint:enable indentation */
+
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
@@ -399,7 +407,8 @@ $sizes: map-merge(
 // stylelint-disable
 $spacer: 1rem !default;
 $spacers: () !default;
-// sass-lint:disable indentation
+
+/* sass-lint:disable indentation */
 $spacers: map-merge(
   (
     0: 0,
@@ -419,7 +428,7 @@ $spacers: map-merge(
   ),
   $spacers
 );
-// sass-lint:enable indentation
+/* sass-lint:enable indentation */
 
 // Bootstrap Printing checked
 $print-page-size: a3 !default;