wickes-css2 2.105.0-develop.1 → 2.105.0-develop.10

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

@@ -0,0 +1,268 @@
+var Wick = window.Wick || {};
+
+Wick.PLPFilters = {
+    ROOT_WRAPPER:
+        '.page-KitchenPLPPage, .products-list-page:not(.page-responsiveThematicProductListPage)',
+    ROOT: '.plp-filters',
+    GROUP: '.plp-filters__group',
+    APPLY_BTN: '.plp-filters__apply',
+
+    INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
+
+    appliedState: {},
+
+    init() {
+        // 1) initialize submodules
+        Wick.PLPFiltersPanel.init();
+        Wick.PLPFiltersMobile.init();
+
+        // 2) initial state with URL
+        const root = $(Wick.PLPFilters.ROOT);
+        const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
+        if (!root.length) {
+            return;
+        }
+
+        Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+        Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
+
+        // 3) chips
+        Wick.PLPChips.bindChipActions(rootWrapper);
+
+        // 4) apply (desktop "View results")
+        $(document).on('click', Wick.PLPFilters.APPLY_BTN, Wick.PLPFilters.applyFilters);
+
+        // 5) primary render
+        Wick.PLPFilters.updateSelectedUI(rootWrapper);
+        
+        // 6) handle browser back/forward navigation
+        Wick.PLPFilters.handlePageShow();
+    },
+
+    // Handle bfcache (back/forward cache)
+    handlePageShow() {
+        window.addEventListener('pageshow', function(event) {
+            const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
+            Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
+            Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
+        });
+    },
+
+    // ===== URL <-> STATE
+    readStateFromURL(rootWrapper) {
+        const url = new URL(window.location.href);
+        const params = url.searchParams;
+        const state = {};
+
+        const groupsMeta = Wick.PLPUtils.getGroupsMeta(rootWrapper, Wick.PLPFilters.GROUP);
+        if (!groupsMeta.length) {
+            return state;
+        }
+
+        const byDomName = {};
+        groupsMeta.forEach((m) => {
+            byDomName[m.domName] = m;
+        });
+
+        for (const [key, val] of params.entries()) {
+            const meta = byDomName[key];
+            if (!meta) {
+                continue;
+            }
+
+            const values = val
+                .split(',')
+                .map((v) => v.trim())
+                .filter(Boolean);
+            if (!values.length) {
+                continue;
+            }
+
+            values.forEach((want) => {
+                const inp = meta.group
+                    .find(Wick.PLPFilters.INPUTS)
+                    .filter(function () {
+                        return $(this).val() === want;
+                    })
+                    .first();
+
+                if (!inp.length) {
+                    return;
+                }
+
+                const originalValue = inp.val();
+                if (!state[meta.domName]) {
+                    state[meta.domName] = new Set();
+                }
+                state[meta.domName].add(originalValue);
+            });
+        }
+
+        return state;
+    },
+
+    writeStateToURL(state) {
+        const url = new URL(window.location.href);
+
+        const groupsMeta = Wick.PLPUtils.getGroupsMeta(
+            $(Wick.PLPFilters.ROOT_WRAPPER),
+            Wick.PLPFilters.GROUP
+        );
+        const groupKeysDecoded = new Set(groupsMeta.map((m) => m.domName));
+
+        const pairs = [];
+        for (const [k, v] of url.searchParams.entries()) {
+            if (!groupKeysDecoded.has(k)) {
+                pairs.push(`${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
+            }
+        }
+
+        groupsMeta.forEach((meta) => {
+            const set = state[meta.domName];
+            if (!set || !set.size) return;
+
+            const keyEnc = encodeURIComponent(meta.domName);
+            const valueEnc = Array.from(set)
+                .map((v) => encodeURIComponent(v))
+                .join(',');
+            pairs.push(`${keyEnc}=${valueEnc}`);
+        });
+
+        url.search = pairs.join('&');
+
+        window.location.href = url.origin + url.pathname + url.search;
+    },
+
+    // set checkboxes according to state (both for desktop and modal)
+    setDOMFromState(rootWrapper, state) {
+        rootWrapper.find(Wick.PLPFilters.INPUTS).prop('checked', false);
+
+        Object.keys(state).forEach((groupDomName) => {
+            state[groupDomName].forEach((originalValue) => {
+                const want = originalValue;
+
+                const cand = rootWrapper
+                    .find(Wick.PLPFilters.INPUTS)
+                    .filter(function () {
+                        const i = $(this);
+                        const valMatch = i.val() === want;
+                        const g = i.closest(Wick.PLPFilters.GROUP);
+                        const groupMatch = g.length ? g.attr('data-filter') === groupDomName : true;
+                        return valMatch && groupMatch;
+                    })
+                    .first();
+
+                if (cand.length) {
+                    cand.prop('checked', true);
+                }
+            });
+        });
+    },
+
+    collectStateFromDOM(rootWrapper) {
+        const state = {};
+        rootWrapper
+            .find(Wick.PLPFilters.INPUTS)
+            .filter(':checked')
+            .each((_, el) => {
+                const input = $(el);
+                const group = input.closest(Wick.PLPFilters.GROUP);
+                const groupDomName = group.attr('data-filter') || '';
+                if (!groupDomName) {
+                    return;
+                }
+
+                const val = (input.val() || '').trim();
+                if (!val) {
+                    return;
+                }
+
+                if (!state[groupDomName]) {
+                    state[groupDomName] = new Set();
+                }
+                state[groupDomName].add(val);
+            });
+        return state;
+    },
+
+    // ===== APPLY
+    applyFromScopes(scopeForCollect, push) {
+        Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
+        Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
+    },
+
+    applyFilters(e) {
+        e.preventDefault();
+        const scope = $(Wick.PLPFilters.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
+        Wick.PLPFilters.applyFromScopes(scope, true);
+    },
+
+    // ===== RENDER
+    updateSelectedUI(rootWrapper) {
+        Wick.PLPChips.renderGroupCounters(rootWrapper);
+        Wick.PLPChips.renderChips(rootWrapper);
+        Wick.PLPFiltersMobile.updateMobileFilterInfo();
+    },
+
+    totalApplied() {
+        return Object.values(Wick.PLPFilters.appliedState).reduce((n, set) => n + set.size, 0);
+    },
+
+    // Wick.PLPUtils for appliedState
+    removeFromApplied(groupDomName, valOriginal) {
+        const st = Wick.PLPFilters.appliedState[groupDomName];
+        if (!st) {
+            return;
+        }
+        st.delete(valOriginal);
+        if (st.size === 0) {
+            delete Wick.PLPFilters.appliedState[groupDomName];
+        }
+    },
+
+    exportState() {
+        const out = {};
+        Object.keys(Wick.PLPFilters.appliedState).forEach((g) => {
+            out[g] = Array.from(Wick.PLPFilters.appliedState[g]);
+        });
+        return out;
+    },
+};
+
+Wick.Overlay = (function () {
+    const BODY_CLASS = 'page-responsiveThematicProductListPage';
+
+    if (!$('body').hasClass(BODY_CLASS)) {
+        return;
+    }
+
+    const $filterMobile = $('.filter-results_mobile');
+
+    $(document).on('click', '#open-overlay', function (event) {
+        event.preventDefault();
+
+        $('body').addClass('is-filters-visible');
+        $filterMobile.addClass('show');
+    });
+
+    $(document).on('click', '#close-overlay, .filter-results__btn-close', function (event) {
+        event.preventDefault();
+
+        if ($filterMobile.hasClass('show')) {
+            $('body').removeClass('is-filters-visible');
+            $filterMobile.removeClass('show');
+        }
+    });
+
+    $(document).on(
+        'click',
+        '.filter-results_desktop .filter__item input[type="checkbox"]',
+        function () {
+            $(this).closest('form').submit();
+        }
+    );
+})();
+
+$(function () {
+    Wick.PLPFilters.init();
+});

package/src/js/page/filters/sort-by.js

@@ -0,0 +1,172 @@
+var Wick = window.Wick || {};
+
+Wick.Sort = {
+    ROOT: '.page-KitchenPLPPage, .products-list-page:not(.page-responsiveThematicProductListPage)',
+    WRAP: '.sort',
+    DROPDOWN: '.sort-dd',
+    OPTION: '.sort-opt',
+    INFO: '.js-sort-info',
+    CHEVRON: '.sort__chevron',
+
+    TRIGGER_MOBILE: '.sort--mobile',
+    TRIGGER_DESKTOP_BTN: '.sort--desktop .sort-button',
+
+    MAP_VALUE_TO_LABEL: {
+        relevance: 'Relevance',
+        priceLow: 'Price (lowest first)',
+        priceHigh: 'Price (highest first)',
+    },
+
+    init: function () {
+        const root = $(Wick.Sort.ROOT);
+        if (!root.length) {
+            return;
+        }
+
+        root.on('click', Wick.Sort.TRIGGER_MOBILE, (e) => {
+            if ($(e.target).closest(Wick.Sort.DROPDOWN).length) {
+                return;
+            }
+            e.preventDefault();
+            Wick.Sort.toggle($(e.currentTarget));
+        });
+
+        root.on('click', Wick.Sort.TRIGGER_DESKTOP_BTN, (e) => {
+            e.preventDefault();
+            Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
+        });
+
+        root.on('keydown', `${Wick.Sort.TRIGGER_MOBILE}, ${Wick.Sort.TRIGGER_DESKTOP_BTN}`, (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
+            }
+        });
+
+        root.on('click', Wick.Sort.OPTION, (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const opt = $(e.currentTarget);
+            const value = opt.data('value');
+
+            if (opt.data('is-plp-srp')) {
+                return;
+            }
+
+            Wick.Sort.updateSortParamInURL(value);
+        });
+
+        $(document).on('click', (e) => {
+            const open = $(`${Wick.Sort.WRAP}.is-open`);
+            if (!open.length) {
+                return;
+            }
+            if (!open.is(e.target) && open.has(e.target).length === 0) {
+                Wick.Sort.closeAll();
+            }
+        });
+
+        $(document).on('keydown', (e) => {
+            if (e.key === 'Escape') {
+                Wick.Sort.closeAll();
+            }
+        });
+
+        Wick.Sort.bootstrap();
+    },
+
+    updateSortParamInURL: function (value) {
+        const url = new URL(window.location.href);
+        const params = url.searchParams;
+
+        if (value === 'relevance') {
+            params.delete('sortBy');
+        } else {
+            params.set('sortBy', value);
+        }
+
+        url.search = params.toString();
+
+        window.location.href = url.toString();
+    },
+
+    toggle: function (wrap) {
+        const isOpen = wrap.hasClass('is-open');
+        Wick.Sort.closeAll();
+        if (!isOpen) {
+            wrap.addClass('is-open');
+            wrap.find(Wick.Sort.DROPDOWN).removeAttr('hidden');
+            Wick.Sort.setExpanded(wrap, true);
+
+            if (window.Wick && Wick.PLPFilters && typeof Wick.PLPFilters.closeAll === 'function') {
+                Wick.PLPFilters.closeAll();
+            }
+        }
+    },
+
+    close: function (wrap) {
+        wrap.removeClass('is-open');
+        wrap.find(Wick.Sort.DROPDOWN).attr('hidden', true);
+        Wick.Sort.setExpanded(wrap, false);
+    },
+
+    closeAll: function () {
+        const all = $(Wick.Sort.WRAP);
+        all.removeClass('is-open');
+        all.find(Wick.Sort.DROPDOWN).attr('hidden', true);
+        all.each((_, el) => Wick.Sort.setExpanded($(el), false));
+    },
+
+    bootstrap: function () {
+        const urlParams = new URLSearchParams(window.location.search);
+        const value = urlParams.get('sortBy') || 'relevance';
+        const label = Wick.Sort.valueToLabel(value);
+
+        $(Wick.Sort.WRAP).each((_, el) => {
+            const w = $(el);
+
+            const isPlpSrp = w.find(Wick.Sort.OPTION).first().data('is-plp-srp');
+
+            if (isPlpSrp) {
+                return;
+            }
+
+            w.find(Wick.Sort.OPTION)
+                .removeClass('is-active')
+                .filter(`[data-value="${value}"]`)
+                .addClass('is-active');
+        });
+
+        const hasPlpSrp = $(Wick.Sort.OPTION).first().data('is-plp-srp');
+
+        if (!hasPlpSrp) {
+            $(document).trigger('sort:change', { value, label });
+            $(Wick.Sort.INFO).text(label);
+        }
+    },
+
+    setExpanded: function (wrap, expanded) {
+        const btn = wrap.is('.sort--mobile') ? wrap : wrap.find('.sort-button').first();
+        if (btn.length) {
+            btn.attr('aria-expanded', expanded ? 'true' : 'false');
+        }
+    },
+
+    valueToLabel: function (value) {
+        return Wick.Sort.MAP_VALUE_TO_LABEL[value] || 'Relevance';
+    },
+    labelToValue: function (label) {
+        const entries = Object.entries(Wick.Sort.MAP_VALUE_TO_LABEL);
+        for (const [val, lab] of entries) {
+            if (lab.toLowerCase() === label.toString().toLowerCase()) {
+                return val;
+            }
+        }
+        return 'relevance';
+    },
+};
+
+$(function () {
+    Wick.Sort.init();
+});

package/src/js/page/kitchen/colour-swatches.js

@@ -92,8 +92,11 @@ import infoIcon from '../../../components/info-icon.hbs';
     $cardContainer.find(SELECTORS.swatchesText).text(`in ${colourName}`)
   }
   function updateParametersView($cardContainer, design, finishes) {
+    const finishesText = finishes.join(', ');
+    const finishesLabel = (finishes.length > 1) ? 'finishes' : 'finish';
+
     $cardContainer.find(SELECTORS.designText).text(`${design} design`)
-    $cardContainer.find(SELECTORS.finishesText).text(`${finishes} finishes`)
+    $cardContainer.find(SELECTORS.finishesText).text(`${finishesText} ${finishesLabel}`)
   }
   function updateCTALink($cardContainer, url) {
     $cardContainer.find(SELECTORS.ctaLink).attr('href', url)
@@ -137,7 +140,7 @@ import infoIcon from '../../../components/info-icon.hbs';
     updateStickersView($cardContainer, colourData.stickers);
     updateSwatchesTextView($cardContainer, colourData.colourSwatch.colourName);
     updateSwiperView($cardSwiper, colourData.images, currentKitchenData.rangeStickers[0]);
-    updateParametersView($cardContainer, colourData.design, colourData.finishes.join(', '));
+    updateParametersView($cardContainer, colourData.design, colourData.finishes);
     updateCTALink($cardContainer, colourData.pdpUrl);
 
     $currentSwatchActive.removeClass(CLASSES.activeSwatch);

package/src/js/page/klarna-modal-scroll-disable.js

@@ -2,18 +2,18 @@ var Wick = Wick || {};
 
 Wick.KlarnaModalScrollDisable = (function () {
     const $body = $('body'),
-      klarnaPopUp = 'klarna-osm-interstitial',
-      scrollDisableClass = 'overflow-hidden';
+        klarnaPopUp = 'klarna-osm-interstitial',
+        scrollDisableClass = 'overflow-hidden';
 
     window.addEventListener(klarnaPopUp, (e) => {
         let isKlarnaPopUpActive = e.detail.action === 'show';
 
         if (isKlarnaPopUpActive) {
             $body.addClass(scrollDisableClass);
-            $body.trigger('tagKlarnaModalAdded')
+            $body.trigger('tagKlarnaModalAdded');
         } else {
             $body.removeClass(scrollDisableClass);
             $body.trigger('tagKlarnaModalRemoved');
-        };
+        }
     });
 })();

package/src/js/page/my-account.js

@@ -1,58 +1,43 @@
-import {copyToClipboard} from "./utils/copy-to-clipboard";
-import {isApp} from "./utils/helpers";
+import { copyToClipboard } from './utils/copy-to-clipboard';
+import { isApp } from './utils/helpers';
 
 var Wick = window.Wick || {};
 
 Wick.MyAccount = {
-  el: {
-    $clipboardCode: $('.clipboard-code'),
-    appInfo: '.app-info',
-    hideAppInfo: 'app-info--hide'
-  },
-  clipboardCodes: {
-    tradeProId: {
-      titleEl: '.clipboard-code.trade-pro-id .title',
-      subtitleEl: '.clipboard-code.trade-pro-id .subtitle',
-      btnCopy: '.btn--trade-pro-id',
+    el: {
+        $clipboardCode: $('.clipboard-code'),
+        appInfo: '.app-info',
+        hideAppInfo: 'app-info--hide',
     },
-    discountCode: {
-      titleEl: '.clipboard-code.discount-code .title',
-      subtitleEl: '.clipboard-code.discount-code .subtitle',
-      btnCopy: '.btn--discount-code',
-    },
-  },
-  copyCode(codeType) {
-    const { titleEl, subtitleEl, btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
-    const value = $(subtitleEl).text().trim();
-    const title = $(titleEl).text().trim();
+    copyCode($btn) {
+        const $container = $btn.closest('.clipboard-code');
+        const value = $container.find('.subtitle').text().trim();
+        const title = $container.find('.title').text().trim();
 
-    copyToClipboard(value, btnCopy);
-    Wick.SnackBar.show(
-      {
-        text: `${title} copied to clipboard`,
-        type: Wick.SnackBar.types.SUCCESS,
-        withCloseButton: false,
-        autoClose: true,
-        delayBeforeClose: 1500
-      }
-    );
-  },
-  init() {
-    Object.keys(Wick.MyAccount.clipboardCodes).forEach((codeType) => {
-      const { btnCopy } = Wick.MyAccount.clipboardCodes[codeType];
-      $(btnCopy).on('click', () => Wick.MyAccount.copyCode(codeType));
-    });
+        copyToClipboard(value, $btn);
+        Wick.SnackBar.show({
+            text: `${title} copied to clipboard`,
+            type: Wick.SnackBar.types.SUCCESS,
+            withCloseButton: false,
+            autoClose: true,
+            delayBeforeClose: 1500,
+        });
+    },
+    init() {
+        Wick.MyAccount.el.$clipboardCode.find('.copy-code').on('click', function () {
+            Wick.MyAccount.copyCode($(this));
+        });
 
-    if($(Wick.MyAccount.el.appInfo).length && isApp()) {
-      $(Wick.MyAccount.el.appInfo).addClass(Wick.MyAccount.el.hideAppInfo);
-    }
-  }
-}
+        if ($(Wick.MyAccount.el.appInfo).length && isApp()) {
+            $(Wick.MyAccount.el.appInfo).addClass(Wick.MyAccount.el.hideAppInfo);
+        }
+    },
+};
 
 $(document).ready(function () {
-  if (!Wick.MyAccount.el.$clipboardCode.length) {
-    return;
-  }
+    if (!Wick.MyAccount.el.$clipboardCode.length) {
+        return;
+    }
 
-  Wick.MyAccount.init();
+    Wick.MyAccount.init();
 });