wickes-css2 2.106.0-IC-1222-back-functionality-poc.1 → 2.106.0-IC-1222-back-functionality-poc.2

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

@@ -9,10 +9,11 @@ Wick.PLPLoadMore = {
     STEP: 30,
     DEFAULT_START: 30,
     MAX_VISIBLE: 120,
-    MAX_VISIBLE_PAGES: 4,
     RESTORE_KEY: 'plpRestoreState',
+    RESTORE_DONE_PARAM: 'plpRestoreDone',
+    RESTORE_MODE_PARAM: 'plpRestoreMode',
+    RESTORE_PRODUCT_PARAM: 'restoreProductCode',
     RESTORE_TTL: 30 * 60 * 1000,
-    isRestoring: false,
 
     el: {
         $loadMoreBtn: $('.btn-load-more'),
@@ -32,8 +33,7 @@ Wick.PLPLoadMore = {
         modifier: 'basket-loader',
     },
 
-    currentStartPage: 0,
-    currentEndPage: 0,
+    currentPage: 0,
 
     getPerPage() {
         const params = new URLSearchParams(window.location.search);
@@ -44,41 +44,84 @@ Wick.PLPLoadMore = {
     setPerPage(value) {
         const url = new URL(window.location.href);
 
-        url.searchParams.set('perPage', value);
+        if (value) {
+            url.searchParams.set('perPage', value);
+        } else {
+            url.searchParams.delete('perPage');
+        }
+
         history.replaceState(history.state, '', url.toString());
     },
 
-    getSortValue() {
-        return Wick.PLPLoadMore.el.$sortOptions.val() || '';
+    getPageParam() {
+        const params = new URLSearchParams(window.location.search);
+
+        return Number(params.get('page')) || 0;
     },
 
-    getCurrentUrlForRestore() {
+    setPageParam(value) {
         const url = new URL(window.location.href);
 
-        url.searchParams.delete('perPage');
+        if (value || value === 0) {
+            url.searchParams.set('page', value);
+        } else {
+            url.searchParams.delete('page');
+        }
 
-        return `${url.pathname}${url.search}`;
+        history.replaceState(history.state, '', url.toString());
+    },
+
+    getSortValue() {
+        return Wick.PLPLoadMore.el.$sortOptions.val() || '';
     },
 
     getCardsCountInDOM() {
         return $(Wick.PLPLoadMore.el.productCard).length;
     },
 
-    getLoadedPagesCount() {
-        const perPage = Wick.PLPLoadMore.getPerPage();
+    getCurrentUrlBase() {
+        const url = new URL(window.location.href);
 
-        return Math.ceil(perPage / Wick.PLPLoadMore.STEP);
+        url.searchParams.delete('perPage');
+        url.searchParams.delete('page');
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_DONE_PARAM);
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_MODE_PARAM);
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_PRODUCT_PARAM);
+
+        return `${url.pathname}${url.search}`;
     },
 
     getLastAvailablePage() {
         return Math.max(0, Wick.PLPLoadMore.numberOfPagesPLP - 1);
     },
 
-    isRestoreStateExpired(restoreState) {
-        return (
-            !restoreState.timestamp ||
-            Date.now() - restoreState.timestamp > Wick.PLPLoadMore.RESTORE_TTL
-        );
+    isRestoreStateExpired(state) {
+        return !state.timestamp || Date.now() - state.timestamp > Wick.PLPLoadMore.RESTORE_TTL;
+    },
+
+    buildRestoreUrl(state) {
+        const url = new URL(window.location.href);
+
+        url.searchParams.delete('perPage');
+        url.searchParams.delete('page');
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_DONE_PARAM);
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_MODE_PARAM);
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_PRODUCT_PARAM);
+
+        if (state.loadedCount <= Wick.PLPLoadMore.MAX_VISIBLE) {
+            url.searchParams.set('perPage', state.loadedCount);
+            url.searchParams.set(Wick.PLPLoadMore.RESTORE_MODE_PARAM, 'perPage');
+        } else {
+            const clickedPage = Math.floor((state.clickedIndex - 1) / Wick.PLPLoadMore.STEP);
+
+            url.searchParams.set('page', clickedPage);
+            url.searchParams.set(Wick.PLPLoadMore.RESTORE_MODE_PARAM, 'page');
+        }
+
+        url.searchParams.set(Wick.PLPLoadMore.RESTORE_PRODUCT_PARAM, state.productCode);
+        url.searchParams.set(Wick.PLPLoadMore.RESTORE_DONE_PARAM, '1');
+
+        return url.toString();
     },
 
     saveRestoreState(e) {
@@ -98,8 +141,8 @@ Wick.PLPLoadMore = {
         const clickedIndex = $cards.index($card) + 1;
         const loadedCount = Wick.PLPLoadMore.getPerPage();
 
-        const restoreState = {
-            url: Wick.PLPLoadMore.getCurrentUrlForRestore(),
+        const state = {
+            baseUrl: Wick.PLPLoadMore.getCurrentUrlBase(),
             productCode,
             clickedIndex,
             loadedCount,
@@ -107,35 +150,37 @@ Wick.PLPLoadMore = {
             timestamp: Date.now(),
         };
 
-        sessionStorage.setItem(Wick.PLPLoadMore.RESTORE_KEY, JSON.stringify(restoreState));
+        state.restoreUrl = Wick.PLPLoadMore.buildRestoreUrl(state);
+
+        sessionStorage.setItem(Wick.PLPLoadMore.RESTORE_KEY, JSON.stringify(state));
     },
 
     getRestoreState() {
         try {
-            const rawState = sessionStorage.getItem(Wick.PLPLoadMore.RESTORE_KEY);
+            const raw = sessionStorage.getItem(Wick.PLPLoadMore.RESTORE_KEY);
 
-            if (!rawState) {
+            if (!raw) {
                 return null;
             }
 
-            const parsedState = JSON.parse(rawState);
+            const state = JSON.parse(raw);
 
-            if (!parsedState) {
+            if (!state) {
                 return null;
             }
 
-            if (parsedState.url !== Wick.PLPLoadMore.getCurrentUrlForRestore()) {
+            if (Wick.PLPLoadMore.isRestoreStateExpired(state)) {
+                Wick.PLPLoadMore.clearRestoreState();
+
                 return null;
             }
 
-            if (Wick.PLPLoadMore.isRestoreStateExpired(parsedState)) {
-                Wick.PLPLoadMore.clearRestoreState();
-
+            if (state.baseUrl !== Wick.PLPLoadMore.getCurrentUrlBase()) {
                 return null;
             }
 
-            return parsedState;
-        } catch (error) {
+            return state;
+        } catch (e) {
             return null;
         }
     },
@@ -144,71 +189,39 @@ Wick.PLPLoadMore = {
         sessionStorage.removeItem(Wick.PLPLoadMore.RESTORE_KEY);
     },
 
-    shouldRestore() {
-        return !!Wick.PLPLoadMore.getRestoreState();
-    },
+    shouldRedirectToRestoreUrl() {
+        const state = Wick.PLPLoadMore.getRestoreState();
 
-    getWindowConfig(restoreState) {
-        const step = Wick.PLPLoadMore.STEP;
-        const maxVisible = Wick.PLPLoadMore.MAX_VISIBLE;
-        const maxVisiblePages = Wick.PLPLoadMore.MAX_VISIBLE_PAGES;
-        const loadedCount = restoreState.loadedCount;
-        const clickedIndex = restoreState.clickedIndex;
-        const loadedPagesCount = Math.ceil(loadedCount / step);
-        const loadedLastPage = loadedPagesCount - 1;
-        const clickedPage = Math.floor((clickedIndex - 1) / step);
-
-        if (loadedCount <= maxVisible) {
-            return {
-                startPage: 0,
-                endPage: loadedLastPage,
-                showLoadPrevious: false,
-                showLoadMore: loadedLastPage < Wick.PLPLoadMore.getLastAvailablePage(),
-            };
+        if (!state || !state.restoreUrl) {
+            return false;
         }
 
-        let startPage = 0;
+        const currentUrl = new URL(window.location.href);
+        const restoreUrl = new URL(state.restoreUrl);
 
-        if (clickedPage >= maxVisiblePages) {
-            startPage = clickedPage - (maxVisiblePages - 1);
-        }
+        return currentUrl.toString() !== restoreUrl.toString();
+    },
 
-        let endPage = startPage + maxVisiblePages - 1;
+    redirectToRestoreUrl() {
+        const state = Wick.PLPLoadMore.getRestoreState();
 
-        if (endPage > loadedLastPage) {
-            endPage = loadedLastPage;
-            startPage = Math.max(0, endPage - maxVisiblePages + 1);
+        if (!state || !state.restoreUrl) {
+            return;
         }
 
-        return {
-            startPage,
-            endPage,
-            showLoadPrevious: startPage > 0,
-            showLoadMore: endPage < Wick.PLPLoadMore.getLastAvailablePage(),
-        };
+        window.location.replace(state.restoreUrl);
     },
 
-    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);
+    showNewCards(newProductsHtml) {
+        const $newProductsHtml = $(newProductsHtml);
 
-            window.dispatchEvent(event);
-        });
+        $(Wick.PLPLoadMore.el.productsList).append($newProductsHtml);
     },
 
-    buildPagesArray(startPage, endPage) {
-        const pages = [];
-
-        for (let page = startPage; page <= endPage; page++) {
-            pages.push(page);
-        }
+    prependCards(newProductsHtml) {
+        const $newProductsHtml = $(newProductsHtml);
 
-        return pages;
+        $(Wick.PLPLoadMore.el.productsList).prepend($newProductsHtml);
     },
 
     afterProductsRendered() {
@@ -219,26 +232,31 @@ Wick.PLPLoadMore = {
         Wick.PLP?.bindEvents?.();
     },
 
-    showNewCards(newProductsHtml) {
-        const $newProductsHtml = $(newProductsHtml);
-
-        $(Wick.PLPLoadMore.el.productsList).append($newProductsHtml);
-    },
-
-    prependCards(newProductsHtml) {
-        const $newProductsHtml = $(newProductsHtml);
-
-        $(Wick.PLPLoadMore.el.productsList).prepend($newProductsHtml);
-    },
+    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);
 
-    replaceProductsHtml(html) {
-        $(Wick.PLPLoadMore.el.productsList).html(html);
+            window.dispatchEvent(event);
+        });
     },
 
     renderLoadPrevious() {
         $(Wick.PLPLoadMore.el.loadPreviousWrap).remove();
 
-        if (Wick.PLPLoadMore.currentStartPage <= 0) {
+        const params = new URLSearchParams(window.location.search);
+        const restoreMode = params.get(Wick.PLPLoadMore.RESTORE_MODE_PARAM);
+        const currentPage = Wick.PLPLoadMore.getPageParam();
+
+        if (restoreMode !== 'page') {
+            return;
+        }
+
+        if (currentPage <= 0) {
             return;
         }
 
@@ -253,23 +271,40 @@ Wick.PLPLoadMore = {
         $(Wick.PLPLoadMore.el.productsList).before(buttonHtml);
     },
 
-    toggleLoadMoreBtn() {
-        const isLastPageVisible =
-            Wick.PLPLoadMore.currentEndPage >= Wick.PLPLoadMore.getLastAvailablePage();
+    updateLoadPreviousVisibility() {
+        const currentPage = Wick.PLPLoadMore.currentPage;
+
+        if (currentPage <= 0) {
+            $(Wick.PLPLoadMore.el.loadPreviousWrap).remove();
 
+            return;
+        }
+
+        if (!$(Wick.PLPLoadMore.el.loadPreviousWrap).length) {
+            Wick.PLPLoadMore.renderLoadPrevious();
+        }
+    },
+
+    toggleLoadMoreBtn() {
         Wick.PLPLoadMore.el.$loadMoreBtn = $('.btn-load-more');
 
         if (!Wick.PLPLoadMore.el.$loadMoreBtn.length) {
             return;
         }
 
+        const isLastPageVisible =
+            Wick.PLPLoadMore.currentPage >= Wick.PLPLoadMore.getLastAvailablePage();
+
         Wick.PLPLoadMore.el.$loadMoreBtn.toggleClass(
             Wick.PLPLoadMore.HIDDEN_CLASS_NAME,
             isLastPageVisible
         );
     },
 
-    scrollToProduct(productCode) {
+    scrollToRestoreProduct() {
+        const params = new URLSearchParams(window.location.search);
+        const productCode = params.get(Wick.PLPLoadMore.RESTORE_PRODUCT_PARAM);
+
         if (!productCode) {
             return;
         }
@@ -288,53 +323,16 @@ Wick.PLPLoadMore = {
         });
     },
 
-    updatePerPageFromDOM() {
-        Wick.PLPLoadMore.setPerPage(Wick.PLPLoadMore.getCardsCountInDOM());
-    },
-
-    restorePLP() {
-        const restoreState = Wick.PLPLoadMore.getRestoreState();
-
-        if (!restoreState || Wick.PLPLoadMore.isRestoring) {
-            return Promise.resolve();
-        }
-
-        Wick.PLPLoadMore.isRestoring = true;
-
-        const config = Wick.PLPLoadMore.getWindowConfig(restoreState);
-        const pagesToLoad = Wick.PLPLoadMore.buildPagesArray(config.startPage, config.endPage);
-
-        showLoader(Wick.PLPLoadMore.el.loader);
-
-        return Promise.all(pagesToLoad.map((page) => Wick.PLPLoadMore.loadPage(page)))
-            .then((responses) => {
-                const html = responses.join('');
-
-                Wick.PLPLoadMore.replaceProductsHtml(html);
-                Wick.PLPLoadMore.currentStartPage = config.startPage;
-                Wick.PLPLoadMore.currentEndPage = config.endPage;
+    cleanupRestoreQueryParams() {
+        const url = new URL(window.location.href);
 
-                Wick.PLPLoadMore.updatePerPageFromDOM();
-                Wick.PLPLoadMore.renderLoadPrevious();
-                Wick.PLPLoadMore.toggleLoadMoreBtn();
-                Wick.PLPLoadMore.afterProductsRendered();
-                Wick.PLPLoadMore.scrollToProduct(restoreState.productCode);
-            })
-            .catch((error) => {
-                console.error('[PLP restore failed]', error);
-            })
-            .finally(() => {
-                hideLoader(Wick.PLPLoadMore.el.loader);
-                Wick.PLPLoadMore.isRestoring = false;
-            });
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_DONE_PARAM);
+        url.searchParams.delete(Wick.PLPLoadMore.RESTORE_PRODUCT_PARAM);
+        history.replaceState(history.state, '', url.toString());
     },
 
     loadMore() {
-        if (Wick.PLPLoadMore.isRestoring) {
-            return;
-        }
-
-        const nextPage = Wick.PLPLoadMore.currentEndPage + 1;
+        const nextPage = Wick.PLPLoadMore.currentPage + 1;
 
         if (nextPage > Wick.PLPLoadMore.getLastAvailablePage()) {
             return;
@@ -349,10 +347,13 @@ Wick.PLPLoadMore = {
                 }
 
                 Wick.PLPLoadMore.showNewCards(response);
-                Wick.PLPLoadMore.currentEndPage = nextPage;
+                Wick.PLPLoadMore.currentPage = nextPage;
+
+                const cardsCount = Wick.PLPLoadMore.getCardsCountInDOM();
+                Wick.PLPLoadMore.setPerPage(cardsCount);
+                Wick.PLPLoadMore.setPageParam(Wick.PLPLoadMore.currentPage);
 
-                Wick.PLPLoadMore.updatePerPageFromDOM();
-                Wick.PLPLoadMore.renderLoadPrevious();
+                Wick.PLPLoadMore.updateLoadPreviousVisibility();
                 Wick.PLPLoadMore.toggleLoadMoreBtn();
                 Wick.PLPLoadMore.afterProductsRendered();
             })
@@ -367,11 +368,7 @@ Wick.PLPLoadMore = {
     },
 
     loadPrevious() {
-        if (Wick.PLPLoadMore.isRestoring) {
-            return;
-        }
-
-        const previousPage = Wick.PLPLoadMore.currentStartPage - 1;
+        const previousPage = Wick.PLPLoadMore.currentPage - 1;
 
         if (previousPage < 0) {
             return;
@@ -396,18 +393,19 @@ Wick.PLPLoadMore = {
                     Wick.PLPLoadMore.STEP;
 
                 Wick.PLPLoadMore.prependCards(response);
-                Wick.PLPLoadMore.currentStartPage = previousPage;
+                Wick.PLPLoadMore.currentPage = previousPage;
+
+                const cardsCount = Wick.PLPLoadMore.getCardsCountInDOM();
+                Wick.PLPLoadMore.setPerPage(cardsCount);
+                Wick.PLPLoadMore.setPageParam(Wick.PLPLoadMore.currentPage);
 
-                Wick.PLPLoadMore.updatePerPageFromDOM();
-                Wick.PLPLoadMore.renderLoadPrevious();
+                Wick.PLPLoadMore.updateLoadPreviousVisibility();
                 Wick.PLPLoadMore.toggleLoadMoreBtn();
                 Wick.PLPLoadMore.afterProductsRendered();
 
-                const $newCards = $(Wick.PLPLoadMore.el.productCard);
-                const $sameOldFirstCard = $newCards.eq(insertedCount);
-                const newFirstTop = $sameOldFirstCard.length
-                    ? $sameOldFirstCard.offset().top
-                    : oldFirstTop;
+                const $allCards = $(Wick.PLPLoadMore.el.productCard);
+                const $sameCard = $allCards.eq(insertedCount);
+                const newFirstTop = $sameCard.length ? $sameCard.offset().top : oldFirstTop;
                 const delta = newFirstTop - oldFirstTop;
 
                 window.scrollTo({
@@ -423,28 +421,6 @@ Wick.PLPLoadMore = {
             });
     },
 
-    onPageShow(event) {
-        if (!event.persisted) {
-            return;
-        }
-
-        const restoreState = Wick.PLPLoadMore.getRestoreState();
-
-        if (!restoreState) {
-            return;
-        }
-
-        const $target = $(
-            `${Wick.PLPLoadMore.el.productCard}[data-product-code="${restoreState.productCode}"]`
-        );
-
-        if ($target.length) {
-            return;
-        }
-
-        Wick.PLPLoadMore.restorePLP();
-    },
-
     bindEvents() {
         $(document)
             .off('click.plpLoadMore', '.btn-load-more')
@@ -470,32 +446,38 @@ Wick.PLPLoadMore = {
         window.addEventListener('pageshow', Wick.PLPLoadMore.onPageShow);
     },
 
-    initPageState() {
-        const cardsCount = Wick.PLPLoadMore.getCardsCountInDOM();
-        const visiblePagesCount = Math.ceil(cardsCount / Wick.PLPLoadMore.STEP) || 1;
+    onPageShow() {
+        if (Wick.PLPLoadMore.shouldRedirectToRestoreUrl()) {
+            Wick.PLPLoadMore.redirectToRestoreUrl();
+        }
+    },
 
-        Wick.PLPLoadMore.currentStartPage = 0;
-        Wick.PLPLoadMore.currentEndPage = visiblePagesCount - 1;
+    initCurrentPage() {
+        Wick.PLPLoadMore.currentPage = Wick.PLPLoadMore.getPageParam();
     },
 
-    initRestore() {
-        if (!Wick.PLPLoadMore.shouldRestore()) {
-            Wick.PLPLoadMore.renderLoadPrevious();
-            Wick.PLPLoadMore.toggleLoadMoreBtn();
+    handleRestoreScroll() {
+        const params = new URLSearchParams(window.location.search);
 
+        if (!params.get(Wick.PLPLoadMore.RESTORE_DONE_PARAM)) {
             return;
         }
 
-        Wick.PLPLoadMore.restorePLP();
+        requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+                Wick.PLPLoadMore.scrollToRestoreProduct();
+                Wick.PLPLoadMore.cleanupRestoreQueryParams();
+            });
+        });
     },
 
     init() {
         appendLoader(Wick.PLPLoadMore.loaderPayload);
-        Wick.PLPLoadMore.initPageState();
+        Wick.PLPLoadMore.initCurrentPage();
         Wick.PLPLoadMore.bindEvents();
         Wick.PLPLoadMore.renderLoadPrevious();
         Wick.PLPLoadMore.toggleLoadMoreBtn();
-        Wick.PLPLoadMore.initRestore();
+        Wick.PLPLoadMore.handleRestoreScroll();
     },
 };