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

package/src/js/page/filters/desktop-nav.js

@@ -0,0 +1,64 @@
+function formatNumberInElement(selector) {
+    const formatter = new Intl.NumberFormat('en-GB');
+
+    document.querySelectorAll(selector).forEach((el) => {
+        const rawText = el.textContent.trim();
+
+        const number = Number(rawText.replace(/[^\d]/g, ''));
+
+        if (!Number.isNaN(number)) {
+            el.textContent = formatter.format(number);
+        }
+    });
+}
+
+(function () {
+    const SELECTORS = {
+        $sidebar: $('.filter-results_desktop'),
+        $heading: $('.filter-results__heading'),
+        $offerBanner: $('.offer-banner'),
+        $offerBannerIndent: 40,
+        offerBannerCloseIcon:
+            '.icon.notification__close, .icon.notification__close_white, .notification__close',
+    };
+
+    function isDesktop() {
+        return Wick.Responsive.getCurrentBreakpoint() !== 'down-sm';
+    }
+
+    function getOfferBannerHeight() {
+        if (!SELECTORS.$offerBanner.length) return SELECTORS.$offerBannerIndent;
+        return SELECTORS.$offerBanner.outerHeight(true) + SELECTORS.$offerBannerIndent || 0;
+    }
+
+    function applyTop() {
+        if (!SELECTORS.$sidebar.length) return;
+
+        if (!isDesktop()) {
+            SELECTORS.$sidebar.css('top', '');
+            SELECTORS.$heading.css('top', '');
+            return;
+        }
+
+        const top = getOfferBannerHeight();
+
+        SELECTORS.$sidebar.css('top', top + 'px');
+
+        if (SELECTORS.$heading.length) {
+            SELECTORS.$heading.css('top', top + 'px');
+        }
+    }
+
+    function setupOfferBannerCloseHook() {
+        $(document).on('click', SELECTORS.offerBannerCloseIcon, function () {
+            setTimeout(applyTop, 0);
+        });
+    }
+
+    $(document).ready(function () {
+        formatNumberInElement('.product-count');
+        applyTop();
+        $(window).on('resize', _.debounce(applyTop, 100));
+        setupOfferBannerCloseHook();
+    });
+})();

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

@@ -0,0 +1,93 @@
+(function () {
+    const SELECTORS = {
+        $filters: $('.plp-filters'),
+        $filterBar: $('.plp-filters__bar-mobile'),
+        $filterModal: $('.filter-modal'),
+
+        $offerBanner: $('.offer-banner'),
+        offerBannerCloseIcon: '.icon.notification__close',
+    };
+
+    const CLASSES = {
+        plpFiltersStuck: 'plp-filters__bar-stuck',
+    };
+
+    function isMobile() {
+        return Wick.Responsive.getCurrentBreakpoint() === 'down-sm';
+    }
+
+    function getOfferBannerHeight() {
+        if (!SELECTORS.$offerBanner.length) return 0;
+        return SELECTORS.$offerBanner.outerHeight(true) || 0;
+    }
+
+    function applyOfferBannerTop() {
+        if (!SELECTORS.$filters.length) return;
+
+        if (!isMobile()) {
+            SELECTORS.$filters.css('top', '');
+            return;
+        }
+
+        const h = getOfferBannerHeight();
+        SELECTORS.$filters.css('top', h > 0 ? h + 'px' : '');
+    }
+
+    function resetOfferBannerTopToZero() {
+        if (!SELECTORS.$filters.length) return;
+        SELECTORS.$filters.css('top', '0px');
+    }
+
+    function applyStuckState() {
+        if (!isMobile()) {
+            SELECTORS.$filterBar.removeClass(CLASSES.plpFiltersStuck);
+            return;
+        }
+
+        if (!SELECTORS.$filters.length || !SELECTORS.$filterBar.length) return;
+
+        const filtersEl = SELECTORS.$filters.get(0);
+        if (!filtersEl) return;
+
+        const rect = filtersEl.getBoundingClientRect();
+        const bannerHeight = getOfferBannerHeight();
+
+        const shouldStick = rect.top <= bannerHeight;
+
+        if (shouldStick) {
+            SELECTORS.$filterBar.addClass(CLASSES.plpFiltersStuck);
+        } else {
+            SELECTORS.$filterBar.removeClass(CLASSES.plpFiltersStuck);
+        }
+    }
+
+    function hideModal() {
+        if (Wick.Responsive.getCurrentBreakpoint() !== 'down-sm') {
+            SELECTORS.$filterModal.modal('hide');
+        }
+    }
+
+    function setupOfferBannerCloseHook() {
+        $(document).on('click', SELECTORS.offerBannerCloseIcon, function () {
+            resetOfferBannerTopToZero();
+        });
+    }
+
+    $(document).ready(function () {
+        applyOfferBannerTop();
+        applyStuckState();
+
+        $(window).on('scroll', _.debounce(applyStuckState, 50));
+
+        $(window).on(
+            'resize',
+            _.debounce(function () {
+                hideModal();
+                applyOfferBannerTop();
+                applyStuckState();
+            }, 100)
+        );
+
+        setupOfferBannerCloseHook();
+    });
+})();

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

@@ -0,0 +1,92 @@
+var Wick = window.Wick || {};
+
+Wick.PLPChips = {
+    GROUP: '.plp-filters__group',
+    TOGGLE: '.plp-filters__toggle',
+    INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
+    CHIPS_WRAP_SEL: '.plp-selected',
+    BADGE_CLASS: 'plp-filters__badge',
+
+    renderGroupCounters(rootWrapper) {
+        rootWrapper.find(Wick.PLPChips.GROUP).each((_, el) => {
+            const group = $(el);
+            const name = group.attr('data-filter') || '';
+            const count = Wick.PLPFilters.appliedState[name]
+                ? Wick.PLPFilters.appliedState[name].size
+                : 0;
+            const btn = group.find(Wick.PLPChips.TOGGLE);
+            const badgeSpan = btn.find(`.${Wick.PLPChips.BADGE_CLASS} span`);
+            if (count > 0) {
+                badgeSpan.text(count).css('display', 'flex');
+            } else {
+                badgeSpan.text('').hide();
+            }
+        });
+    },
+
+    renderChips(rootWrapper) {
+        const wrap = rootWrapper.find(Wick.PLPChips.CHIPS_WRAP_SEL);
+        if (!wrap.length) {
+            return;
+        }
+
+        const list = wrap.find('.plp-selected__list');
+        let clearAllBtn = wrap.find('.plp-selected__clear-all');
+
+        list.empty();
+
+        const total = Wick.PLPFilters.totalApplied();
+        wrap.find('.plp-selected__clear-all').prop('hidden', total === 0);
+
+        if (total === 0) {
+            wrap.hide();
+            if (clearAllBtn.length) {
+                clearAllBtn.remove();
+            }
+            return;
+        }
+
+        Object.keys(Wick.PLPFilters.appliedState).forEach((group) => {
+            Wick.PLPFilters.appliedState[group].forEach((value) => {
+                list.append(
+                    `<button type="button" class="pf-chip" data-group="${group}" data-value="${value}">
+            <span class="pf-chip__text">${value}</span>
+            <i class="fa fa-times pf-chip__close" aria-hidden="true"></i>
+            <span class="sr-only">Remove ${value} from ${group}</span>
+        </button>`
+                );
+            });
+        });
+
+        if (clearAllBtn.length) {
+            clearAllBtn.prop('hidden', false);
+            clearAllBtn.appendTo(list);
+        } else {
+            clearAllBtn = $(`
+      <button type="button" class="plp-selected__clear-all btn btn-secondary">
+        <i class="fa fa-times" aria-hidden="true"></i><span>Clear all</span>
+      </button>
+    `);
+            list.append(clearAllBtn);
+        }
+    },
+
+    bindChipActions(rootWrapper) {
+        // remove one chip
+        rootWrapper.on('click', '.pf-chip', (e) => {
+            e.preventDefault();
+            const chip = $(e.target).closest('.pf-chip');
+            const groupDomName = chip.data('group');
+            const valueOriginal = chip.data('value');
+
+            Wick.PLPFilters.removeFromApplied(groupDomName, valueOriginal);
+            Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
+        });
+
+        // clear all
+        rootWrapper.on('click', '.plp-selected__clear-all', (e) => {
+            e.preventDefault();
+            Wick.PLPFilters.writeStateToURL({}, false);
+        });
+    },
+};

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

@@ -0,0 +1,150 @@
+var Wick = window.Wick || {};
+
+Wick.PLPFiltersMobile = {
+    ROOT_WRAPPER:
+        '.page-KitchenPLPPage, .products-list-page:not(.page-responsiveThematicProductListPage)',
+    PRODUCTS_LIST: '.products-list-page',
+    INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
+
+    MODAL_SEL: '#filterModal',
+    MODAL_VIEW_BTN: '#filterModal .btn.btn-primary',
+    MODAL_CLEAR_BTN: '#filterModal .btn.btn-secondary',
+    $ACCORDION: '.accordion',
+    $ACCORDION_CONTENT: '.accordion__content',
+    ACCORDION_COLLAPSED: 'accordion_collapsed',
+
+    getPlural(value, one, many) {
+        return value === 1 ? one : many;
+    },
+
+    isProductPage() {
+        return $(Wick.PLPFiltersMobile.PRODUCTS_LIST).length > 0;
+    },
+
+    getMobileCounts() {
+        const isProducts = Wick.PLPFiltersMobile.isProductPage();
+
+        if (isProducts) {
+            const total = (Wick.ProductCounter && Wick.ProductCounter.count) || 0;
+            return { mode: 'products', total };
+        }
+
+        const total = Wick.PLPFilters.totalApplied();
+        return { mode: 'filters', total };
+    },
+
+    updateMobileFilterInfo() {
+        const info = $('.mobile-nav__item[data-target="#filterModal"] .mobile-nav__info');
+        if (!info.length) return;
+
+        const { mode, total } = Wick.PLPFiltersMobile.getMobileCounts();
+
+        if (mode === 'products') {
+            return;
+        }
+
+        if (total > 0) {
+            const label = Wick.PLPFiltersMobile.getPlural(total, 'filter', 'filters');
+            info.text(`${total} ${label} applied`);
+        } else {
+            info.text('No filters applied');
+        }
+    },
+
+    updateViewResultsButton() {
+        const { mode } = Wick.PLPFiltersMobile.getMobileCounts();
+
+        if (mode === 'products') {
+            return;
+        }
+
+        const $btn = $(Wick.PLPFiltersMobile.MODAL_VIEW_BTN);
+        if (!$btn.length) return;
+
+        const { total } = Wick.PLPFiltersMobile.getMobileCounts();
+        $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)
+            .off('change.plpFiltersMobile', Wick.PLPFiltersMobile.INPUTS)
+            .on('change.plpFiltersMobile', Wick.PLPFiltersMobile.INPUTS, function () {
+                const inp = $(this);
+                const name = inp.attr('name');
+                if (!name) return;
+
+                Wick.PLPUtils.syncTwinInputsByName(name, inp.prop('checked'), inp);
+            });
+
+        // when the modal is opened — synchronize its checkboxes with state
+        $(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.appliedState);
+            });
+
+        $(document)
+            .off('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
+            .on('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
+                Wick.PLPFiltersMobile.hideAccordions();
+            });
+
+        // mobile "View results" button in modal
+        $(document)
+            .off('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_VIEW_BTN)
+            .on('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_VIEW_BTN, function (e) {
+                if ($(this).data('is-plp-srp')) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                    return;
+                }
+
+                e.preventDefault();
+
+                const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add(
+                    $(Wick.PLPFiltersMobile.MODAL_SEL)
+                );
+
+                Wick.PLPFilters.applyFromScopes(scope, true);
+            });
+
+        // mobile "Clear all" button in modal
+        $(document)
+            .off('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN)
+            .on('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN, function (e) {
+                if ($(this).data('is-plp-srp')) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                    return;
+                }
+
+                e.preventDefault();
+
+                Wick.PLPFilters.appliedState = {};
+                Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
+
+                $(document)
+                    .find(Wick.PLPFiltersMobile.INPUTS + ':checked')
+                    .prop('checked', false);
+
+                Wick.PLPFilters.updateSelectedUI($(Wick.PLPFiltersMobile.ROOT_WRAPPER));
+            });
+
+        // emulation watcher (stub backend)
+        $(document)
+            .off('productCounter:change.plpFiltersMobile')
+            .on('productCounter:change.plpFiltersMobile', function () {
+                Wick.PLPFiltersMobile.updateMobileFilterInfo();
+                Wick.PLPFiltersMobile.updateViewResultsButton();
+            });
+
+        Wick.PLPFiltersMobile.updateMobileFilterInfo();
+        Wick.PLPFiltersMobile.updateViewResultsButton();
+    },
+};

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

@@ -0,0 +1,123 @@
+var Wick = window.Wick || {};
+
+Wick.PLPFiltersPanel = {
+    ROOT: '.plp-filters',
+    BAR: '.plp-filters__bar',
+    GROUP: '.plp-filters__group',
+    TOGGLE: '.plp-filters__toggle',
+    PANEL: '.plp-filters__panel',
+
+    init() {
+        // toggle
+        $(document).on('click', Wick.PLPFiltersPanel.TOGGLE, Wick.PLPFiltersPanel.togglePanel);
+
+        // close outside filters / ESC
+        $(document).on('click', (e) => {
+            const root = $(Wick.PLPFiltersPanel.ROOT);
+            if (!root.is(e.target) && root.has(e.target).length === 0) {
+                Wick.PLPFiltersPanel.closeAll();
+            }
+        });
+
+        $(document).on('keydown', (e) => {
+            if (e.key === 'Escape') {
+                Wick.PLPFiltersPanel.closeAll();
+            }
+        });
+
+        // responsive (position of the opened panel)
+        $(window).on(
+            'resize',
+            _.debounce(() => {
+                const open = $(Wick.PLPFiltersPanel.GROUP + '.is-open').first();
+                if (open.length) {
+                    const btn = open.find(Wick.PLPFiltersPanel.TOGGLE).first();
+                    Wick.PLPFiltersPanel.layoutPanel(btn);
+                }
+            }, 120)
+        );
+    },
+
+    togglePanel(e) {
+        e.preventDefault();
+        const btn = $(this);
+        const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
+        const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
+        const willOpen = !group.hasClass('is-open');
+
+        Wick.PLPFiltersPanel.closeAll();
+        if (willOpen) {
+            group.addClass('is-open');
+            btn.attr('aria-expanded', 'true');
+            panel.attr('aria-hidden', 'false');
+            requestAnimationFrame(() => Wick.PLPFiltersPanel.layoutPanel(btn));
+        }
+    },
+
+    closeAll() {
+        $(Wick.PLPFiltersPanel.GROUP).removeClass('is-open');
+        $(Wick.PLPFiltersPanel.TOGGLE).attr('aria-expanded', 'false');
+        $(Wick.PLPFiltersPanel.PANEL)
+            .attr('aria-hidden', 'true')
+            .removeClass('plp-filters__panel--wide plp-filters__panel--auto')
+            .css({ left: '', right: '' });
+    },
+
+    layoutPanel(btn) {
+        const root = $(Wick.PLPFiltersPanel.ROOT);
+        const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
+        const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
+
+        let bar = group.closest(Wick.PLPFiltersPanel.BAR);
+        if (!bar.length) {
+            bar =
+                root.find('.plp-filters__bar-desktop:visible').first() ||
+                root.find('.plp-filters__bar-desktop').first() ||
+                root.find(Wick.PLPFiltersPanel.BAR).filter(':visible').first() ||
+                root.find(Wick.PLPFiltersPanel.BAR).first();
+        }
+        if (!bar.length || !panel.length) {
+            return;
+        }
+
+        panel
+            .removeClass('plp-filters__panel--wide plp-filters__panel--auto')
+            .css({ left: '', right: '', width: '' });
+
+        const barOff = bar.offset();
+        const groupOff = group.offset();
+        const barW = Math.round(bar.outerWidth());
+        const groupLeftWithinBar = Math.round(groupOff.left - barOff.left);
+
+        const type = Wick.PLPUtils.getPanelType(panel);
+        const items = Math.max(1, Wick.PLPUtils.countItems(panel));
+
+        if (type === 'cards') {
+            Wick.PLPUtils.setCardsColumns(panel, Math.min(items, 4));
+            let leftWithinBar = groupLeftWithinBar;
+            const panelW = panel.outerWidth();
+            if (leftWithinBar + panelW > barW) {
+                leftWithinBar = barW - panelW;
+            }
+            if (leftWithinBar < 0) {
+                leftWithinBar = 0;
+            }
+            panel.css({ left: leftWithinBar - groupLeftWithinBar });
+            return;
+        }
+        if (type === 'swatches') {
+            const panelW = panel.outerWidth();
+            let leftWithinBar = groupLeftWithinBar;
+            if (leftWithinBar + panelW > barW) {
+                leftWithinBar = barW - panelW;
+                if (leftWithinBar < 0) {
+                    leftWithinBar = 0;
+                }
+            }
+            panel.css({ left: leftWithinBar - groupLeftWithinBar });
+            return;
+        }
+        // text → fix to the right edge
+        panel.css({ right: 0 });
+    },
+};

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

@@ -0,0 +1,66 @@
+var Wick = window.Wick || {};
+
+Wick.PLPUtils = (function () {
+    function syncTwinInputsByName(name, checked, source) {
+        const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input').filter(
+            function () {
+                return $(this).attr('name') === name;
+            }
+        );
+        all.each(function () {
+            if (source && this === source[0]) {
+                return;
+            }
+            $(this).prop('checked', checked);
+        });
+    }
+
+    function getPanelType(panel) {
+        if (panel.find('.plp-filters__options--cards').length) {
+            return 'cards';
+        }
+        if (panel.find('.swatch-list').length) {
+            return 'swatches';
+        }
+        return 'text';
+    }
+
+    function countItems(panel) {
+        const t = getPanelType(panel);
+        if (t === 'cards') {
+            return panel.find('.filter-card').length || 0;
+        }
+        if (t === 'swatches') {
+            return panel.find('.swatch').length || 0;
+        }
+        return panel.find('.checkbox').length || 0;
+    }
+
+    function setCardsColumns(panel, cols) {
+        const wrap = panel.find('.plp-filters__options--cards');
+        if (wrap.length) {
+            wrap.css('grid-template-columns', `repeat(${cols}, minmax(0,1fr))`);
+        }
+    }
+
+    function getGroupsMeta(rootWrapper, selGroup) {
+        const out = [];
+        rootWrapper.find(selGroup).each((_, el) => {
+            const group = $(el);
+            const domName = group.attr('data-filter') || '';
+            if (!domName) {
+                return;
+            }
+            out.push({ domName, paramKey: domName, group });
+        });
+        return out;
+    }
+
+    return {
+        syncTwinInputsByName,
+        getPanelType,
+        countItems,
+        setCardsColumns,
+        getGroupsMeta,
+    };
+})();