@sledge-app/react-instant-search 2.0.6 → 2.0.7

package/dist/sledge-react-instant-search.js

@@ -4272,7 +4272,8 @@ const ProductCard = React__default.memo((props) => {
     dataWishlists,
     generalDataSettings,
     previewSettings,
-    isFlyout
+    isFlyout,
+    additionalCardProps
   } = props;
   const {
     show_vendor = true,
@@ -4317,6 +4318,7 @@ const ProductCard = React__default.memo((props) => {
   let isOutOfStock = showOptionOutOfStock ? !Boolean(selectedVariantStock > 0 || selectedVariantInventoryManagement === null || selectedVariantInventoryPolicy === "continue") : false;
   let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false;
   const { money_format } = generalDataSettings || {};
+  const { forLoopIndex, forLoopIndexWithPage } = additionalCardProps || {};
   let component = null;
   if (CardsComponent) {
     const CardsProps = {
@@ -4342,11 +4344,13 @@ const ProductCard = React__default.memo((props) => {
       },
       showPopupComponent,
       setShowPopupComponent,
-      sourceApp
+      sourceApp,
+      forLoopIndex,
+      forLoopIndexWithPage
     };
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
   } else {
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFlyout ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-flyout", children: [
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFlyout ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-flyout", "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-flyout-wishlist-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Trigger,
         {
@@ -4437,7 +4441,7 @@ const ProductCard = React__default.memo((props) => {
           )
         ] }) : null
       ] })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -4629,7 +4633,21 @@ const ProductCard = React__default.memo((props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
 });
 const ProductGrid = React__default.memo((props) => {
-  const { type, className = "", data, setting, sourceApp = null, useSlider = false, isFlyout = false, onAfterAddToCart, onAfterRenderProduct, currentColumnGrid, previewSettings } = props;
+  const {
+    type,
+    className = "",
+    data,
+    setting,
+    sourceApp = null,
+    useSlider = false,
+    isFlyout = false,
+    onAfterAddToCart,
+    onAfterRenderProduct,
+    currentColumnGrid,
+    previewSettings,
+    hitsPerPage,
+    currentPage
+  } = props;
   const { redirect_add_to_cart = true } = setting || {};
   const [clickedAddToCartId, setClickedAddToCartId] = React__default.useState(null);
   const [generalDataSettings, setGeneralDataSettings] = React__default.useState({});
@@ -4731,6 +4749,10 @@ const ProductGrid = React__default.memo((props) => {
             handleAddToCart,
             clickedAddToCartId,
             generalDataSettings,
+            additionalCardProps: {
+              forLoopIndex: index,
+              forLoopIndexWithPage: Number(currentPage) && Number(hitsPerPage) ? index + (Number(currentPage) - 1) * Number(hitsPerPage) : index
+            },
             ...props
           },
           `sledge-product-card_${index}`
@@ -9477,7 +9499,7 @@ const SearchResultWidget = (props) => {
   ] });
 };
 const ResultProduct = React__default.memo((props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const {
     layoutType,
     keyword,
@@ -9573,10 +9595,11 @@ const ResultProduct = React__default.memo((props) => {
   );
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
   const [searchResult, setSearchResult] = React__default.useState(((_d = (_c = (_b = propsData == null ? void 0 : propsData.result) == null ? void 0 : _b.results) == null ? void 0 : _c[0]) == null ? void 0 : _d.hits) || []);
+  const [hitsPerPageResult, setHitsPerPageResult] = React__default.useState(((_g = (_f = (_e = propsData == null ? void 0 : propsData.result) == null ? void 0 : _e.results) == null ? void 0 : _f[0]) == null ? void 0 : _g.hitsPerPage) || 0);
   const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
   const [currentPage, setCurrentPage] = React__default.useState(Number(searchParams == null ? void 0 : searchParams.get(queryPage)) && !isLoadMore ? Number(searchParams == null ? void 0 : searchParams.get(queryPage)) : 1);
   const [totalPage, setTotalPage] = React__default.useState(0);
-  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_g = (_f = (_e = propsData == null ? void 0 : propsData.result) == null ? void 0 : _e.results) == null ? void 0 : _f[0]) == null ? void 0 : _g.totalHits) || 0);
+  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_j = (_i = (_h = propsData == null ? void 0 : propsData.result) == null ? void 0 : _h.results) == null ? void 0 : _i[0]) == null ? void 0 : _j.totalHits) || 0);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
@@ -9628,13 +9651,13 @@ const ResultProduct = React__default.memo((props) => {
   };
   const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator(totalSearchResult) : null);
   const previousState = usePrevious({ clickedLimitId, clickedSortId, clickedFacets, clickedTabIndexId });
-  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.title) || {};
+  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.title) || {};
   const {
     color: filter_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.option) || {};
+  } = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -9647,7 +9670,7 @@ const ResultProduct = React__default.memo((props) => {
     font_size: filter_button_font_size,
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
-  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.button) || {};
+  } = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -9834,7 +9857,7 @@ const ResultProduct = React__default.memo((props) => {
     const result = layoutType === "default" && isFirstTimeOrOnSearch ? (_b2 = resultData == null ? void 0 : resultData.find) == null ? void 0 : _b2.call(resultData, ({ indexUid }) => indexUid.includes(index_product)) : resultData;
     if (!result)
       return;
-    const { hits, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
+    const { hits, hitsPerPage, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
     const updateTabs = () => {
       const valueAllowedTabs = objectPresent(previewSettings) ? tabs : allowedTabs;
       if (valueAllowedTabs == null ? void 0 : valueAllowedTabs.length) {
@@ -9891,6 +9914,7 @@ const ResultProduct = React__default.memo((props) => {
     setIsLoadingButtonLoadMore(false);
     setIsReplaceWidgetList == null ? void 0 : setIsReplaceWidgetList(false);
     setSearchResult(!(hits == null ? void 0 : hits.length) ? [] : (prevState) => (searchResult == null ? void 0 : searchResult.length) && isLoadMore2 ? [...prevState, ...hits] : hits);
+    setHitsPerPageResult(hitsPerPage);
     setSearchProcessingTimeMs(processingTimeMs || 0);
     setTotalPage(totalPages);
     setTotalSearchResult(totalHits || 0);
@@ -10201,7 +10225,7 @@ const ResultProduct = React__default.memo((props) => {
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     PaginationOrLoadMore,
     {
-      type: (_k = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _k.pagination_type,
+      type: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.pagination_type,
       isLoadMore,
       isLoadingButtonLoadMore,
       handleLoadMore: () => {
@@ -10210,7 +10234,7 @@ const ResultProduct = React__default.memo((props) => {
         setIsReplaceWidgetList == null ? void 0 : setIsReplaceWidgetList(true);
       },
       buttonLoadMoreText: isLoadingButtonLoadMore ? button_loading || "Loading..." : button_load_more || "Load More",
-      isInfiniteScroll: ((_l = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _l.pagination_type) === "infinite_scroll",
+      isInfiniteScroll: ((_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.pagination_type) === "infinite_scroll",
       currentPage,
       totalPage,
       totalResult: totalSearchResult,
@@ -10219,7 +10243,7 @@ const ResultProduct = React__default.memo((props) => {
       handlePageChange
     }
   );
-  const summaryTextComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_total_products) ? summaryText : null });
+  const summaryTextComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) ? summaryText : null });
   const searchFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { placeholder: language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product, value: keyword, handleChangeSearch: handleChangeKeyword });
   /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { placeholder: language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product, value: keyword, handleChangeSearch: handleChangeKeyword });
   const sortComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10232,7 +10256,7 @@ const ResultProduct = React__default.memo((props) => {
       overridePlaceholderOnMobile: !mobileShowSelectedSort ? mobile_sort_placeholder || "Sort" : null
     }
   );
-  const limitComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Limit, { label: language_limit, options: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.allowed_limit, clickedOption: clickedLimitId, handleChangeOption: handleChangeLimit });
+  const limitComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Limit, { label: language_limit, options: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.allowed_limit, clickedOption: clickedLimitId, handleChangeOption: handleChangeLimit });
   const productGridComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     ProductGrid,
     {
@@ -10246,9 +10270,9 @@ const ResultProduct = React__default.memo((props) => {
         };
       }),
       setting: {
-        show_vendor: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_vendor,
-        show_sku: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_sku,
-        show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price,
+        show_vendor: (_r = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _r.show_vendor,
+        show_sku: (_s = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _s.show_sku,
+        show_price: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.show_price,
         language_button_add_to_cart: language_add_to_cart,
         language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
       },
@@ -10262,7 +10286,9 @@ const ResultProduct = React__default.memo((props) => {
       dataWishlists: propsData == null ? void 0 : propsData.wishlists,
       dataReviews: propsData == null ? void 0 : propsData.reviews,
       currentColumnGrid,
-      previewSettings
+      previewSettings,
+      hitsPerPage: hitsPerPageResult,
+      currentPage
     }
   );
   const resultEmptyComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, { ...props });