wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/src/js/page/ripple/thumb-gallery.js

@@ -0,0 +1,168 @@
+var Wick = window.Wick || {};
+
+Wick.ThumbGallery = (function () {
+    const BASE_URL = 'https://media.wickes.co.uk/image/upload/';
+    const productName = window.pdpProduct && window.pdpProduct.name ? window.pdpProduct.name : '';
+
+    const IMG_BREAKPOINTS = [
+        { media: '(max-width: 576px)', w: 576, h: 324 },
+        { media: '(max-width: 768px)', w: 510, h: 287 },
+        { media: '(max-width: 992px)', w: 310, h: 174 },
+    ];
+
+    const MAIN_DEFAULT = { w: 710, h: 399 };
+    const THUMB = { w: 100, h: 56 };
+
+    function buildCloudinaryUrl(publicId, w, h) {
+        const transforms = `b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_${h},q_auto:good,w_${w}`;
+        return `${BASE_URL}${transforms}/c_pad,h_${h},w_${w}/v1/${publicId}?pgw=1`;
+    }
+
+    function parseIdentifiers(hybrisString) {
+        return hybrisString
+            .trim()
+            .slice(1, hybrisString.length - 1)
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+    }
+
+    function generateMainSlideHtml(publicId) {
+        const sources = IMG_BREAKPOINTS.map(
+            (bp) =>
+                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h)}" media="${bp.media}">`
+        ).join('\n            ');
+
+        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
+          <picture>
+            ${sources}
+            <img class="swiper-slide-main" src="${buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h)}" alt="${productName}">
+          </picture>
+        </div>`;
+    }
+
+    function generateThumbSlideHtml(publicId) {
+        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
+          <img class="swiper-slide-thumbs" src="${buildCloudinaryUrl(publicId, THUMB.w, THUMB.h)}" alt="${productName}">
+        </div>`;
+    }
+
+    const SELECTORS = {
+        galleryCarousel: '.thumb-gallery',
+        swiperContainerMain: '.swiper-container-main',
+        swiperContainerThumbs: '.swiper-container-thumbs',
+        swiperMainWrapper: '.swiper-container-main .swiper-wrapper',
+        swiperThumbsWrapper: '.swiper-container-thumbs .swiper-wrapper',
+        nextBtn: '.thumb-gallery__next-btn',
+        prevBtn: '.thumb-gallery__prev-btn',
+        thumbNextBtn: '.swiper-container-thumbs__next-btn',
+        thumbPrevBtn: '.swiper-container-thumbs__prev-btn',
+        swiperSlide: '.swiper-slide',
+        activeThumbClass: 'swiper-true-active',
+    };
+
+    const THUMBS_SWIPER_CONFIG = {
+        spaceBetween: 8,
+        slidesPerView: 8,
+        watchSlidesVisibility: true,
+        watchSlidesProgress: true,
+        watchOverflow: true,
+        observer: true,
+        observeParents: true,
+        simulateTouch: false,
+    };
+
+    const THUMBS_BREAKPOINTS = {
+        991: { slidesPerView: 5 },
+        767: { allowTouchMove: true, slidesPerView: 5 },
+    };
+
+    const MAIN_SWIPER_CONFIG = {
+        speed: 400,
+        slidesPerView: 1,
+        loop: true,
+        observer: true,
+        observeParents: true,
+        simulateTouch: false,
+    };
+
+    function handleThumbClick(swiper) {
+        return function () {
+            const clickedIndex = $(this).index();
+            swiper.slideToLoop(clickedIndex);
+        };
+    }
+
+    function updateActiveThumbnail(swiper, thumbsSwiper) {
+        const activeIndex = swiper.realIndex;
+        thumbsSwiper.slides.removeClass(SELECTORS.activeThumbClass);
+        thumbsSwiper.slides.eq(activeIndex).addClass(SELECTORS.activeThumbClass);
+    }
+
+    function getThumbsConfig($thumbNextBtn, $thumbPrevBtn) {
+        return {
+            ...THUMBS_SWIPER_CONFIG,
+            navigation: {
+                nextEl: $thumbNextBtn[0],
+                prevEl: $thumbPrevBtn[0],
+            },
+            breakpoints: { ...THUMBS_BREAKPOINTS },
+        };
+    }
+
+    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange) {
+        return {
+            ...MAIN_SWIPER_CONFIG,
+            navigation: {
+                nextEl: $nextBtn[0],
+                prevEl: $prevBtn[0],
+            },
+            thumbs: { swiper: thumbsSwiper },
+            on: { slideChange: onSlideChange },
+        };
+    }
+
+    function initializeCarousel($slider, ids) {
+        $slider.find(SELECTORS.swiperMainWrapper).html(ids.map(generateMainSlideHtml).join('\n'));
+        $slider
+            .find(SELECTORS.swiperThumbsWrapper)
+            .html(ids.map(generateThumbSlideHtml).join('\n'));
+
+        const $container = $slider.find(SELECTORS.swiperContainerMain);
+        const $nextBtn = $slider.find(SELECTORS.nextBtn);
+        const $prevBtn = $slider.find(SELECTORS.prevBtn);
+
+        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
+        const $thumbNextBtn = $slider.find(SELECTORS.thumbNextBtn);
+        const $thumbPrevBtn = $slider.find(SELECTORS.thumbPrevBtn);
+
+        const thumbsSwiper = new Swiper(
+            $thumbContainer[0],
+            getThumbsConfig($thumbNextBtn, $thumbPrevBtn)
+        );
+
+        const swiper = new Swiper(
+            $container[0],
+            getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
+                updateActiveThumbnail(swiper, thumbsSwiper);
+            })
+        );
+
+        $thumbContainer.on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+        updateActiveThumbnail(swiper, thumbsSwiper);
+    }
+
+    function init(hybrisString) {
+        const ids = parseIdentifiers(hybrisString);
+
+        if (ids.length < 2) {
+            return;
+        }
+
+        $(SELECTORS.galleryCarousel).each(function (_, slider) {
+            initializeCarousel($(slider), ids);
+        });
+    }
+
+    return { init };
+})();

package/src/js/page/utils/create-count-stepper.js

@@ -18,7 +18,8 @@ function normalizeOptions(options) {
 }
 
 function toInt(value) {
-    const n = parseInt(String(value || '').trim(), 10);
+    const n = parseInt(`${value || ''}`.trim(), 10);
+
     return Number.isFinite(n) ? n : NaN;
 }
 
@@ -28,6 +29,7 @@ function clampMin(n, min) {
 
 function ensureQty(value, fallback) {
     const n = toInt(value);
+
     return Number.isFinite(n) ? n : fallback;
 }
 
@@ -58,12 +60,15 @@ function updateButtons($input, opt) {
 
     const $minus = getMinusBtn($wrap);
 
-    if ($minus.length) $minus.prop('disabled', qty <= opt.min);
+    if ($minus.length) {
+        $minus.prop('disabled', qty <= opt.min);
+    }
 }
 
 function setQty($input, opt, qty) {
     const next = clampMin(qty, opt.min);
-    $input.val(String(next));
+
+    $input.val(`${next}`);
     updateButtons($input, opt);
 
     if (typeof opt.onChange === 'function') {
@@ -83,11 +88,13 @@ function ensureButtons($input, opt) {
     if (!hasMinus) {
         $input.before(buildBtn('minus', true));
     }
+
     if (!hasPlus) {
         $input.after(buildBtn('plus', false));
     }
 
     const initial = ensureQty($input.val(), opt.min);
+
     setQty($input, opt, initial);
 }
 
@@ -95,16 +102,24 @@ function getInputs($root, inputSel) {
     const $scope = $root && $root.length ? $root : $(document);
     const $self = $scope.is(inputSel) ? $scope : $();
     const $found = $scope.find(inputSel);
+
     return $self.add($found);
 }
 
+function getNamespace(inputSel) {
+    return `.countStepper_${inputSel.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+}
+
 // ===== FACTORY =====
 
 export function createCountStepper(options = {}) {
     const OPT = normalizeOptions(options);
-    if (!OPT.inputSel) throw new Error('[createCountStepper] Missing inputSel');
 
-    const NS = `.cnt_${Math.random().toString(16).slice(2)}`;
+    if (!OPT.inputSel) {
+        throw new Error('[createCountStepper] Missing inputSel');
+    }
+
+    const NS = getNamespace(OPT.inputSel);
 
     function init($root) {
         getInputs($root, OPT.inputSel).each(function () {
@@ -112,7 +127,6 @@ export function createCountStepper(options = {}) {
         });
     }
 
-    // +/- click
     $(document)
         .off(`click${NS}`, '[data-count-btn]')
         .on(`click${NS}`, '[data-count-btn]', function (e) {
@@ -120,15 +134,22 @@ export function createCountStepper(options = {}) {
             const $parent = $btn.parent();
             const $input = $parent.find(OPT.inputSel).first();
 
-            if (!$input.length) return;
+            if (!$input.length) {
+                return;
+            }
 
             e.preventDefault();
 
             const type = ($btn.attr('data-count-type') || '').toLowerCase();
             const current = ensureQty($input.val(), OPT.min);
 
-            if (type === 'plus') setQty($input, OPT, current + 1);
-            if (type === 'minus') setQty($input, OPT, current - 1);
+            if (type === 'plus') {
+                setQty($input, OPT, current + 1);
+            }
+
+            if (type === 'minus') {
+                setQty($input, OPT, current - 1);
+            }
         });
 
     $(document)

package/src/js/page/utils/create-loading-button.js

@@ -0,0 +1,37 @@
+export function createLoadingButton(config = {}) {
+    const settings = {
+        text: '.loading-button__text',
+        loader: '.loading-button__loader',
+        loadingClass: 'loading-button--loading',
+        ...config,
+    };
+
+    function setLoading($button, isLoading) {
+        if (!$button.length) {
+            return;
+        }
+
+        $button.toggleClass(settings.loadingClass, isLoading);
+        $button.find(settings.text).toggleClass('d-none', isLoading);
+        $button.find(settings.loader).toggleClass('d-none', !isLoading);
+    }
+
+    function start($button) {
+        setLoading($button, true);
+    }
+
+    function stop($button) {
+        setLoading($button, false);
+    }
+
+    function isLoading($button) {
+        return $button.hasClass(settings.loadingClass);
+    }
+
+    return {
+        setLoading,
+        start,
+        stop,
+        isLoading,
+    };
+}

package/src/js/page/utils/create-toast.js

@@ -0,0 +1,79 @@
+export function createToast(config = {}) {
+    const settings = {
+        containerClass: 'toast-container',
+        toastClass: 'toast',
+        closeSelector: '.notification__close',
+        backdropClass: 'modal-backdrop--toast',
+        duration: 3000,
+        template: null,
+        getData(type, text) {
+            return {
+                text,
+                classModifier: `${settings.toastClass} notification_${type}`,
+                success: type === 'success',
+                warning: type === 'warning',
+                error: type === 'error',
+            };
+        },
+        ...config,
+    };
+
+    let closeTimer = null;
+
+    function clearCloseTimer() {
+        if (closeTimer) {
+            window.clearTimeout(closeTimer);
+            closeTimer = null;
+        }
+    }
+
+    function hide() {
+        clearCloseTimer();
+
+        $(`.${settings.containerClass}`).remove();
+        $(`.${settings.backdropClass}`).removeClass(settings.backdropClass);
+
+        if (window.Wick && Wick.Backdrop) {
+            Wick.Backdrop.hide();
+        }
+
+        $(document).off('click.toast');
+    }
+
+    function show({ type = 'success', text = '' }) {
+        if (!settings.template) {
+            return;
+        }
+
+        hide();
+
+        const toastHtml = settings.template(settings.getData(type, text));
+
+        if (window.Wick && Wick.Backdrop) {
+            Wick.Backdrop.show();
+            $('.modal-backdrop').addClass(settings.backdropClass);
+        }
+
+        $('body').append(`<div class="${settings.containerClass}">${toastHtml}</div>`);
+
+        $(`.${settings.containerClass}`)
+            .off('click.toastClose', settings.closeSelector)
+            .on('click.toastClose', settings.closeSelector, function (event) {
+                event.preventDefault();
+                hide();
+            });
+
+        $(document)
+            .off('click.toast')
+            .on('click.toast', `.${settings.backdropClass}`, function () {
+                hide();
+            });
+
+        closeTimer = window.setTimeout(hide, settings.duration);
+    }
+
+    return {
+        show,
+        hide,
+    };
+}

package/src/js/page/utils/custom-dropdown.js

@@ -0,0 +1,80 @@
+export function createDropdown(config) {
+    const settings = {
+        root: '[data-dropdown]',
+        toggle: '[data-dropdown-toggle]',
+        value: '[data-dropdown-value]',
+        option: '[data-dropdown-option]',
+        openClass: 'dropdown--open',
+        selectedClass: 'dropdown__option--selected',
+        selectedValueData: 'selected-value',
+        ariaExpandedAttr: 'aria-expanded',
+        ariaSelectedAttr: 'aria-selected',
+        namespace: 'customDropdown',
+        onSelect: function () {},
+        ...config,
+    };
+
+    function closeAll() {
+        $(settings.root).each(function () {
+            const $dropdown = $(this);
+            const $toggle = $dropdown.find(settings.toggle);
+
+            $dropdown.removeClass(settings.openClass);
+            $toggle.attr(settings.ariaExpandedAttr, 'false');
+        });
+    }
+
+    function selectOption($dropdown, $option) {
+        const $value = $dropdown.find(settings.value);
+        const $options = $dropdown.find(settings.option);
+        const selectedValue = $option.attr('data-value') || '';
+
+        $options.removeClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'false');
+        $option.addClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'true');
+
+        if ($value.length) {
+            $value.text($option.text().trim());
+        }
+
+        $dropdown.data(settings.selectedValueData, selectedValue);
+
+        settings.onSelect($dropdown, $option, selectedValue);
+    }
+
+    function bind() {
+        $(document).off(`click.${settings.namespace}`);
+        $(document).on(`click.${settings.namespace}`, function (event) {
+            const $target = $(event.target);
+            const $toggle = $target.closest(settings.toggle);
+            const $option = $target.closest(settings.option);
+            const $dropdown = $target.closest(settings.root);
+
+            if (!$dropdown.length) {
+                closeAll();
+                return;
+            }
+
+            if ($toggle.length) {
+                const isOpen = $dropdown.hasClass(settings.openClass);
+
+                closeAll();
+
+                $dropdown.toggleClass(settings.openClass, !isOpen);
+                $toggle.attr(settings.ariaExpandedAttr, String(!isOpen));
+
+                return;
+            }
+
+            if ($option.length) {
+                selectOption($dropdown, $option);
+                closeAll();
+            }
+        });
+    }
+
+    return {
+        bind,
+        closeAll,
+        selectOption,
+    };
+}

package/src/page_bathroom-plp-vat.html

@@ -0,0 +1,81 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true bundle="plp" switch-vat=true}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+    {{#content "body"}}
+        <main>
+            <div class="package-plp container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Bathroom Suite Packages
+                    </h1>
+                    {{> srp-injected}}
+                </div>
+
+                {{> quick-filter filterData=quickFilter.iconAndText_5}}
+
+                <div class="package-plp__container">
+                    <aside class="package-plp__search-filter">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="package-plp__content">
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="24 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
+                            </div>
+                        </div>
+
+                        <input id="numberOfPagesPLP" value="2" type="hidden">
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="package-plp__cards">
+                            {{> package-card cards=ripple-plp.cards}}
+                            {{#if search-result_v2.product-banner}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.bloomreach-media-banner}}
+                                {{#each search-result_v2.bloomreach-media-banner}}
+                                    {{>card_bloomreach_media_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                        </div>
+
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/page/quick-filter.js"></script>
+    {{/content}}
+{{/extend}}

package/src/page_bathroom-plp-without-load-more.html

@@ -0,0 +1,83 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true bundle="plp"}}
+{{#content "head" mode="append"}}
+    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+    <link type="text/css" rel="stylesheet" href="https://static-content-develop.dev.wickes.co.uk/whisk/kitchen-static/css/kitchen-content.css">
+{{/content}}
+    {{#content "body"}}
+        <main>
+            <div class="package-plp container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Bathroom Suite Packages
+                    </h1>
+                    {{> srp-injected}}
+                    {{> sponsor-top-banner }}
+                </div>
+
+                {{> quick-filter filterData=quickFilter.iconAndText_5}}
+
+                <div class="hybris-slot">
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                     <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+
+                <div class="package-plp__container">
+                    <aside class="package-plp__search-filter">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="package-plp__content">
+                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
+                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-filter"
+                                title="Filter by"
+                                info="24 results"
+                                modalId="filterModal"
+                                mod="filter-modal-cta"
+                                }}
+                                {{> kitchen/mobile-nav-item
+                                icon="fas fa-sort-alt"
+                                title="Sort by"
+                                info="Relevance"
+                                dropdown=true
+                                }}
+                            </div>
+                        </div>
+
+                        <input id="numberOfPagesPLP" value="1" type="hidden">
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="package-plp__cards">
+                            {{> package-card cards=(limitArray ripple-plp.cards 7)}}
+                        </div>
+
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="hybris-slot">
+                    <div class="banner-emulation" style="height: 398px; min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                    <div style="min-height: 120px; background-color: gray;"></div>
+                </div>
+            </div>
+
+            {{> legal-info}}
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+        <script defer src="./js/page/quick-filter.js"></script>
+    {{/content}}
+{{/extend}}