wickes-css2 2.106.0-IC-1222-back-functionality-poc.4 → 2.106.0-IC-1222-back-functionality-poc.5

package/build/js/page/plp-load-more.js

@@ -18,11 +18,13 @@ Wick.PLPLoadMore = {
         $sortOptions: $('#sort_form1'),
         productsList: '.products-list',
         productCard: '.card.product-card',
+        productCardLink: '.card.product-card a',
         loadPreviousWrap: '.load-previous-wrap',
         loadPreviousBtn: '.btn-load-previous',
     },
 
     numberOfPagesPLP: Number($('#numberOfPagesPLP').val()) || 0,
+    currentPage: 0,
 
     loaderPayload: {
         wrapper: 'body',
@@ -30,8 +32,6 @@ Wick.PLPLoadMore = {
         modifier: 'basket-loader',
     },
 
-    currentPage: 0,
-
     getPerPage() {
         const params = new URLSearchParams(window.location.search);
 
@@ -64,6 +64,10 @@ Wick.PLPLoadMore = {
         return $(Wick.PLPLoadMore.el.productCard).length;
     },
 
+    getLastAvailablePage() {
+        return Math.max(0, Wick.PLPLoadMore.numberOfPagesPLP - 1);
+    },
+
     getCurrentUrlBase() {
         const url = new URL(window.location.href);
 
@@ -73,28 +77,10 @@ Wick.PLPLoadMore = {
         return `${url.pathname}${url.search}`;
     },
 
-    getLastAvailablePage() {
-        return Math.max(0, Wick.PLPLoadMore.numberOfPagesPLP - 1);
-    },
-
     isRestoreStateExpired(state) {
         return !state.timestamp || Date.now() - state.timestamp > Wick.PLPLoadMore.RESTORE_TTL;
     },
 
-    isBackForwardNavigation() {
-        try {
-            const entries = performance.getEntriesByType('navigation');
-
-            if (entries && entries.length) {
-                return entries[0].type === 'back_forward';
-            }
-        } catch (error) {
-            // do nothing
-        }
-
-        return false;
-    },
-
     getRestoreState() {
         try {
             const raw = sessionStorage.getItem(Wick.PLPLoadMore.RESTORE_KEY);
@@ -133,16 +119,16 @@ Wick.PLPLoadMore = {
         sessionStorage.removeItem(Wick.PLPLoadMore.RESTORE_KEY);
     },
 
-    buildRestoreUrl(state) {
+    buildRestoreUrl(clickedIndex, loadedCount) {
         const url = new URL(window.location.href);
 
         url.searchParams.delete('perPage');
         url.searchParams.delete('page');
 
-        if (state.loadedCount <= Wick.PLPLoadMore.MAX_VISIBLE) {
+        if (loadedCount <= Wick.PLPLoadMore.MAX_VISIBLE) {
             url.searchParams.set('perPage', Wick.PLPLoadMore.MAX_VISIBLE);
         } else {
-            const clickedPage = Math.floor((state.clickedIndex - 1) / Wick.PLPLoadMore.STEP);
+            const clickedPage = Math.floor((clickedIndex - 1) / Wick.PLPLoadMore.STEP);
 
             url.searchParams.set('page', clickedPage);
         }
@@ -151,7 +137,8 @@ Wick.PLPLoadMore = {
     },
 
     saveRestoreState(e) {
-        const $card = $(e.target).closest(Wick.PLPLoadMore.el.productCard);
+        const $link = $(e.target).closest(Wick.PLPLoadMore.el.productCardLink);
+        const $card = $link.closest(Wick.PLPLoadMore.el.productCard);
 
         if (!$card.length) {
             return;
@@ -163,92 +150,46 @@ Wick.PLPLoadMore = {
             return;
         }
 
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+            return;
+        }
+
+        if (typeof e.button !== 'undefined' && e.button !== 0) {
+            return;
+        }
+
         const $cards = $(Wick.PLPLoadMore.el.productCard);
         const clickedIndex = $cards.index($card) + 1;
         const loadedCount = Wick.PLPLoadMore.getPerPage();
+        const restoreMode = loadedCount <= Wick.PLPLoadMore.MAX_VISIBLE ? 'perPage' : 'page';
+        const restoreUrl = Wick.PLPLoadMore.buildRestoreUrl(clickedIndex, loadedCount);
 
         const state = {
             baseUrl: Wick.PLPLoadMore.getCurrentUrlBase(),
             productCode,
             clickedIndex,
             loadedCount,
-            sort: Wick.PLPLoadMore.getSortValue(),
+            restoreMode,
+            restoreUrl,
             timestamp: Date.now(),
-            redirected: false,
-            restoreApplied: false,
-            restoreMode: loadedCount <= Wick.PLPLoadMore.MAX_VISIBLE ? 'perPage' : 'page',
+            scrollApplied: false,
         };
 
-        state.restoreUrl = Wick.PLPLoadMore.buildRestoreUrl(state);
-
-        Wick.PLPLoadMore.setRestoreState(state);
-    },
-
-    shouldRedirectToRestoreUrl() {
-        const state = Wick.PLPLoadMore.getRestoreState();
-
-        if (!state || !state.restoreUrl) {
-            return false;
-        }
-
-        if (!Wick.PLPLoadMore.isBackForwardNavigation()) {
-            return false;
-        }
-
-        if (state.redirected) {
-            return false;
-        }
-
-        const currentUrl = window.location.href;
-        const restoreUrl = state.restoreUrl;
-
-        return currentUrl !== restoreUrl;
-    },
-
-    redirectToRestoreUrl() {
-        const state = Wick.PLPLoadMore.getRestoreState();
-
-        if (!state || !state.restoreUrl) {
-            return;
-        }
-
-        state.redirected = true;
         Wick.PLPLoadMore.setRestoreState(state);
 
-        window.location.replace(state.restoreUrl);
+        history.replaceState(history.state, '', restoreUrl);
     },
 
-    handleRestoreAfterRedirect() {
-        const state = Wick.PLPLoadMore.getRestoreState();
-
-        if (!state || !state.redirected || state.restoreApplied) {
-            return;
-        }
-
-        const currentUrl = window.location.href;
-
-        if (currentUrl !== state.restoreUrl) {
-            return;
-        }
-
-        requestAnimationFrame(function () {
-            requestAnimationFrame(function () {
-                const $target = $(
-                    `${Wick.PLPLoadMore.el.productCard}[data-product-code="${state.productCode}"]`
-                );
-
-                if ($target.length) {
-                    const offsetTop = $target.offset().top - 120;
-
-                    window.scrollTo({
-                        top: offsetTop,
-                        behavior: 'auto',
-                    });
-                }
+    loadPage(pageNumber) {
+        return new Promise((resolve, reject) => {
+            const eventDetail = { resolve, reject };
+            const payload = {
+                currentPage: pageNumber,
+                sort: Wick.PLPLoadMore.getSortValue(),
+            };
+            const event = createEvent(Wick.PLPLoadMore.PLP_LOAD_MORE_EVENT, payload, eventDetail);
 
-                state.restoreApplied = true;
-                Wick.PLPLoadMore.setRestoreState(state);
-            });
+            window.dispatchEvent(event);
         });
     },
 
@@ -272,19 +213,6 @@ Wick.PLPLoadMore = {
         Wick.PLP?.bindEvents?.();
     },
 
-    loadPage(pageNumber) {
-        return new Promise((resolve, reject) => {
-            const eventDetail = { resolve, reject };
-            const payload = {
-                currentPage: pageNumber,
-                sort: Wick.PLPLoadMore.getSortValue(),
-            };
-            const event = createEvent(Wick.PLPLoadMore.PLP_LOAD_MORE_EVENT, payload, eventDetail);
-
-            window.dispatchEvent(event);
-        });
-    },
-
     isRestorePageMode() {
         const state = Wick.PLPLoadMore.getRestoreState();
 
@@ -292,10 +220,6 @@ Wick.PLPLoadMore = {
             return false;
         }
 
-        if (!state.redirected) {
-            return false;
-        }
-
         if (state.restoreMode !== 'page') {
             return false;
         }
@@ -357,6 +281,38 @@ Wick.PLPLoadMore = {
         );
     },
 
+    handleRestoreScroll() {
+        const state = Wick.PLPLoadMore.getRestoreState();
+
+        if (!state || state.scrollApplied) {
+            return;
+        }
+
+        if (window.location.href !== state.restoreUrl) {
+            return;
+        }
+
+        const $target = $(
+            `${Wick.PLPLoadMore.el.productCard}[data-product-code="${state.productCode}"]`
+        );
+
+        if (!$target.length) {
+            return;
+        }
+
+        requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+                window.scrollTo({
+                    top: $target.offset().top - 120,
+                    behavior: 'auto',
+                });
+
+                state.scrollApplied = true;
+                Wick.PLPLoadMore.setRestoreState(state);
+            });
+        });
+    },
+
     loadMore() {
         const nextPage = Wick.PLPLoadMore.currentPage + 1;
 
@@ -378,6 +334,7 @@ Wick.PLPLoadMore = {
                 const cardsCount = Wick.PLPLoadMore.getCardsCountInDOM();
 
                 Wick.PLPLoadMore.setPerPage(cardsCount);
+
                 Wick.PLPLoadMore.updateLoadPreviousVisibility();
                 Wick.PLPLoadMore.toggleLoadMoreBtn();
                 Wick.PLPLoadMore.afterProductsRendered();
@@ -423,6 +380,7 @@ Wick.PLPLoadMore = {
                 const cardsCount = Wick.PLPLoadMore.getCardsCountInDOM();
 
                 Wick.PLPLoadMore.setPerPage(cardsCount);
+
                 Wick.PLPLoadMore.updateLoadPreviousVisibility();
                 Wick.PLPLoadMore.toggleLoadMoreBtn();
                 Wick.PLPLoadMore.afterProductsRendered();
@@ -445,12 +403,6 @@ Wick.PLPLoadMore = {
             });
     },
 
-    onPageShow() {
-        if (Wick.PLPLoadMore.shouldRedirectToRestoreUrl()) {
-            Wick.PLPLoadMore.redirectToRestoreUrl();
-        }
-    },
-
     initCurrentPage() {
         const params = new URLSearchParams(window.location.search);
 
@@ -480,13 +432,10 @@ Wick.PLPLoadMore = {
             });
 
         $(document)
-            .off('click.plpRestoreState', Wick.PLPLoadMore.el.productCard)
-            .on('click.plpRestoreState', Wick.PLPLoadMore.el.productCard, function (e) {
+            .off('click.plpRestoreState', Wick.PLPLoadMore.el.productCardLink)
+            .on('click.plpRestoreState', Wick.PLPLoadMore.el.productCardLink, function (e) {
                 Wick.PLPLoadMore.saveRestoreState(e);
             });
-
-        window.removeEventListener('pageshow', Wick.PLPLoadMore.onPageShow);
-        window.addEventListener('pageshow', Wick.PLPLoadMore.onPageShow);
     },
 
     init() {
@@ -495,7 +444,7 @@ Wick.PLPLoadMore = {
         Wick.PLPLoadMore.bindEvents();
         Wick.PLPLoadMore.renderLoadPrevious();
         Wick.PLPLoadMore.toggleLoadMoreBtn();
-        Wick.PLPLoadMore.handleRestoreAfterRedirect();
+        Wick.PLPLoadMore.handleRestoreScroll();
     },
 };