Merged with main

findify · Sep 12, 2024 · a606582 · a606582
2 parents 8ba1b8c + 49d1ea8
commit a606582
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 40 deletions.
diff --git 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
@@ -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,28 +44,28 @@ 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;
   left: 0;
   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
@@ -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
@@ -135,6 +135,10 @@
         initFindifyLazyLoadingPagination("{{lazy_loading_pagination_threshold}}");
       }
 
+      if("{{ use_lazy_loading_pagination }}" == "false") { 
+        initScrollToProductForPagination();
+      }
+
       setFindifyIsLoading(false);
   </script>
 </div>

diff --git 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
@@ -19,7 +19,7 @@
 
 <script>
   window.findify = {
-    current_version: "2024-08.03", // DO NOT MODIFY! This is required within Shopify App Side, a Regex will extract the current version.
+    current_version: "2024-09.01", // DO NOT MODIFY! This is required within Shopify App Side, a Regex will extract the current version.
     product_fields: {
         include: [], // Include, also, these fields to be returned to liquid section
         exclude: [], // Exclude these fields from being sent to liquid section

diff --git a/snippets/findify-product-card.liquid b/snippets/findify-product-card.liquid
@@ -7,7 +7,7 @@
   {% endif %}>
   <a class="findify-product-link" href={{ product_url }}>
     <div class='findify-product-card__image'>
-      <div class='image-container'>
+      <div class='findify-image-container'>
         {% if current_variant.featured_media != null %}
           {% render 'findify-product-image'
             , media: current_variant.featured_media
@@ -20,7 +20,7 @@
         {%- if product.media[1] != null and showHoverImage == 'true' -%}
           {% render 'findify-product-image'
             , media: product.media[1]
-            , class: 'second-image' %}
+            , class: 'findify-second-image' %}
         {%- endif -%}
 
       {% comment %} <img width="100%" height="100%" class="findify-product-swatch-image" hidden /> {% endcomment %}
@@ -32,11 +32,12 @@
       {% endif %}
 
       {% comment %} {% render 'findify-product-swatches-color',
-                                                                      product_url: product_url,
-                                                                      product: product,
-                                                                      colormap: colormap,
-                                                                      variants: variants,
-                                                    %} {% endcomment %}
+                              product_url: product_url,
+                              product: product,
+                              colormap: colormap,
+                              variants: variants,
+                      %} {% endcomment %}
+
 
       <div class='findify-product-title findify-cut-text'>
         <label>{{ product.title }}</label>

diff --git a/snippets/findify-product-price.liquid b/snippets/findify-product-price.liquid
@@ -7,17 +7,22 @@
 
   assign price = target.price | money
   assign compare_at_price = target.compare_at_price | money
+  assign has_discount = false
 -%}
-
+{% if target.price != target.compare_at_price
+  and target.price < target.compare_at_price
+%}
+  {% assign has_discount = true %}
+{% endif %}
 <div>
-  <span class="findify-product-price {%if compare_at_price != '' and price != compare_at_price %} findify-product-price-with-compare{% endif %}">
+  <span class="findify-product-price {%if has_discount %} findify-product-price-with-compare{% endif %}">
     {{ price }}
   </span>
-  {% if price != compare_at_price %}
+  {% if has_discount %}
     <span class="findify-product-price-compare-at">
       <s>
         {{ compare_at_price }}
       </s>
     </span>
   {% endif %}
-</div>
+</div>