wickes-css2 2.113.0-develop.7 → 2.113.0-develop.8

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