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

package/src/data/data_heavy-banner.json

@@ -0,0 +1,29 @@
+{
+  "heavyBannerImages": [
+    {
+      "title": "Traffic access issues",
+      "src": "./img/emulation/traffic-access-issues.png",
+      "alt": "Traffic access issues"
+    },
+    {
+      "title": "Low trees",
+      "src": "./img/emulation/low-trees.png",
+      "alt": "Low trees"
+    },
+    {
+      "title": "Overhead power cables",
+      "src": "./img/emulation/overhead-power-cables.png",
+      "alt": "Overhead power cables"
+    },
+    {
+      "title": "Parked vehicles in the delivery path",
+      "src": "./img/emulation/parked-vehicles.png",
+      "alt": "Parked vehicles in the delivery path"
+    },
+    {
+      "title": "Walls or fences in the delivery path",
+      "src": "./img/emulation/walls-or-fences.png",
+      "alt": "Walls or fences in the delivery path"
+    }
+  ]
+}

package/src/data/data_suite-includes-products.json

@@ -0,0 +1,134 @@
+{
+  "ripple-pdp": {
+    "suite-products": [
+      {
+        "title": "Wickes Portland 2 Tap Hole Ceramic Bathroom Basin with Full Pedestal - 550mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=washstand",
+            "altText": "Washstand"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Portland Close Coupled Toilet Pan, Cistern & Seat",
+        "image": {
+            "url": "https://placehold.co/51x51?text=toilet",
+            "altText": "Toilet"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Portland 2 Tap Hole Ceramic Bathroom Basin with Full Pedestal - 550mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=shower",
+            "altText": "Shower"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Chrome Quadrant Sliding Shower Enclosure - 800 x 800mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=shower-tray",
+            "altText": "Shower tray"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Plated Basin Waste Kit - Chrome",
+        "image": {
+            "url": "https://placehold.co/51x51?text=basin-waste",
+            "altText": "Basin waste"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Chrome Shower Tray Waste - 50mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=shower-waste",
+            "altText": "Shower waste"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      }
+    ],
+    "suite-products-promo": [
+      {
+        "title": "Wickes Portland 2 Tap Hole Ceramic Bathroom Basin with Full Pedestal - 550mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=washstand",
+            "altText": "Washstand"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Portland Close Coupled Toilet Pan, Cistern & Seat",
+        "image": {
+            "url": "https://placehold.co/51x51?text=toilet",
+            "altText": "Toilet"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Portland 2 Tap Hole Ceramic Bathroom Basin with Full Pedestal - 550mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=shower",
+            "altText": "Shower"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Chrome Quadrant Sliding Shower Enclosure - 800 x 800mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=shower-tray",
+            "altText": "Shower tray"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1,
+        "was_price": "89.95",
+        "was_price-vat": "90.95"
+      },
+      {
+        "title": "Wickes Plated Basin Waste Kit - Chrome",
+        "image": {
+            "url": "https://placehold.co/51x51?text=basin-waste",
+            "altText": "Basin waste"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      },
+      {
+        "title": "Wickes Chrome Shower Tray Waste - 50mm",
+        "image": {
+            "url": "https://placehold.co/51x51?text=shower-waste",
+            "altText": "Shower waste"
+        },
+        "price": 60,
+        "price-vat": 61,
+        "quantity": 1
+      }
+    ],
+    "was_price": 480,
+    "was_price-vat": 481,
+    "price": 316,
+    "price-vat": 317
+  }
+}

package/src/data/my-account/data_my-account.json

@@ -114,7 +114,7 @@
             "shipmentDetails": [
               {
                 "shipmentIcon": "fas fa-shipping-fast",
-                "shipmentTitle": "Premium Delivery from Southampton store",
+                "shipmentTitle": "Next Day AM Delivery",
                 "shipmentInfo": "Dispatched. Delivery — By 12 PM - 12th Apr 2026",
                 "itemsCount": 1
               },

package/src/data/my-account/data_my-order.json

@@ -320,7 +320,7 @@
           "subtotalTooltip": "Order level promotions and delivery charges are not included"
         },
         {
-          "title": "Premium Delivery",
+          "title": "Next Day AM Delivery",
           "subtotal": "£53.65",
           "track": "#",
           "deliveryRange": [

package/src/data/my-account/data_my-orders.json

@@ -101,7 +101,7 @@
         "shipmentDetails": [
           {
             "shipmentIcon": "fas fa-shipping-fast",
-            "shipmentTitle": "Premium Delivery from Southampton store",
+            "shipmentTitle": "Next Day AM Delivery",
             "shipmentInfo": "Dispatched. Delivery — By 12 PM - 12th Apr 2026",
             "itemsCount": 1
           },

package/src/js/components/banner-placement-manager.js

@@ -59,6 +59,8 @@ Wick.BannerPlacementManager = {
             Wick.BannerPlacementManager.hideBannerDueLimit(banner, index);
             Wick.BannerPlacementManager.moveBannerToSpecifiedPosition(banner);
         });
+
+        $(window).trigger('productBannerPositionChanged');
     },
     moveBannerToSpecifiedPosition(banner) {
         const $listSlots = Wick.BannerPlacementManager.getListSlots();
@@ -268,7 +270,21 @@ Wick.BannerPlacementManager = {
             window.dispatchEvent(sponsorAdsEvent);
         });
     },
-    init() {
+    init(options = {}) {
+        if (options) {
+            $.extend(Wick.BannerPlacementManager.el, options);
+        }
+
+        Wick.BannerPlacementManager.el.$products = $(Wick.BannerPlacementManager.el.productCard);
+
+        const hasBanners = Wick.BannerPlacementManager.getBannersAmount();
+        const hasTopBanner = $(Wick.BannerPlacementManager.el.sponsorTopBanner).length;
+        const hasProducts = Wick.BannerPlacementManager.getProductsAmount();
+
+        if ((!hasBanners && !hasTopBanner) || !hasProducts) {
+            return;
+        }
+
         Wick.Responsive.onResize(function () {
             if (
                 Wick.BannerPlacementManager.currentBreakpoint !==
@@ -285,21 +301,21 @@ Wick.BannerPlacementManager = {
                     Wick.BannerPlacementManager.dispatchSponsorAdsDisplayedEvent();
                     Wick.BannerPlacementManager.isEventSent = true;
                 }
-
-                $(window).trigger('productBannerPositionChanged');
             }
         });
     },
 };
 
 $(document).ready(function () {
-    const hasBanners = Wick.BannerPlacementManager.getBannersAmount();
-    const hasTopBanner = $(Wick.BannerPlacementManager.el.sponsorTopBanner).length;
-    const hasProducts = Wick.BannerPlacementManager.getProductsAmount();
+    const isPackagePlp = $('.package-plp__cards').length > 0;
+    const options = {};
 
-    if ((!hasBanners && !hasTopBanner) || !hasProducts) {
-        return;
+    if (isPackagePlp) {
+        options.productCard = '.package-card';
+        options.productsWrap = '.package-plp__cards';
+        options.allListSlots = '.package-card, .card-product-banner, .card-sponsor-banner';
+        options.allBanners = '.card-product-banner, .card-sponsor-banner';
     }
 
-    Wick.BannerPlacementManager.init();
+    Wick.BannerPlacementManager.init(options);
 });

package/src/js/components/general/cart-slider.js

@@ -1,5 +1,30 @@
 const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
 
+function waitUntilVisible($element, callback) {
+    if (!$element.length) {
+        return;
+    }
+
+    const element = $element[0];
+    const rect = element.getBoundingClientRect();
+
+    if (rect.width > 0 && rect.height > 0) {
+        callback();
+        return;
+    }
+
+    const observer = new ResizeObserver(function (entries) {
+        const { width, height } = entries[0].contentRect;
+
+        if (width > 0 && height > 0) {
+            observer.disconnect();
+            callback();
+        }
+    });
+
+    observer.observe(element);
+}
+
 createPopupSlider({
     type: 'cart',
     sliderSelector: '.custom-slider.just-added',
@@ -15,16 +40,28 @@ createPopupSlider({
             $('body').append(cartSliderHTML);
         }
 
-        const htmlContent = event.detail.html;
+        const $slider = $('.custom-slider.just-added').last();
+        const htmlContent = event.detail.cartPopupHtml || event.detail.html;
 
         if (htmlContent) {
-            $(el.slider).append(htmlContent);
+            $slider.append(htmlContent);
         }
 
+        const $sliderWrap = $slider.find('.custom-slider__wrap').last();
+        const dontForgetPayload = event.detail.recommendationWidget;
+
         showSlider();
 
-        if ($(el.sliderWrap).length) {
-            $(el.sliderWrap).on(
+        if ($sliderWrap.length && Wick.BloomreachWidget?.hasRecommendations(dontForgetPayload)) {
+            waitUntilVisible($slider, function () {
+                Wick.BloomreachWidget.init('dontForget', dontForgetPayload, {
+                    container: $sliderWrap,
+                });
+            });
+        }
+
+        if ($sliderWrap.length) {
+            $sliderWrap.on(
                 'scroll',
                 _.debounce(() => handleScroll(el.sliderWrap), 100)
             );

package/src/js/components/general/image-accordion.js

@@ -0,0 +1,54 @@
+var Wick = Wick || {};
+Wick.ImageAccordion = (function () {
+    const CONFIG = {
+        animationDuration: 200,
+        collapsedText: 'See details',
+        expandedText: 'Hide details',
+    };
+
+    const SELECTORS = {
+        root: '.image-accordion',
+        toggler: '.image-accordion__header',
+        content: '.image-accordion__content',
+        headerText: '.image-accordion__header-text',
+        collapsedClass: 'image-accordion--collapsed',
+    };
+
+    function handleToggle(e) {
+        var $trigger = $(e.currentTarget);
+        var $accordion = $trigger.closest(SELECTORS.root);
+
+        if (!$accordion.length) {
+            return;
+        }
+
+        var $triggerSel = $(SELECTORS.toggler);
+
+        if (!$trigger.is($triggerSel)) {
+            return;
+        }
+
+        var $headerText = $accordion.find(SELECTORS.headerText);
+
+        $accordion.toggleClass(SELECTORS.collapsedClass);
+
+        $headerText.text(
+            $accordion.hasClass(SELECTORS.collapsedClass)
+                ? CONFIG.collapsedText
+                : CONFIG.expandedText
+        );
+
+        $accordion
+            .children(SELECTORS.content)
+            .stop(true, true)
+            .slideToggle(CONFIG.animationDuration);
+    }
+
+    function init() {
+        $(document)
+            .off('click.wickImageAccordion', SELECTORS.toggler)
+            .on('click.wickImageAccordion', SELECTORS.toggler, handleToggle);
+    }
+
+    init();
+})();

package/src/js/components/general/switchVat.js

@@ -33,11 +33,12 @@ Wick.VatToggle = {
 
     setSwitcherState: function (isToggled) {
         $(Wick.VatToggle.el.switchVatInput).attr('checked', isToggled);
+        $(Wick.VatToggle.el.switchVatInput).prop('checked', isToggled);
     },
 
     getSwitcherState: function () {
         if ($(Wick.VatToggle.el.switchVatInput).length) {
-            return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
+            return !!$(Wick.VatToggle.el.switchVatInput).prop('checked');
         } else {
             return null;
         }
@@ -125,6 +126,12 @@ Wick.VatToggle = {
     },
 
     init: function () {
+        const switchVatInput = $(Wick.VatToggle.el.switchVatInput);
+
+        if (switchVatInput.length) {
+            switchVatInput.attr('autocomplete', 'off');
+        }
+
         const isVatShouldBeToggled = Wick.VatToggle.isOn();
         const isVatToggled = !!Wick.VatToggle.getSwitcherState();
 

package/src/js/components/package-card.js

@@ -0,0 +1,69 @@
+var Wick = Wick || {};
+
+Wick.PackageCards = (function () {
+    const SELECTORS = {
+        packageCard: '.package-card',
+        bannerCards: '.card-product-banner, .card-sponsor-banner, .card-bloomreach-media-banner',
+        packageCardStickers: '.package-card__stickers',
+    };
+
+    const CLASSES = {
+        stickersRow: 'has-stickers-row',
+    };
+
+    function formRows(cardsData) {
+        const rows = {};
+
+        $.each(cardsData, (_, item) => {
+            const topPosition = Math.round(item.$card.offset().top);
+
+            if (!rows[topPosition]) {
+                rows[topPosition] = [];
+            }
+            rows[topPosition].push(item);
+        });
+
+        return rows;
+    }
+
+    function alignGridRows() {
+        const gridItemsSelector = `${SELECTORS.packageCard}, ${SELECTORS.bannerCards}`;
+        const $cards = $(gridItemsSelector);
+
+        if (!$cards.length) return;
+
+        const cardsData = $.map($cards, (card) => ({
+            $card: $(card),
+            $stickers: $(card).find(SELECTORS.packageCardStickers),
+        }));
+
+        $.each(cardsData, (_, item) => {
+            item.$card.removeClass(CLASSES.stickersRow);
+        });
+
+        const rows = formRows(cardsData);
+
+        $.each(Object.values(rows), (_, rowItems) => {
+            const rowHasStickers = rowItems.some(
+                (item) => item.$stickers.length > 0 && item.$stickers.html().trim() !== ''
+            );
+
+            if (rowHasStickers) {
+                $.each(rowItems, (_, item) => {
+                    item.$card.addClass(CLASSES.stickersRow);
+                });
+            }
+        });
+    }
+
+    $(document).ready(function () {
+        alignGridRows();
+    });
+
+    $(window).on('resize', _.debounce(alignGridRows, 50));
+    $(window).on('productBannerPositionChanged', alignGridRows);
+
+    return {
+        alignGridRows,
+    };
+})();

package/src/js/components/store-locator-cards.js

@@ -0,0 +1,76 @@
+var Wick = Wick || {};
+
+Wick.StoreCardsAlign = (function () {
+    const SELECTORS = {
+        card: '.card-store',
+        info: '.card-store__info',
+        accordionHeader: '.opening-times-accordion__header',
+    };
+
+    let resizeTimeout;
+
+    function alignCardInfoHeights() {
+        const rows = [];
+
+        $(SELECTORS.card).each(function () {
+            const $card = $(this);
+            const top = $card.offset().top;
+
+            let row = rows.find((r) => Math.abs(r.top - top) < 5);
+
+            if (!row) {
+                row = { top: top, items: [] };
+                rows.push(row);
+            }
+
+            row.items.push($card);
+        });
+
+        rows.forEach((row) => {
+            let maxHeight = 0;
+
+            // reset
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', '');
+            });
+
+            // find max
+            row.items.forEach(($card) => {
+                const h = $card.find(SELECTORS.info).outerHeight();
+                if (h > maxHeight) maxHeight = h;
+            });
+
+            // apply
+            row.items.forEach(($card) => {
+                $card.find(SELECTORS.info).css('min-height', maxHeight + 'px');
+            });
+        });
+    }
+
+    function bindEvents() {
+        // load
+        $(window).on('load', alignCardInfoHeights);
+
+        // resize
+        $(window).on('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(alignCardInfoHeights, 100);
+        });
+
+        // accordion
+        $(document).on('click', SELECTORS.accordionHeader, () => {
+            setTimeout(alignCardInfoHeights, 0);
+        });
+    }
+
+    function init() {
+        bindEvents();
+    }
+
+    init();
+
+    return {
+        init,
+        align: alignCardInfoHeights,
+    };
+})();