wickes-css2 2.109.0-develop.5 → 2.109.0-develop.7

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

@@ -1,53 +1,254 @@
 // Simulate prompt for input
-function getInputs() {
-  const productBannerPositions = prompt("Enter Product Banner Positions:", "2") || "";
-  const sponsorProductPositions = prompt("Enter Sponsor Product Positions (comma-separated):", "6,7,8") || "";
-  const sponsorBannerPositions = prompt("Enter Sponsor Banner Positions:", "10") || "";
 
-  return {
-    productBannerPositions: productBannerPositions ? productBannerPositions.split(",").map(Number) : [],
-    sponsorProductPositions: sponsorProductPositions ? sponsorProductPositions.split(",").map(Number) : [],
-    sponsorBannerPositions: sponsorBannerPositions ? sponsorBannerPositions.split(",").map(Number) : [],
-  };
+function parseSlots(value) {
+    if (!value) {
+        return [];
+    }
+
+    return String(value)
+        .split(',')
+        .map((item) => parseInt(item.trim(), 10))
+        .filter((item) => Number.isInteger(item) && item >= 0);
+}
+
+function isBloomreachDisabled(slots) {
+    return !slots.length || slots.every((s) => s === 0);
+}
+
+function toggleHybrisProductBanners(inputs) {
+    const banners = document.querySelectorAll('.card-product-banner');
+    const disabled = isBloomreachDisabled(inputs.bloomreachSlots);
+
+    banners.forEach((banner) => {
+        if (disabled) {
+            banner.classList.remove('d-none');
+            banner.classList.remove('card-product-banner--inactive');
+        } else {
+            banner.classList.add('d-none');
+            banner.classList.add('card-product-banner--inactive');
+        }
+    });
 }
 
 function getPositionAttr() {
-  const isMobile = Wick.BannerPlacementManager.isMobileResolution();
-  return isMobile
-    ? 'data-mobile-position'
-    : 'data-desktop-position';
+    const isMobile = Wick.BannerPlacementManager.isMobileResolution();
+
+    return isMobile ? 'data-mobile-position' : 'data-desktop-position';
+}
+
+function setUnifiedPosition(el, slot) {
+    el.setAttribute('data-desktop-position', String(slot));
+    el.setAttribute('data-mobile-position', String(slot));
+}
+
+function hasLegacyBanners() {
+    return Boolean(
+        document.querySelector('.card-product-banner') ||
+        document.querySelector('.card-sponsor-product') ||
+        document.querySelector('.card-sponsor-banner')
+    );
+}
+
+function getInputs() {
+    const hasLegacy = hasLegacyBanners();
+
+    const bloomreachSlots = parseSlots(
+        prompt('Enter Bloomreach Banner Slots (comma-separated):', '3') || ''
+    );
+
+    if (!hasLegacy) {
+        return {
+            bloomreachSlots,
+            sponsorProductPositions: [],
+            sponsorBannerPositions: [],
+            productBannerPositions: [],
+        };
+    }
+
+    const productBannerPositions =
+        prompt('Enter Product Banner Positions (comma-separated):', '2') || '';
+
+    const sponsorProductPositions =
+        prompt('Enter Sponsor Product Positions (comma-separated):', '6,7,8') || '';
+
+    const sponsorBannerPositions =
+        prompt('Enter Sponsor Banner Positions (comma-separated):', '10') || '';
+
+    return {
+        productBannerPositions: parseSlots(productBannerPositions),
+        sponsorProductPositions: parseSlots(sponsorProductPositions),
+        sponsorBannerPositions: parseSlots(sponsorBannerPositions),
+        bloomreachSlots,
+    };
+}
+
+function updateBannerPositions(selector, positions) {
+    if (!positions?.length) {
+        return;
+    }
+
+    const positionAttr = getPositionAttr();
+    const elements = document.querySelectorAll(selector);
+
+    elements.forEach((el, index) => {
+        if (positions[index] !== undefined) {
+            el.setAttribute(positionAttr, String(positions[index]));
+        }
+    });
 }
 
 function updatePositions(inputs) {
-  const productBannerElements = document.querySelectorAll(".card-product-banner");
-  productBannerElements.forEach((el, index) => {
-    if (inputs.productBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.productBannerPositions[index]);
+    updateBannerPositions('.card-product-banner', inputs.productBannerPositions);
+    updateBannerPositions('.card-sponsor-product', inputs.sponsorProductPositions);
+    updateBannerPositions('.card-sponsor-banner', inputs.sponsorBannerPositions);
+}
+
+function patchBannerPlacementManagerForBloomreachEmulation(inputs) {
+    const manager = window.Wick?.BannerPlacementManager;
+
+    if (!manager || manager.__bloomreachEmulationPatched) {
+        return;
     }
-  });
 
-  const sponsorProductElements = document.querySelectorAll(".card-sponsor-product");
-  sponsorProductElements.forEach((el, index) => {
-    if (inputs.sponsorProductPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorProductPositions[index]);
+    const shouldDisableProductBanners = Boolean(inputs.bloomreachSlots?.length);
+
+    manager.el.bloomreachBanners = '.card-bloomreach-media-banner';
+
+    manager.el.allBanners = shouldDisableProductBanners
+        ? '.card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product'
+        : '.card-product-banner, .card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product';
+
+    manager.el.allListSlots = shouldDisableProductBanners
+        ? '.product-card, .card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product'
+        : '.product-card, .card-product-banner, .card-bloomreach-media-banner, .card-sponsor-banner, .card-sponsor-product';
+
+    manager.classes.bloomreachBanners = 'card-bloomreach-media-banner';
+
+    manager.getListSlots = function () {
+        return $(manager.el.productsWrap)
+            .children(manager.el.allListSlots)
+            .filter(function () {
+                if (
+                    $(this).hasClass(manager.classes.productBanners) ||
+                    $(this).hasClass(manager.classes.bloomreachBanners)
+                ) {
+                    const position = manager.getBannerPosition(this);
+                    const productsCount = manager.getListLength();
+
+                    return position <= productsCount;
+                }
+
+                return true;
+            });
+    };
+
+    manager.arrangeBannersInRightOrder = function () {
+        const $allBanners = $(manager.el.allBanners);
+
+        function getSameSlotInsertionOrder(el) {
+            if ($(el).hasClass(manager.classes.bloomreachBanners)) {
+                return 0;
+            }
+
+            if ($(el).hasClass(manager.classes.sponsorBanners)) {
+                return 1;
+            }
+
+            if ($(el).hasClass(manager.classes.sponsorProducts)) {
+                return 2;
+            }
+
+            if ($(el).hasClass(manager.classes.productBanners)) {
+                return 3;
+            }
+
+            return 4;
+        }
+
+        $allBanners
+            .sort((a, b) => {
+                const positionA = manager.getBannerPosition(a);
+                const positionB = manager.getBannerPosition(b);
+
+                if (positionA !== positionB) {
+                    return positionA - positionB;
+                }
+
+                return getSameSlotInsertionOrder(a) - getSameSlotInsertionOrder(b);
+            })
+            .appendTo(manager.el.productsWrap);
+    };
+
+    manager.__bloomreachEmulationPatched = true;
+}
+
+function rebuildBloomreachBannersForEmulation(inputs) {
+    const slots = inputs.bloomreachSlots || [];
+    const productsWrap = document.querySelector('.products-list.products-list-v2');
+
+    if (!productsWrap) {
+        return;
+    }
+
+    const existingBanners = document.querySelectorAll('.card-bloomreach-media-banner');
+
+    if (isBloomreachDisabled(slots)) {
+        existingBanners.forEach((banner) => banner.remove());
+        return;
     }
-  });
 
-  const sponsorBannerElements = document.querySelectorAll(".card-sponsor-banner");
-  sponsorBannerElements.forEach((el, index) => {
-    if (inputs.sponsorBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorBannerPositions[index]);
+    if (!existingBanners.length) {
+        return;
     }
-  });
+
+    const template = existingBanners[0].cloneNode(true);
+
+    existingBanners.forEach((banner) => banner.remove());
+
+    const fragment = document.createDocumentFragment();
+
+    slots.forEach((slot) => {
+        if (slot === 0) return;
+
+        const node = template.cloneNode(true);
+
+        node.removeAttribute('data-slots');
+        setUnifiedPosition(node, slot);
+
+        fragment.appendChild(node);
+    });
+
+    productsWrap.appendChild(fragment);
 }
 
-function init() {
-  const inputs = getInputs();
-  updatePositions(inputs);
+function applyBloomreachEmulation() {
+    const inputs = getInputs();
+
+    updatePositions(inputs);
+
+    const isDisabled = isBloomreachDisabled(inputs.bloomreachSlots);
+
+    toggleHybrisProductBanners(inputs);
+
+    if (!isDisabled) {
+        patchBannerPlacementManagerForBloomreachEmulation(inputs);
+    }
+
+    rebuildBloomreachBannersForEmulation(inputs);
+
+    if (
+        window.Wick &&
+        Wick.BannerPlacementManager &&
+        typeof Wick.BannerPlacementManager.checkProductsInColumn === 'function'
+    ) {
+        Wick.BannerPlacementManager.checkProductsInColumn();
+    }
 }
 
 $(document).ready(function () {
-  if ($('.retail-media .products-list.products-list-v2').length) {
-    setTimeout(() => init(), 100)
-  }
+    if ($('.products-list.products-list-v2').length) {
+        setTimeout(() => {
+            applyBloomreachEmulation();
+        }, 100);
+    }
 });

package/src/js/emulation/gift-cards.js

@@ -205,7 +205,7 @@
         mock.giftCards = [];
         recomputeTotalsAndOrder();
 
-        Wick.GiftCard.init({
+        Wick.GiftCard?.init({
             giftCardsLimit: GIFT_CARDS_LIMIT,
             errorCode: PAY_ERROR_CODE,
             giftCards: mock.giftCards.slice(),

package/src/js/emulation/store-locator-load-more.js

@@ -0,0 +1,69 @@
+import { appendLoader, showLoader, hideLoader } from '../page/utils/loader';
+
+function initStoreLocatorLoadMore() {
+    const PAGE_SIZE = 8;
+
+    const SELECTORS = {
+        cards: '.cards-store-list',
+        btnMore: '.store-locator__load-button_more',
+        loader: '.store-locator-loader',
+    };
+
+    const loaderPayload = {
+        wrapper: 'body',
+        hidden: true,
+        modifier: 'store-locator-loader',
+    };
+
+    const $cards = $(SELECTORS.cards);
+    const $btnMore = $(SELECTORS.btnMore);
+
+    let visibleCount = PAGE_SIZE;
+
+    function updateVisibility() {
+        $cards.each(function (index) {
+            $(this).toggle(index < visibleCount);
+        });
+
+        if (visibleCount >= $cards.length) {
+            $btnMore.hide();
+        } else {
+            $btnMore.show();
+        }
+
+        Wick.StoreCardsAlign?.align();
+    }
+
+    function loadMore() {
+        showLoader(SELECTORS.loader);
+        $btnMore.prop('disabled', true);
+
+        setTimeout(() => {
+            visibleCount += PAGE_SIZE;
+            updateVisibility();
+
+            hideLoader(SELECTORS.loader);
+            $btnMore.prop('disabled', false).blur();
+        }, 1000);
+    }
+
+    function init() {
+        if (!$cards.length || !$btnMore.length) {
+            return;
+        }
+
+        if (!$(SELECTORS.loader).length) {
+            appendLoader(loaderPayload);
+        }
+
+        updateVisibility();
+
+        $btnMore.on('click', loadMore);
+    }
+
+    init();
+}
+
+$(document).ready(function () {
+    initStoreLocatorLoadMore();
+});

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

@@ -0,0 +1,76 @@
+var Wick = window.Wick || (window.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: init,
+        align: alignCardInfoHeights,
+    };
+})();

package/src/page_plp_bloomreach.html

@@ -0,0 +1,81 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true}}
+{{#content "head" mode="append" pagePlp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+<style></style>
+    {{#content "body"}}
+        <main>
+            <div class="container">
+                <div class="page-header page-header_border-all">
+                    <h1 class="page-header__title">
+                        Fire Doors
+                    </h1>
+                    {{> srp-injected}}
+                </div>
+
+                {{> color-picker-plp }}
+
+                <div class="row">
+                    <aside class="left-aside">
+                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+                    </aside>
+
+                    <div class="content">
+                        <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="1,818 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>
+                        <div class="sort-products-list">
+                            {{> kitchen/sort-by }}
+                        </div>
+
+                        <div class="products-list products-list-v2">
+                            {{#each search-result_v2.products}}
+                                {{>card_product_v2}}
+                            {{/each}}
+                            {{#if search-result_v2.bloomreach-media-banner}}
+                                {{#each search-result_v2.bloomreach-media-banner}}
+                                    {{>card_bloomreach_media_banner}}
+                                {{/each}}
+                            {{/if}}
+                        </div>
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
+                        </div>
+                    </div>
+                    <!-- ./content -->
+                </div>
+            </div>
+            {{> legal-info}}
+
+            {{> similar-products-v2 }}
+
+            {{> seo-widgets title="More products" }}
+            {{> seo-widgets title="Related category" }}
+
+        </main>
+    {{/content}}
+    {{#content "foot" mode="append"}}
+    {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
+        <script defer src="./js/plp.bundle.min.js"></script>
+
+        <script defer src="./js/page/plp-cards-v2.js"></script>
+        <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
+    {{/content}}
+{{/extend}}

package/src/page_plp_v2.html

@@ -52,6 +52,11 @@
                                     {{>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}}

package/src/page_store-locator-list.html

@@ -1,11 +1,14 @@
 {{#extend "base" pageClass="store-locator" title="Store locator list" pageStoreLocator=true}}
 {{#content "head" mode="append" pageStoreLocator=true}}{{/content}}
+
 {{#content "body"}}
 <main class="container">
   <h1>Store Locator</h1>
+
   <button class="btn btn-primary btn_store-near-me">
     <span class="btn__text">Find a store near me</span>
   </button>
+
   <div class="row-holder">
     <div class="map-container">
       <div class="map store-locator-popup__map">
@@ -13,43 +16,30 @@
       </div>
     </div>
   </div>
-  {{> find-a-store data-action = "scroll-to-list"}}
+
+  {{> find-a-store data-action="scroll-to-list"}}
+
   <div class="cards-store-holder">
     <div class="cards-store-wrapper">
-      <div class="row">
-        
-        <div class="cards-store-list">
-          {{> card-store-locator view-map="true" distance="true" opening-times="true" schedule-title="true" locator-list="true"}}
-        </div>
-        
+      <div class="row" id="store-cards">
         {{#each locators}}
         <div class="cards-store-list">
-          {{> card-store-locator view-map="true" distance="true" opening-times="true" schedule-title="true"}}
+          {{> card-store-locator
+          opening-times=true
+          schedule-title=true
+          locator-list=true
+          }}
         </div>
         {{/each}}
-
-        <div class="cards-store-list__actions">
-          <button class="btn btn-primary btn_full store-locator__load-button store-locator__load-button_more">
-            <span class="icon icon__eye">
-              <i class="fas fa-eye"></i>
-            </span>
-            <span class="btn__text">
-                View more...
-            </span>
-          </button>
-          <button class="btn btn-secondary btn_full store-locator__load-button" style="display: none;">
-            <span class="icon icon__eye">
-              <i class="fas fa-eye"></i>
-            </span>
-            <span class="btn__text">View less</span>
-          </button>
-        </div>
+      </div>
+      <div class="cards-store-list__actions">
+        <button class="btn btn-primary btn_full store-locator__load-button store-locator__load-button_more">
+          <span class="btn__text">Load more</span>
+        </button>
       </div>
     </div>
   </div>
-  <div class="pagination-holder">
-    {{> pagination pagination1="true"}}
-  </div>
 </main>
 {{/content}}
 {{/extend}}
+<script defer src="./js/store-locator-cards.min.js"></script>