wickes-css2 2.113.0-develop.10 → 2.113.0-develop.12

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

@@ -1,9 +1,6 @@
 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 },
@@ -13,40 +10,75 @@ Wick.ThumbGallery = (function () {
     const MAIN_DEFAULT = { w: 710, h: 399 };
     const THUMB = { w: 100, h: 56 };
 
-    function buildCloudinaryUrl(publicId, w, h) {
+    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_URL}${transforms}/c_pad,h_${h},w_${w}/v1/${publicId}?pgw=1`;
+        return `${base}${transforms}/c_pad,h_${h},w_${w}/v1/${cleanId}`;
     }
 
     function parseIdentifiers(hybrisString) {
-        return hybrisString
-            .trim()
-            .slice(1, hybrisString.length - 1)
+        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 generateMainSlideHtml(publicId) {
-        const sources = IMG_BREAKPOINTS.map(
-            (bp) =>
-                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h)}" media="${bp.media}">`
-        ).join('\n            ');
-
+    function renderMainSlide(src, sourcesHtml = '') {
+        const productName = getProductName();
         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}">
+            ${sourcesHtml}
+            <img class="swiper-slide-main" src="${src}" alt="${productName}">
           </picture>
         </div>`;
     }
 
-    function generateThumbSlideHtml(publicId) {
+    function renderThumbSlide(src) {
+        const productName = getProductName();
         return `<div class="thumb-gallery__slide-wrapper swiper-slide">
-          <img class="swiper-slide-thumbs" src="${buildCloudinaryUrl(publicId, THUMB.w, THUMB.h)}" alt="${productName}">
+          <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',
@@ -89,7 +121,11 @@ Wick.ThumbGallery = (function () {
     function handleThumbClick(swiper) {
         return function () {
             const clickedIndex = $(this).index();
-            swiper.slideToLoop(clickedIndex);
+            if (swiper.params && swiper.params.loop) {
+                swiper.slideToLoop(clickedIndex);
+            } else {
+                swiper.slideTo(clickedIndex);
+            }
         };
     }
 
@@ -110,9 +146,11 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange) {
+    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange, count) {
         return {
             ...MAIN_SWIPER_CONFIG,
+            loop: count > 1,
+            simulateTouch: count > 1,
             navigation: {
                 nextEl: $nextBtn[0],
                 prevEl: $prevBtn[0],
@@ -122,17 +160,44 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function initializeCarousel($slider, ids) {
-        $slider.find(SELECTORS.swiperMainWrapper).html(ids.map(generateMainSlideHtml).join('\n'));
-        $slider
-            .find(SELECTORS.swiperThumbsWrapper)
-            .html(ids.map(generateThumbSlideHtml).join('\n'));
+    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 $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
         const $thumbNextBtn = $slider.find(SELECTORS.thumbNextBtn);
         const $thumbPrevBtn = $slider.find(SELECTORS.thumbPrevBtn);
 
@@ -145,22 +210,25 @@ Wick.ThumbGallery = (function () {
             $container[0],
             getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
                 updateActiveThumbnail(swiper, thumbsSwiper);
-            })
+            }, total)
         );
 
-        $thumbContainer.on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+        $thumbContainer
+            .off('click', SELECTORS.swiperSlide)
+            .on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+
         updateActiveThumbnail(swiper, thumbsSwiper);
     }
 
-    function init(hybrisString) {
+    function init(hybrisString, options = {}) {
         const ids = parseIdentifiers(hybrisString);
 
-        if (ids.length < 2) {
-            return;
-        }
+        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);
+            initializeCarousel($(slider), ids, baseUrl, missingImage);
         });
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.113.0-develop.10",
+  "version": "2.113.0-develop.12",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/suite-product-card.hbs

@@ -16,12 +16,12 @@
                 <div class="suite-product-card__price-qty">
                     <div class="suite-product-card__vat including-vat">
                         <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price-vat}}</span>
-                        <span class="suite-product-card__vat-text">Inc. VAT</span>
+                        <span class="suite-product-card__vat-text">Inc.VAT</span>
                     </div>
 
                     <div class="suite-product-card__vat excluding-vat d-none">
                         <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price}}</span>
-                        <span class="suite-product-card__vat-text">Exc. VAT</span>
+                        <span class="suite-product-card__vat-text">Exc.VAT</span>
                     </div>
 
                     <span class="suite-product-card__quantity">

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

@@ -1,9 +1,6 @@
 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 },
@@ -13,40 +10,75 @@ Wick.ThumbGallery = (function () {
     const MAIN_DEFAULT = { w: 710, h: 399 };
     const THUMB = { w: 100, h: 56 };
 
-    function buildCloudinaryUrl(publicId, w, h) {
+    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_URL}${transforms}/c_pad,h_${h},w_${w}/v1/${publicId}?pgw=1`;
+        return `${base}${transforms}/c_pad,h_${h},w_${w}/v1/${cleanId}`;
     }
 
     function parseIdentifiers(hybrisString) {
-        return hybrisString
-            .trim()
-            .slice(1, hybrisString.length - 1)
+        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 generateMainSlideHtml(publicId) {
-        const sources = IMG_BREAKPOINTS.map(
-            (bp) =>
-                `<source srcset="${buildCloudinaryUrl(publicId, bp.w, bp.h)}" media="${bp.media}">`
-        ).join('\n            ');
-
+    function renderMainSlide(src, sourcesHtml = '') {
+        const productName = getProductName();
         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}">
+            ${sourcesHtml}
+            <img class="swiper-slide-main" src="${src}" alt="${productName}">
           </picture>
         </div>`;
     }
 
-    function generateThumbSlideHtml(publicId) {
+    function renderThumbSlide(src) {
+        const productName = getProductName();
         return `<div class="thumb-gallery__slide-wrapper swiper-slide">
-          <img class="swiper-slide-thumbs" src="${buildCloudinaryUrl(publicId, THUMB.w, THUMB.h)}" alt="${productName}">
+          <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',
@@ -89,7 +121,11 @@ Wick.ThumbGallery = (function () {
     function handleThumbClick(swiper) {
         return function () {
             const clickedIndex = $(this).index();
-            swiper.slideToLoop(clickedIndex);
+            if (swiper.params && swiper.params.loop) {
+                swiper.slideToLoop(clickedIndex);
+            } else {
+                swiper.slideTo(clickedIndex);
+            }
         };
     }
 
@@ -110,9 +146,11 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange) {
+    function getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, onSlideChange, count) {
         return {
             ...MAIN_SWIPER_CONFIG,
+            loop: count > 1,
+            simulateTouch: count > 1,
             navigation: {
                 nextEl: $nextBtn[0],
                 prevEl: $prevBtn[0],
@@ -122,17 +160,44 @@ Wick.ThumbGallery = (function () {
         };
     }
 
-    function initializeCarousel($slider, ids) {
-        $slider.find(SELECTORS.swiperMainWrapper).html(ids.map(generateMainSlideHtml).join('\n'));
-        $slider
-            .find(SELECTORS.swiperThumbsWrapper)
-            .html(ids.map(generateThumbSlideHtml).join('\n'));
+    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 $thumbContainer = $slider.find(SELECTORS.swiperContainerThumbs);
         const $thumbNextBtn = $slider.find(SELECTORS.thumbNextBtn);
         const $thumbPrevBtn = $slider.find(SELECTORS.thumbPrevBtn);
 
@@ -145,22 +210,25 @@ Wick.ThumbGallery = (function () {
             $container[0],
             getMainSwiperConfig($nextBtn, $prevBtn, thumbsSwiper, () => {
                 updateActiveThumbnail(swiper, thumbsSwiper);
-            })
+            }, total)
         );
 
-        $thumbContainer.on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+        $thumbContainer
+            .off('click', SELECTORS.swiperSlide)
+            .on('click', SELECTORS.swiperSlide, handleThumbClick(swiper));
+
         updateActiveThumbnail(swiper, thumbsSwiper);
     }
 
-    function init(hybrisString) {
+    function init(hybrisString, options = {}) {
         const ids = parseIdentifiers(hybrisString);
 
-        if (ids.length < 2) {
-            return;
-        }
+        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);
+            initializeCarousel($(slider), ids, baseUrl, missingImage);
         });
     }
 

package/src/page_bathroom-plp-vat.html

@@ -19,7 +19,7 @@
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
-                    <div class="package-plp__content">
+                    <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

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

@@ -26,7 +26,7 @@
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
-                    <div class="package-plp__content">
+                    <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

package/src/page_bathroom-plp.html

@@ -26,7 +26,7 @@
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                     </aside>
 
-                    <div class="package-plp__content">
+                    <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

package/src/page_product-details-ripple-gallery-1-image.html

@@ -0,0 +1,120 @@
+{{#extend "base" pageClass="page-product-details" title="PDP - Gallery with 1 image"
+          isDiscount=false
+          isExcludingDelivery=true
+          isCashback=false
+          isQuantity=true
+          isSize=false
+          klarna-placement=true
+          clearpay-placement=true
+          hourly-delivery=true
+          step3=true
+          currentlyInStock=true
+          pagePdp=true
+          package=true
+          postcodeChecker=true
+}}
+    {{#content "head" mode="append" pagePdp=true}}
+    {{/content}}
+    {{#content "body"}}
+        <main class="pdp__main">
+            <div class="container">
+                <div class="pdp pdp--ripple">
+                    <div class="pdp__title">
+                        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
+                            title in two raws
+                        </h1>
+                        <div class="pdp__reviews_small">
+                            <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
+                            <div class="product-card__reviews review-star">
+                                <div class="product-rating product-rating-v2">
+                                    <div class="rating-bg">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                        <div class="rating-overlay"
+                                             data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
+                                            <i class="fa fa-star" aria-hidden="true"></i>
+                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
+                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
+                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
+                                            <i class="fa fa-star ml-1" aria-hidden="true"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <span class="review-star-average review-star-average-v2">(4.6)</span>
+                            </div>
+                            <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
+                        </div>
+                    </div>
+
+                    <div class="pdp__full-gallery">
+                        {{> thumb-gallery }}
+                    </div>
+
+                    <div class="pdp__aside">
+                        {{> price-block-v2 isProductSaved=false isUserLogedOut=false price=ripple-pdp.price}}
+                    </div>
+
+                    <div class="pdp__full-description">
+                        {{> product-main-info-v2 currentlyInStock=false hideShareButton=true}}
+                    </div>
+
+
+                    <div class="pdp__suite-includes">
+                        {{> suite-includes products=ripple-pdp.suite-products price=ripple-pdp.price price-vat=ripple-pdp.price-vat }}
+                    </div>
+
+                    {{> fulfilment-accordions}}
+                </div>
+            </div>
+            <div class="container container-info">
+                <div class="pdp pdp--ripple">
+                    <div class="pdp__info">
+                        {{> pdp-info-v2 floor=true }}
+                    </div>
+                </div>
+            </div>
+            <div class="pdp--ripple">
+                {{> seo-widgets title="Related category" }}
+            </div>
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+        <script type="text/html" id="mini-basket-popup">
+                {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
+        </script>
+        <script defer src="./js/page/pdp.js"></script>
+        {{> click-and-collect-modal}}
+        {{> thank-you-modal}}
+    {{/content}}
+{{/extend}}
+<!--<script defer src="./js/page/ti.js"></script>-->
+<script type="module" defer src="./js/page/installation/fi.js"></script>
+<script defer src="./js/page/ripple/thumb-gallery.js" onload="Wick.ThumbGallery.init('[products/wickes/GPID_5000143102_00]', { mediaDomain: 'media.wickes.co.uk' })"></script>
+<script defer src="./js/postcode-checker.min.js"></script>
+<script>
+    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+        $(document).ready(function () {
+            $('.modal').on('scroll', function () {
+                $(':focus').blur();
+            });
+        });
+    }
+
+    $(document).ready(function () {
+
+        $('#info-details').toggleClass('accordion_collapsed');
+        $('#details-content').css('display', 'block');
+
+        $('#open-review').on('click', function () {
+            $('#info-review').toggleClass('accordion_collapsed');
+            $('#review-content').css('display', 'block');
+        });
+
+        $('.ti__next ti__next3 .btn').on('click', function () {
+           alert('Click');
+        });
+    })
+</script>