diff --git a/assets/findify-lazy-loading-pagination.js b/assets/findify-lazy-loading-pagination.js index 4e289ff..4a7bd9a 100644 --- a/assets/findify-lazy-loading-pagination.js +++ b/assets/findify-lazy-loading-pagination.js @@ -127,29 +127,36 @@ const initFindifyLazyLoadingPagination = ( const productData = sessionStorage.getItem('product'); if (!productData) return; - const id = productData.split(':')[1]; + const parsedProductData = JSON.parse(productData); + const currentUrl = window.location.href; + const { url, id } = parsedProductData; - const product = document.body.querySelector( - `#findify-product-grid>div[product-id=product-${id}]` - ); - const { top, height } = product.getBoundingClientRect(); + if (currentUrl == url) { + const product = document.body.querySelector( + `#findify-product-grid>div[product-id=product-${id}]` + ); + const { top, height } = product.getBoundingClientRect(); - const loader = document.getElementById(selectors.loader); - const paginationContainer = document.querySelector( - `#findify-pagination > .${selectors.paginationContainer}` - ); + const loader = document.getElementById(selectors.loader); + const paginationContainer = document.querySelector( + `#findify-pagination > .${selectors.paginationContainer}` + ); - removeLoader(); + removeLoader(); - window.scrollTo({ - top: top + window.scrollY - height, - behavior: 'smooth', - }); - paginationContainer.parentElement.insertBefore(loader, paginationContainer); - setTimeout(() => { - sessionStorage.removeItem('product'); - initNextEvents(); - }, 500); + window.scrollTo({ + top: top + window.scrollY - height, + behavior: "smooth", + }); + paginationContainer.parentElement.insertBefore( + loader, + paginationContainer + ); + setTimeout(() => { + sessionStorage.removeItem("product"); + initNextEvents(); + }, 500); + } }; const init = () => { @@ -159,3 +166,29 @@ const initFindifyLazyLoadingPagination = ( }; init(); }; + +const initScrollToProductForPagination = () => { + const productData = sessionStorage.getItem("product"); + if (!productData) return; + + const parsedProductData = JSON.parse(productData); + const currentUrl = window.location.href; + const { url, id } = parsedProductData; + + if (currentUrl == url) { + + const product = document.body.querySelector( + `#findify-product-grid>div[product-id=product-${id}]` + ); + const { top, height } = product.getBoundingClientRect(); + + window.scrollTo({ + top: top + window.scrollY - height, + behavior: "smooth", + }); + + setTimeout(() => { + sessionStorage.removeItem("product"); + }, 500); + } +} diff --git a/assets/findify-product-card.css b/assets/findify-product-card.css index 0b634c6..8219e9c 100644 --- a/assets/findify-product-card.css +++ b/assets/findify-product-card.css @@ -1,5 +1,5 @@ -a:not(.button), -a:visited:not(.button) { +.findify-product-link:not(.button), +.findify-product-link:visited:not(.button) { text-decoration: none; color: unset; } @@ -44,20 +44,20 @@ a:visited:not(.button) { color: var(--findify-text-secondary-color); } -.image-container { +.findify-image-container { position: relative; padding-top: var(--findify-product-card-aspect-ratio); display: inline-block; width: 100%; } -.image-container img { +.findify-image-container img { position: absolute; top: 0; left: 0; height: 100%; } -.image-container .second-image { +.findify-image-container .findify-second-image { display: none; position: absolute; top: 0; @@ -65,7 +65,7 @@ a:visited:not(.button) { z-index: 1; } -.image-container:hover .second-image { +.findify-image-container:hover .findify-second-image { display: inline; } diff --git a/assets/findify-product-card.js b/assets/findify-product-card.js index f8e51f1..8c63392 100644 --- a/assets/findify-product-card.js +++ b/assets/findify-product-card.js @@ -26,7 +26,8 @@ const initProductCardAnalytics = (id, properties) => { }; const savePosition = (id, page) => { - sessionStorage.setItem('product', `${page}:${id}`) + const url = window.location.href + sessionStorage.setItem('product', JSON.stringify({id, url, page})) } const initOnProductCardClick = (id, page, properties) => { @@ -50,7 +51,7 @@ const setProductUrl = (productCard, url) => { const onSwatchClick = (event, product_url, variant_url, variant_image) => { const targetedSwatch = event.target; - const productCard = targetedSwatch.closest('div[id].findify-product-card'); + const productCard = targetedSwatch.closest('div[id].findify-product-card'); const swatchImage = productCard.querySelector(`.findify-product-swatch-image`); if(targetedSwatch.classList.contains('active')) { diff --git a/sections/findify-grid-collection.liquid b/sections/findify-grid-collection.liquid index 5ab4e97..e9a981d 100644 --- a/sections/findify-grid-collection.liquid +++ b/sections/findify-grid-collection.liquid @@ -135,6 +135,10 @@ initFindifyLazyLoadingPagination("{{lazy_loading_pagination_threshold}}"); } + if("{{ use_lazy_loading_pagination }}" == "false") { + initScrollToProductForPagination(); + } + setFindifyIsLoading(false); diff --git a/sections/findify-grid-search.liquid b/sections/findify-grid-search.liquid index cf26159..81fe9f2 100644 --- a/sections/findify-grid-search.liquid +++ b/sections/findify-grid-search.liquid @@ -191,6 +191,10 @@ initFindifyLazyLoadingPagination("{{lazy_loading_pagination_threshold}}"); } + if("{{ use_lazy_loading_pagination }}" == "false") { + initScrollToProductForPagination(); + } + setFindifyIsLoading(false); } else { const id = "{{ recommendation_id }}"; @@ -213,7 +217,7 @@ findify.core.init.then(() => { initRecommendation(); - window.addEventListener('popstate', () => { + window.addEventListener('popstate', () => { initRecommendation(); }); }); diff --git a/snippets/findify-head-injector.liquid b/snippets/findify-head-injector.liquid index 231e60d..403ca31 100644 --- a/snippets/findify-head-injector.liquid +++ b/snippets/findify-head-injector.liquid @@ -19,7 +19,7 @@