wickes-css2 2.113.0 → 2.117.0-develop.1

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

@@ -0,0 +1,236 @@
+var Wick = window.Wick || {};
+
+Wick.ThumbGallery = (function () {
+    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 getMediaDomain() {
+        return (typeof window !== 'undefined' && window.mediaDomain) || 'media.wickes.co.uk';
+    }
+
+    function getProductName() {
+        return (typeof window !== 'undefined' && window.pdpProduct && window.pdpProduct.name) || '';
+    }
+
+    function getBaseUrl(customDomain) {
+        const domain = customDomain || getMediaDomain();
+        const cleanDomain = domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+        return `https://${cleanDomain}/image/upload/`;
+    }
+
+    function buildCloudinaryUrl(publicId, w, h, baseUrl) {
+        const base = baseUrl || getBaseUrl();
+        const cleanId = String(publicId).replace(/^\/+/, '');
+        const transforms = `b_rgb:FFFFFF,c_pad,dpr_1.0,f_jpg,h_${h},q_auto:good,w_${w}`;
+        return `${base}${transforms}/c_pad,h_${h},w_${w}/v1/${cleanId}?pgw=1`;
+    }
+
+    function parseIdentifiers(hybrisString) {
+        if (Array.isArray(hybrisString)) {
+            return hybrisString.filter(Boolean);
+        }
+        if (!hybrisString || typeof hybrisString !== 'string') {
+            return [];
+        }
+        const trimmed = hybrisString.trim();
+        const content = trimmed.startsWith('[') && trimmed.endsWith(']')
+            ? trimmed.slice(1, -1)
+            : trimmed;
+
+        return content
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+    }
+
+    function renderMainSlide(src, sourcesHtml = '') {
+        const productName = getProductName();
+        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
+          <picture>
+            ${sourcesHtml}
+            <img class="swiper-slide-main" src="${src}" alt="${productName}">
+          </picture>
+        </div>`;
+    }
+
+    function renderThumbSlide(src) {
+        const productName = getProductName();
+        return `<div class="thumb-gallery__slide-wrapper swiper-slide">
+          <img class="swiper-slide-thumbs" src="${src}" alt="${productName}">
+        </div>`;
+    }
+
+    function generateCloudinaryMainSlide(publicId, baseUrl) {
+        const sourcesHtml = IMG_BREAKPOINTS.map(
+            (bp) => `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h, baseUrl)}" media="${bp.media}">`
+        ).join('\n            ');
+        const fallbackSrc = buildCloudinaryUrl(publicId, MAIN_DEFAULT.w, MAIN_DEFAULT.h, baseUrl);
+        return renderMainSlide(fallbackSrc, sourcesHtml);
+    }
+
+    function generateCloudinaryThumbSlide(publicId, baseUrl) {
+        const src = buildCloudinaryUrl(publicId, THUMB.w, THUMB.h, baseUrl);
+        return renderThumbSlide(src);
+    }
+
+    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();
+            if (swiper.params && swiper.params.loop) {
+                swiper.slideToLoop(clickedIndex);
+            } else {
+                swiper.slideTo(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, count) {
+        return {
+            ...MAIN_SWIPER_CONFIG,
+            loop: count > 1,
+            simulateTouch: count > 1,
+            navigation: {
+                nextEl: $nextBtn[0],
+                prevEl: $prevBtn[0],
+            },
+            thumbs: { swiper: thumbsSwiper },
+            on: { slideChange: onSlideChange },
+        };
+    }
+
+    function initializeCarousel($slider, ids, baseUrl, missingImage) {
+        const isMissing = ids.length === 0 && Boolean(missingImage);
+        if (ids.length === 0 && !missingImage) {
+            return;
+        }
+
+        const $container = $slider.find(SELECTORS.swiperContainerMain);
+        const $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
+        if (!$container.length || !$thumbContainer.length) {
+            return;
+        }
+
+        if ($container[0].swiper) {
+            $container[0].swiper.destroy(true, true);
+        }
+        if ($thumbContainer[0].swiper) {
+            $thumbContainer[0].swiper.destroy(true, true);
+        }
+
+        const total = isMissing ? 1 : ids.length;
+        $slider.attr('data-length', total);
+
+        if (isMissing) {
+            $slider.addClass('thumb-gallery--missing-image');
+            $slider.find(SELECTORS.swiperMainWrapper).html(renderMainSlide(missingImage));
+            $slider.find(SELECTORS.swiperThumbsWrapper).html(renderThumbSlide(missingImage));
+        } else {
+            $slider.removeClass('thumb-gallery--missing-image');
+            $slider
+                .find(SELECTORS.swiperMainWrapper)
+                .html(ids.map((id) => generateCloudinaryMainSlide(id, baseUrl)).join('\n'));
+            $slider
+                .find(SELECTORS.swiperThumbsWrapper)
+                .html(ids.map((id) => generateCloudinaryThumbSlide(id, baseUrl)).join('\n'));
+        }
+
+        const $nextBtn = $slider.find(SELECTORS.nextBtn);
+        const $prevBtn = $slider.find(SELECTORS.prevBtn);
+        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);
+            }, total)
+        );
+
+        $thumbContainer
+            .off('click', SELECTORS.swiperSlide)
+            .on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+
+        updateActiveThumbnail(swiper, thumbsSwiper);
+    }
+
+    function init(hybrisString, options = {}) {
+        const ids = parseIdentifiers(hybrisString);
+
+        const opts = typeof options === 'string' ? { mediaDomain: options } : (options || {});
+        const baseUrl = getBaseUrl(opts.mediaDomain);
+        const missingImage = opts.missingImage || '';
+
+        $(SELECTORS.galleryCarousel).each(function (_, slider) {
+            initializeCarousel($(slider), ids, baseUrl, missingImage);
+        });
+    }
+
+    return { init };
+})();

package/src/js/page/utils/validation.js

@@ -148,7 +148,7 @@ export function validatePostcode(element, ifConvert) {
 export function isValidPostcodeField(value) {
     const transformedValue = value.toUpperCase().replaceAll(' ', '');
     const regExp = new RegExp(
-        '^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))[0-9][A-BD-HJLNP-UW-Z]{2})$'
+        '^((GIR0AA)|((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))[0-9][A-BD-HJLNP-UW-Z]{2}))$'
     );
     return transformedValue.replace(/\s+/g, '').length > 4 && regExp.test(transformedValue);
 }

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 products-list-v2">
+                        <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 products-list-v2">
+                        <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}}

package/src/page_bathroom-plp.html

@@ -0,0 +1,98 @@
+{{#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 products-list-v2">
+                        <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>
+
+            <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}}