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

package/src/data/data_shopping-cart-v2.json

@@ -8,10 +8,12 @@
     },
     "potentialOrderPromotions": [
       {
-        "description": "Spend over £200 on Bathroom Lighting and save £10.0"
+        "description": "Spend over £200 on Bathroom Lighting and save £10.0",
+        "descriptionExcVat": "Spend over £150 on Bathroom Lighting and save £10.0"
       },
       {
-        "description": "Spend over 2500 pound and get £2500 discount"
+        "description": "Spend over 2500 pound and get £2500 discount",
+        "descriptionExcVat": "Spend over 2000 pound and get £2000 discount"
       }
     ],
     "checkout": {
@@ -43,23 +45,28 @@
       "discounts": [
         {
           "text": "Voucher abcd applies and giving 20% off",
+          "textExcVat": "Voucher abcd applies and giving 18% off",
           "isDeletable": true
         },
         {
           "text": "Voucher 20% off",
+          "textExcVat": "Voucher 18% off",
           "isDeletable": true
         },
         {
-          "text": "Buy 4 for 3"
+          "text": "Buy 4 for 3",
+          "textExcVat": "Buy 5 for 3"
         },
         {
           "text": "Online only offer"
         },
         {
-          "text": "2 for £35"
+          "text": "2 for £35",
+          "textExcVat": "2 for £30"
         },
         {
-          "text": "Offer price equivalent to £17.50 per item"
+          "text": "Offer price equivalent to £17.50 per item",
+          "textExcVat": "Offer price equivalent to £15.50 per item"
         }
       ],
       "total": {
@@ -86,6 +93,10 @@
               "Buy 2 for 3 — Add 1 to qualify",
               "Buy 2 for 3 — Add 1 to qualify"
             ],
+            "offersExcVat": [
+              "Buy 2 for 4 — Add 2 to qualify",
+              "Buy 2 for 4 — Add 2 to qualify"
+            ],
             "pricePerSQM": {
               "value": "12"
             },
@@ -1049,6 +1060,10 @@
               "Buy 2 for 3 — Add 1 to qualify",
               "Buy 2 for 3 — Add 1 to qualify"
             ],
+            "offersExcVat": [
+              "Buy 2 for 4 — Add 2 to qualify",
+              "Buy 2 for 4 — Add 2 to qualify"
+            ],
             "message": "Purchased 12 times since your last visit 1 day ago",
             "infoTimeHead": "Available for Collection",
             "address": "Watford",
@@ -1109,6 +1124,9 @@
             "totalMobile": "16",
             "offers": [
               "Buy 2 Wickes Romano Bathroom Door Handle - Polished Chrome 1 Pair, Wickes Romano Locking Door Handle - Satin Nickel 1 Pair, Wickes Passage Door Knob Set - Brass 1 Pair for £8 - Add 1 to qualify"
+            ],
+            "offersExcVat": [
+              "Buy 2 Wickes Romano Bathroom Door Handle - Polished Chrome 1 Pair, Wickes Romano Locking Door Handle - Satin Nickel 1 Pair, Wickes Passage Door Knob Set - Brass 1 Pair for £7 - Add 1 to qualify"
             ]
           },
           {

package/src/data/data_spr_injected_content.json

@@ -7,6 +7,10 @@
           "name": "Essentials TEST",
           "keyword": "plaster",
           "bannerType": "image_url",
+          "src": "https://placehold.co/1200x200?text=Injected+Banner+Desktop",
+          "mobile-src": "https://placehold.co/600x200?text=Injected+Banner+Mobile",
+          "href": "/sitemap.html",
+          "alt": "Wickes Essentials",
           "htmlText": "<img src=\"https://media.wickes.co.uk/is/image/wickes/28120-Feb-Trade-Essentials-Homepage-Full-Width?&extend=0,0,0,0&fmt=png8\" usemap=\"#hotspot-map-186857\"><map name=\"hotspot-map-186857\"><area shape=\"rect\" coords=\"0,0,1400,400\" href=\"https://www.wickes.co.uk/trade/trade-offers\" alt=\"Wickes Essentials\"></map>",
           "dateEnd": "Fri Jan 12 20:06:43 UTC 1001968",
           "id": "186857"

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

@@ -8,6 +8,7 @@
             "altText": "Washstand"
         },
         "price": 60,
+        "price-vat": 61,
         "quantity": 1
       },
       {
@@ -17,6 +18,7 @@
             "altText": "Toilet"
         },
         "price": 60,
+        "price-vat": 61,
         "quantity": 1
       },
       {
@@ -26,6 +28,7 @@
             "altText": "Shower"
         },
         "price": 60,
+        "price-vat": 61,
         "quantity": 1
       },
       {
@@ -35,8 +38,72 @@
             "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,
-        "promotion": "15% off"
+        "was_price": "89.95",
+        "was_price-vat": "90.95"
       },
       {
         "title": "Wickes Plated Basin Waste Kit - Chrome",
@@ -45,6 +112,7 @@
             "altText": "Basin waste"
         },
         "price": 60,
+        "price-vat": 61,
         "quantity": 1
       },
       {
@@ -54,10 +122,13 @@
             "altText": "Shower waste"
         },
         "price": 60,
+        "price-vat": 61,
         "quantity": 1
       }
     ],
     "was_price": 480,
-    "price": 316
+    "was_price-vat": 481,
+    "price": 316,
+    "price-vat": 317
   }
 }

package/src/elements/checkbox.hbs

@@ -1,4 +1,11 @@
-<label for="{{id}}" class="chb {{#if required}}form-row__label_required{{/if}} {{#if inactive-message}}chb-inactive{{/if}}">
+<label 
+  for="{{id}}" 
+  class="chb 
+  {{#if required}}form-row__label_required{{/if}} 
+  {{#if inactive-message}}chb-inactive{{/if}}
+  {{#if action}}chb--action{{/if}}
+  "
+  >
   <input
     type="checkbox"
     value="{{value}}"

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/accordion.js

@@ -3,10 +3,18 @@ Wick.Accordion = (function () {
     var accordionRoot = '.accordion',
         accordionToggler = '.accordion__header',
         accordionIcon = '.accordion__action',
+        accordionBottomClose = '.opening-times-accordion__close',
         accordionContent = '.accordion__content',
         collapsed = 'accordion_collapsed',
         $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
 
+    function toggleAccordion($acc) {
+        if (!$acc.length) return;
+
+        $acc.toggleClass(collapsed);
+        $acc.children(accordionContent).stop(true, true).slideToggle(200);
+    }
+
     function getTriggerSelector($acc) {
         return $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler;
     }
@@ -20,8 +28,19 @@ Wick.Accordion = (function () {
 
         if (!$trigger.is(triggerSel)) return;
 
-        $acc.toggleClass(collapsed);
-        $acc.children(accordionContent).stop(true, true).slideToggle(200);
+        toggleAccordion($acc);
+    }
+
+    function onAccordionBottomCloseClick(e) {
+        e.preventDefault();
+
+        var $trigger = $(e.currentTarget);
+        var $acc = $trigger.closest(accordionRoot);
+        if (!$acc.length) return;
+
+        if (!$acc.hasClass(collapsed)) {
+            toggleAccordion($acc);
+        }
     }
 
     function init() {
@@ -29,6 +48,10 @@ Wick.Accordion = (function () {
             .off('click.wickAccordion', accordionToggler + ',' + accordionIcon)
             .on('click.wickAccordion', accordionToggler + ',' + accordionIcon, onAccordionClick);
 
+        $(document)
+            .off('click.wickAccordionClose', accordionBottomClose)
+            .on('click.wickAccordionClose', accordionBottomClose, onAccordionBottomCloseClick);
+
         $asideAccordion.off('click.wickAsideAccordion').on('click.wickAsideAccordion', function () {
             if (window.matchMedia('(min-width: 992px)').matches) {
                 if ($(this).text().toLowerCase() !== 'useful links') {

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

@@ -5,17 +5,30 @@ createPopupSlider({
     sliderSelector: '.custom-slider.just-added',
     onAppendEvent: 'productAddedToCart',
     onAppend: function (event, { showSlider, handleScroll, el }) {
+        Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+
+        if (event.detail.bulkAddToCartData) {
+            return;
+        }
+
         if (!$('.custom-slider.just-added').length) {
             $('body').append(cartSliderHTML);
         }
+
         const htmlContent = event.detail.html;
-        $(el.slider).append(htmlContent);
+
+        if (htmlContent) {
+            $(el.slider).append(htmlContent);
+        }
+
         showSlider();
-        Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-        $(el.sliderWrap).on(
-            'scroll',
-            _.debounce(() => handleScroll(el.sliderWrap), 100)
-        );
+
+        if ($(el.sliderWrap).length) {
+            $(el.sliderWrap).on(
+                'scroll',
+                _.debounce(() => handleScroll(el.sliderWrap), 100)
+            );
+        }
     },
     onClose: function () {
         Wick.MiniBasketSliderFE.cartEntries = [];

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,
+    };
+})();