Merged with main

findify · Jul 22, 2024 · 1f13e3c · 1f13e3c
2 parents 48f05e2 + 93c2c88
commit 1f13e3c
Show file tree

Hide file tree

Showing 27 changed files with 398 additions and 192 deletions.
diff --git a/assets/findify-analytics.js b/assets/findify-analytics.js
@@ -2,14 +2,15 @@
   /**
    * productPageAnalyticsTagSelectorId can be found in findify-head-injector
    */
-  const productPageAnalyticsTagSelectorId = "findify-analytics-product";
+  const productPageAnalyticsTagSelectorId = 'findify-analytics-product';
+
   const isProductDetails = () =>
     !!document.getElementById(productPageAnalyticsTagSelectorId);
 
   const getPageType = () => {
-    if (isProductDetails()) return "product-details";
-    if (findify.utils.isSearch()) return "search-results";
-    if (findify.utils.isCollection()) return "smart-collection";
+    if (isProductDetails()) return 'product-details';
+    if (findify.utils.isSearch()) return 'search-results';
+    if (findify.utils.isCollection()) return 'smart-collection';
   };
 
   const viewPageEvent = () => {
@@ -18,24 +19,53 @@
     const ref = window.document.referrer;
     const url = window.location.href;
     const page_type = getPageType();
+    const itemId = document
+      .getElementById(productPageAnalyticsTagSelectorId)
+      ?.getAttribute('data-findify-item-id');
+    const variantId = document
+      .getElementById(productPageAnalyticsTagSelectorId)
+      ?.getAttribute('data-findify-variant-item-id');
+
+    const sendEvent = (...props) =>
+      findify.core.analytics.sendEvent('view-page', ...props);
 
     try {
-      findify.core.analytics.sendEvent("view-page", {
+      sendEvent({
         width,
         height,
         ref,
         url,
         page_type,
+        item_id: itemId,
+        variant_item_id: variantId,
       });
     } catch (error) {
-      console.error("Error sending view-page event", error);
+      console.error('Error sending view-page event', error);
     }
   };
 
-  const updateCartEvent = () => {};
+  const updateCartEvent = () => {
+    const cart = document.querySelector('[data-findify-event="update-cart"]');
+    const cartItems = cart && Array.prototype.slice.call(cart.children);
+    const items =
+      cartItems.map((item) => {
+        return {
+          item_id: item.getAttribute('data-findify-item-id'),
+          variant_item_id: item.getAttribute('data-findify-variant-item-id'),
+          unit_price: item.getAttribute('data-findify-unit-price'),
+          quantity: item.getAttribute('data-findify-quantity'),
+        };
+      }) || [];
+
+    try {
+      findify.core.analytics.sendEvent('update-cart', { line_items: items });
+    } catch (error) {
+      console.error('Error sending update-cart event', error);
+    }
+  };
 
-  setTimeout(() => {
+  findify.core.init.then(() => {
     viewPageEvent();
     updateCartEvent();
-  }, 1000);
+  });
 })();
diff --git a/assets/findify-content.js b/assets/findify-content.js
@@ -1,100 +1,158 @@
-/*
- *   Description: Bind infinite scroll event on window, and checking the div with id if shown and active and reached
- *   @return void;
- */
-const initFindifyContentEvents = () => {
-  const contentIntegrations = Object.keys(findify.grid.liquid?.contents).map((id) => ({
-    id,
-  }));
-  contentIntegrations.forEach(({ id }) => {
-    const infiniteScrollElement = document.getElementById(
-      `${id}-infinite-scroll`
-    );
-
-    /*
-     *   @return boolean;
-     */
-    const isContentDisplayed = () => {
-      return document.getElementById(`${id}-content`).style.display === "block";
-    };
-
-    const hasNextPage = (currentPage, lastPage) => currentPage <= lastPage;
-
-    const scrollEventOptions = { passive: true };
-
-    const onScrollFunction = async () => {
-      const currentPage =
-        findify.contents.state[id].meta.offset /
-          findify.contents.state[id].meta.limit +
-        1;
-      const lastPage = Math.ceil(
-        findify.contents.state[id].meta.total /
-          findify.contents.state[id].meta.limit
-      );
-      if (
-        isContentDisplayed() &&
-        !findify.contents.state[id].loading &&
-        findify.utils.isInViewport(infiniteScrollElement) &&
-        hasNextPage(currentPage, lastPage)
-      ) {
-        findify.contents.state[id] = {
-          ...findify.contents.state[id],
-          loading: true,
-        };
-
-        const offset =
-          findify.contents.state[id].meta.offset +
-          findify.contents.state[id].meta.limit;
-        const contentToLoad = {
-          [id]: {
-            title: findify.grid.liquid?.contents[id].title,
-          },
-        };
-        const response = await findify.contents.api(contentToLoad, {
-          offset,
-        });
-        await findify.grid.renderContents({
-          [id]: {
-            ...response[id],
-            items: [...response[id].items].splice(
-              response[id].meta.offset,
-              response[id].meta.offset
-            ),
-          },
-        });
-
-        const updatedPage = offset / findify.contents.state[id].meta.limit + 1;
-        if (lastPage <= updatedPage) {
-          removeLoader();
-        }
-        findify.contents.state[id].loading = false;
-      }
-    };
-
-    const removeLoader = () => {
-      infiniteScrollElement?.remove();
-      window.removeEventListener(
-        "scroll",
-        onScrollFunction,
-        scrollEventOptions
-      );
-    };
-
-    const lastPage = Math.ceil(
-      findify.contents.state[id].meta.total /
-        findify.contents.state[id].meta.limit
-    );
-    const currentPage =
-      findify.contents.state[id].meta.offset /
-        findify.contents.state[id].meta.limit +
-      1;
-    if (
-      lastPage <= currentPage ||
-      findify.contents.state[id].meta.total === 0
-    ) {
-      removeLoader();
-    } else {
-      window.addEventListener("scroll", onScrollFunction, scrollEventOptions);
-    }
-  });
-};
+/*
+ *   Description: Bind infinite scroll event on window, and checking the div with id if shown and active and reached
+ *   @return void;
+ */
+const initFindifyContentEvents = () => {
+  const contentIntegrations = Object.keys(findify.grid.liquid?.contents).map((id) => ({
+    id,
+  }));
+
+  const updateActivePage = async (page, content_id) => {
+    const contentSelector = `#${content_id}-content`;
+    const offset = (page - 1) * findify.contents.state[content_id].meta.limit;
+    window.scrollTo({ top: 0, behavior: "smooth" });
+
+    const contentToLoad = {
+      [content_id]: {
+        title: findify.grid.liquid?.contents[content_id].title,
+      },
+    };
+
+    const response = await findify.contents.api(
+      contentToLoad,
+      {
+        offset,
+        limit: findify.contents.state[content_id].meta.limit,
+      },
+      true
+    );
+
+    await findify.pagination.render(
+      response[content_id]?.meta,
+      `#${content_id}-content`
+    );
+    // findify.utils.executeElementScripts(
+    //   document.querySelector(`#${id}-content #findify-pagination`)
+    // );
+
+    await findify.grid.renderContents(
+      {
+        [content_id]: {
+          ...response[content_id],
+          items: [...response[content_id].items],
+        },
+      },
+      false,
+      true
+    );
+  };
+
+  contentIntegrations.forEach(({ id }) => {
+    const infiniteScrollElement = document.getElementById(
+      `${id}-infinite-scroll`
+    );
+
+    /*
+     *   @return boolean;
+     */
+    const isContentDisplayed = () => {
+      return document.getElementById(`${id}-content`).style.display === "block";
+    };
+
+    const hasNextPage = (currentPage, lastPage) => currentPage <= lastPage;
+
+    const scrollEventOptions = { passive: true };
+
+    const onScrollFunction = async () => {
+      const currentPage =
+        findify.contents.state[id].meta.offset /
+          findify.contents.state[id].meta.limit +
+        1;
+      const lastPage = Math.ceil(
+        findify.contents.state[id].meta.total /
+          findify.contents.state[id].meta.limit
+      );
+      if (
+        isContentDisplayed() &&
+        !findify.contents.state[id].loading &&
+        findify.utils.isInViewport(infiniteScrollElement) &&
+        hasNextPage(currentPage, lastPage)
+      ) {
+        findify.contents.state[id] = {
+          ...findify.contents.state[id],
+          loading: true,
+        };
+
+        const offset =
+          findify.contents.state[id].meta.offset +
+          findify.contents.state[id].meta.limit;
+        const contentToLoad = {
+          [id]: {
+            title: findify.grid.liquid?.contents[id].title,
+          },
+        };
+        const response = await findify.contents.api(contentToLoad, {
+          offset,
+        });
+        await findify.grid.renderContents({
+          [id]: {
+            ...response[id],
+            items: [...response[id].items].splice(
+              response[id].meta.offset,
+              response[id].meta.offset
+            ),
+          },
+        });
+
+        const updatedPage = offset / findify.contents.state[id].meta.limit + 1;
+        if (lastPage <= updatedPage) {
+          removeLoader();
+        }
+        findify.contents.state[id].loading = false;
+      }
+    };
+
+    const removeLoader = () => {
+      infiniteScrollElement?.remove();
+      window.removeEventListener(
+        "scroll",
+        onScrollFunction,
+        scrollEventOptions
+      );
+    };
+
+    const lastPage = Math.ceil(
+      findify.contents.state[id].meta.total /
+        findify.contents.state[id].meta.limit
+    );
+    const currentPage =
+      findify.contents.state[id].meta.offset /
+        findify.contents.state[id].meta.limit +
+      1;
+    if (
+      lastPage <= currentPage ||
+      findify.contents.state[id].meta.total === 0
+    ) {
+      removeLoader();
+    } else {
+      window.addEventListener("scroll", onScrollFunction, scrollEventOptions);
+    }
+     // pagination
+
+     const initPagination = () => {
+      const links = document.querySelectorAll(
+        `#${id}-content .pagination__item.link`
+      );
+
+      links.forEach((link) =>
+        link.addEventListener("click", async (e) => {
+          e.preventDefault();
+          const page = link.getAttribute("data-value");
+          page && (await updateActivePage(page, id));
+          initPagination();
+        })
+      );
+    };
+    initPagination();
+  });
+};
diff --git a/assets/findify-product-card.js b/assets/findify-product-card.js
@@ -30,7 +30,7 @@ const savePosition = (id, page) => {
 }
 
 const initOnProductCardClick = (id, page, properties) => {
-  document.getElementById(id).addEventListener("click", (e) => {
+  document.querySelector(`.${properties.widget}_${id}`).addEventListener("click", (e) => {
     initProductCardAnalytics(id, properties);
     savePosition(id, page);
   });

diff --git a/locales/ar.json b/locales/ar.json
@@ -25,7 +25,9 @@
       "results_count": "عرض {{ count }} من نتائج",
       "results_count_for": " عرض {{ count }} من نتائج لـ \"{{ term }}\"",
       "no_results_for": "لا توجد نتائج لـ",
-      "no_results_message": "يرجى التحقق من التهجئة أو محاولة مصطلح بحث آخر"
+      "no_results_message": "يرجى التحقق من التهجئة أو محاولة مصطلح بحث آخر",
+      "results_count_for_corrected_query": "عرض {{ count }} نتائج لـ \"{{ corrected_term }}\". 0 نتائج لـ \"{{ term }}\".",
+      "results_count_for_partial_query": "عرض 0 نتائج لـ \"{{ term }}\". عرض النتائج التي تتطابق جزئيًا بدلاً من ذلك."
     },
     "collections": {
       "products_count": "{{ count }} المنتجات",

diff --git a/locales/da.json b/locales/da.json
@@ -25,7 +25,9 @@
       "results_count": "Viser {{ count }} resultater",
       "results_count_for": "Viser {{ count }} resultater for\"{{ term }}\"",
       "no_results_for": "Ingen resultater for",
-      "no_results_message": "Venligst tjek stavningen eller prøv et andet søgeord"
+      "no_results_message": "Venligst tjek stavningen eller prøv et andet søgeord",
+      "results_count_for_corrected_query": "Viser {{ count }} resultater for \"{{ corrected_term }}\". 0 resultater for \"{{ term }}\".",
+      "results_count_for_partial_query": "Viser 0 resultater for \"{{ term }}\". Viser resultater, der delvist matcher i stedet."
     },
     "collections": {
       "products_count": "{{ count }} produkter",

diff --git a/locales/de.json b/locales/de.json
@@ -25,7 +25,9 @@
       "results_count": "{{ count }} Ergebnisse werden angezeigt",
       "results_count_for": " {{ count }} Ergebnisse werden angezeigt für \"{{ term }}\"",
       "no_results_for": "Keine Ergebnisse für",
-      "no_results_message": "Bitte überprüfen Sie die Rechtschreibung oder versuchen Sie es mit einem anderen Suchbegriff"
+      "no_results_message": "Bitte überprüfen Sie die Rechtschreibung oder versuchen Sie es mit einem anderen Suchbegriff",
+      "results_count_for_corrected_query": "Es werden {{ count }} Ergebnisse für \"{{ corrected_term }}\" angezeigt. 0 Ergebnisse für \"{{ term }}\".",
+      "results_count_for_partial_query": "Es werden 0 Ergebnisse für \"{{ term }}\" angezeigt. Stattdessen werden Ergebnisse angezeigt, die teilweise übereinstimmen."
     },
     "collections": {
       "products_count": "{{ count }} produkte",

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -25,7 +25,9 @@
       "results_count": "Showing {{ count }} results",
       "results_count_for": "Showing {{ count }} results for \"{{ term }}\"",
       "no_results_for": "No results for",
-      "no_results_message": "Please check the spelling or try another search term"
+      "no_results_message": "Please check the spelling or try another search term",
+      "results_count_for_corrected_query": "Showing {{ count }} Results For \"{{ corrected_term }}\". 0 Results For \"{{ term }}\".",
+      "results_count_for_partial_query": "Showing 0 Results For \"{{ term }}\". Showing Results That PartiallyMatch Instead."
     },
     "collections": {
       "products_count": "{{ count }} products",