wickes-css2 2.105.0-develop.3 → 2.105.0-develop.4

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

@@ -0,0 +1,256 @@
+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);
+    },
+
+    // ===== 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/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/online-exclusive.js

@@ -1,6 +1,5 @@
 var Wick = Wick || {};
 Wick.onlineExclusive = (function () {
-
     let rangesToggler = $('.ranges-toggle'),
         rangesList = $('.ranges'),
         otherRanges = $('.other-ranges'),
@@ -27,8 +26,10 @@ Wick.onlineExclusive = (function () {
         otherRangesHeating = $('.other-ranges__item_heating');
 
     rangesToggler.on('click', function () {
-        rangesToggler.toggleClass('border-bottom-rounded_false')
-            .find('.icon').toggleClass('icon-rotated');
+        rangesToggler
+            .toggleClass('border-bottom-rounded_false')
+            .find('.icon')
+            .toggleClass('icon-rotated');
         if (window.innerWidth > 768) {
             rangesList.toggleClass('d-block border-bottom-rounded');
         } else if (window.innerWidth < 768) {
@@ -38,18 +39,17 @@ Wick.onlineExclusive = (function () {
     });
 
     if (window.innerWidth < 768) {
-        rangesList.on( 'click', 'a', function(e) {
+        rangesList.on('click', 'a', function (e) {
             e.preventDefault();
             otherRanges.show();
 
-            $(document).mouseup(function(e) {
-                if (!rangesList.is(e.target) && rangesList.has(e.target).length === 0)
-                {
+            $(document).mouseup(function (e) {
+                if (!rangesList.is(e.target) && rangesList.has(e.target).length === 0) {
                     rangesList.hide();
                 }
             });
 
-            switch ($(this).parent().attr("data-value")) {
+            switch ($(this).parent().attr('data-value')) {
                 case 'gardens-btn':
                     rangesComponent.hide();
                     gardensComponent.show();
@@ -96,15 +96,13 @@ Wick.onlineExclusive = (function () {
                     otherRanges.hide();
                     break;
             }
-
         });
-    }
-    else if (window.innerWidth >= 768) {
-        rangesList.on( 'click', 'a', function(e) {
+    } else if (window.innerWidth >= 768) {
+        rangesList.on('click', 'a', function (e) {
             e.preventDefault();
             otherRanges.show();
 
-            switch ($(this).parent().attr("data-value")) {
+            switch ($(this).parent().attr('data-value')) {
                 case 'gardens-btn':
                     rangesEl.removeClass('range-btn');
                     $(this).addClass('range-btn');
@@ -171,10 +169,10 @@ Wick.onlineExclusive = (function () {
                     break;
             }
         });
-        otherRangesList.on( 'click', 'a', function(e) {
+        otherRangesList.on('click', 'a', function (e) {
             e.preventDefault();
 
-            switch ($(this).parent().parent().attr("data-value")) {
+            switch ($(this).parent().parent().attr('data-value')) {
                 case 'gardens-btn':
                     rangesEl.removeClass('range-btn');
                     $('#gardens-btn').addClass('range-btn');
@@ -243,33 +241,33 @@ Wick.onlineExclusive = (function () {
         });
     }
 
-    viewBtn.on('click', function(e) {
+    viewBtn.on('click', function (e) {
         e.preventDefault();
         rangesComponent.show();
         otherRanges.hide();
         rangesEl.removeClass('range-btn');
     });
 
-    $(function(){
-        $('a.online-exclusive__banner').on('click', function(event) {
+    $(function () {
+        $('a.online-exclusive__banner').on('click', function (event) {
             event.preventDefault();
-            let sc = $(this).attr("href"),
+            let sc = $(this).attr('href'),
                 dn = $(sc).offset().top - 10;
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 
-    $(function(){
-        $('a.view-link').on('click', function(event) {
+    $(function () {
+        $('a.view-link').on('click', function (event) {
             event.preventDefault();
-            let sc = $(this).attr("href"),
+            let sc = $(this).attr('href'),
                 dn = $(sc).offset().top - 10;
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 
-    $(function(){
-        $('a.ranges-el').on('click', function(event) {
+    $(function () {
+        $('a.ranges-el').on('click', function (event) {
             event.preventDefault();
             let dn;
 
@@ -281,12 +279,12 @@ Wick.onlineExclusive = (function () {
                 dn = 990;
             }
 
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 
-    $(function(){
-        $('.other-ranges__item').on('click', function(event) {
+    $(function () {
+        $('.other-ranges__item').on('click', function (event) {
             event.preventDefault();
             let dn;
 
@@ -298,7 +296,7 @@ Wick.onlineExclusive = (function () {
                 dn = 810;
             }
 
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 })();

package/src/js/page/search-filter.js

@@ -0,0 +1,62 @@
+// import { createShowMoreLess } from './utils/show-more-less';
+
+var Wick = Wick || {};
+
+Wick.Overlay = (function () {
+    var filterMobile = $('.filter-results_mobile');
+    $('#open-overlay').click(function (event) {
+        event.preventDefault();
+        $('body').addClass('is-filters-visible');
+        filterMobile.toggleClass('show');
+    });
+
+    $('#close-overlay, .filter-results__btn-close').click(function (event) {
+        event.preventDefault();
+        if (filterMobile.hasClass('show')) {
+            $('body').removeClass('is-filters-visible');
+            filterMobile.removeClass('show');
+        }
+    });
+
+    $('.filter-results_desktop .filter__item input[type="checkbox"]').click(function () {
+        $(this).closest('form').submit();
+    });
+})();
+
+Wick.SearchFilter = (function () {
+    const SEL = {
+        CATEGORY: '.category-filter',
+        FILTER_MOBILE: '.filter-results_mobile',
+        OPEN: '.filter-modal-cta',
+        CLOSE: '.close',
+        FILTER_RESULT: '.filter-results_desktop',
+        DESKTOP_CHECKBOX: '.filter-results_desktop .filter__item input[type="checkbox"]',
+        BODY_ACTIVE: 'is-filters-visible',
+    };
+
+    // removed show more/show less logic from frontend (will be implemented on backend)
+    // const SRPShowMoreLess = createShowMoreLess({
+    //     excludeGroup: ($group) => $group.hasClass(SEL.CATEGORY),
+    // });
+
+    // const $fm = $(SEL.FILTER_MOBILE);
+    // SRPShowMoreLess.init($(SEL.FILTER_RESULT));
+    // SRPShowMoreLess.init($fm);
+
+    $(SEL.OPEN).on('click', function (event) {
+        event.preventDefault();
+        // removed show more/show less logic from frontend (will be implemented on backend)
+        // SRPShowMoreLess.init($fm);
+        // SRPShowMoreLess.resetAll($fm);
+    });
+
+    $(document).on('click', SEL.CLOSE, function (event) {
+        event.preventDefault();
+        // removed show more/show less logic from frontend (will be implemented on backend)
+        // SRPShowMoreLess.resetAll($fm);
+    });
+
+    $(document).on('click', SEL.DESKTOP_CHECKBOX, function () {
+        $(this).closest('form').submit();
+    });
+})();