@sledge-app/react-instant-search 0.0.32 → 0.0.34

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

@@ -21,7 +21,8 @@ const SEPARATE_COMPONENT_DISPLAY_NAME = {
     CARDS: "ProductCards"
   },
   SUGGESTION_KEYWORD_LISTS: "SuggestionKeywordLists",
-  OTHER_INDEX_LISTS: "OtherIndexLists"
+  OTHER_INDEX_LISTS: "OtherIndexLists",
+  SEARCH_VIEW_MORE_RESULT: "SearchViewMoreResult"
 };
 const sanitizeDataId = (id) => {
   if (!id)
@@ -1640,6 +1641,7 @@ const ProductGrid = ({
   showOptionOutOfStock = false,
   triggerPropAdditional,
   sourceApp = null,
+  isComponentJsVersion = false,
   cards,
   onAfterAddToCart,
   onAfterAddWishlist,
@@ -1714,7 +1716,7 @@ const ProductGrid = ({
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
     let isLoadingAddToCart = clickedAddToCartId == variant_id;
     let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !variants[0].inventory_quantity && showOptionOutOfStock : false;
-    return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: cards({
+    const getCards = cards ? cards({
       product: {
         ...product,
         ...{
@@ -1727,7 +1729,8 @@ const ProductGrid = ({
           })
         }
       }
-    }) }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+    }) : null;
+    return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", 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(
@@ -2189,9 +2192,12 @@ const SearchIconWidget = (props) => {
   let productCardsComponent = null;
   let suggestionKeywordListsComponent = null;
   let otherIndexListsComponent = null;
+  let searchViewMoreResultComponent = null;
+  let separateJsVersionComponent = false;
   React__default.Children.map(children, (child) => {
     if (React__default.isValidElement(child) && isFunction(child.type)) {
-      const { component } = (child == null ? void 0 : child.props) || {};
+      const { component, isJsVersion } = (child == null ? void 0 : child.props) || {};
+      separateJsVersionComponent = isJsVersion;
       switch (child.type.name) {
         case SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS:
           productCardsComponent = component;
@@ -2202,6 +2208,9 @@ const SearchIconWidget = (props) => {
         case SEPARATE_COMPONENT_DISPLAY_NAME.OTHER_INDEX_LISTS:
           otherIndexListsComponent = component;
           break;
+        case SEPARATE_COMPONENT_DISPLAY_NAME.SEARCH_VIEW_MORE_RESULT:
+          searchViewMoreResultComponent = component;
+          break;
       }
     }
   });
@@ -2237,16 +2246,33 @@ const SearchIconWidget = (props) => {
         onAfterAddWishlist,
         onAfterRemoveWishlist,
         onAfterRenderProduct,
+        separateJsVersionComponent,
         productCardsComponent,
         suggestionKeywordListsComponent,
-        otherIndexListsComponent
+        otherIndexListsComponent,
+        searchViewMoreResultComponent
       );
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
 };
 const SearchIconWidgetPopup$1 = "";
-const RenderSuggestionKeywordLists = ({ listsComponent, keywords }) => {
-  return listsComponent ? listsComponent({ keywords }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+const OtherIndexLists = ({ listsComponent, name, items, isComponentJsVersion = false }) => {
+  const getListsComponent = listsComponent ? listsComponent({ name, items }) : null;
+  return listsComponent ? isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getListsComponent } }) : getListsComponent : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: name }),
+    (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: items.map((hit, index) => {
+      const { title, url } = hit;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__icon-widget-search-form-result-list-link", children: title }) }, index);
+    }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: [
+      "No ",
+      name == null ? void 0 : name.toLowerCase(),
+      " were found"
+    ] }) })
+  ] });
+};
+const SuggestionKeywordLists = ({ listsComponent, keywords, isComponentJsVersion = false }) => {
+  const getListsComponent = listsComponent ? listsComponent({ keywords }) : null;
+  return listsComponent ? isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getListsComponent } }) : getListsComponent : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Suggestions" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: keywords == null ? void 0 : keywords.map((keyword, index) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2264,18 +2290,14 @@ const RenderSuggestionKeywordLists = ({ listsComponent, keywords }) => {
     }) })
   ] });
 };
-const RenderOtherIndexLists = ({ listsComponent, name, items }) => {
-  return listsComponent ? listsComponent({ name, items }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: name }),
-    (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: items.map((hit, index) => {
-      const { title, url } = hit;
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__icon-widget-search-form-result-list-link", children: title }) }, index);
-    }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: [
-      "No ",
-      name == null ? void 0 : name.toLowerCase(),
-      " were found"
-    ] }) })
-  ] });
+const SearchViewMoreResult = ({ component, keyword, isComponentJsVersion = false }) => {
+  const getComponent = component ? component({ keyword }) : null;
+  return component ? isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getComponent } }) : getComponent : /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${SEARCH_RESULT_URL}?q=${keyword}`, className: "sledge-instant-search__icon-widget-button-more", children: "View More Result" });
+};
+const Global = {
+  OtherIndexLists,
+  SuggestionKeywordLists,
+  SearchViewMoreResult
 };
 const SearchIconWidgetPopup = () => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
@@ -2299,9 +2321,11 @@ const SearchIconWidgetPopup = () => {
     },
     onAfterRenderProduct: (state) => {
     },
+    separateJsVersionComponent: null,
     productCardsComponent: null,
     suggestionKeywordListsComponent: null,
-    otherIndexListsComponent: null
+    otherIndexListsComponent: null,
+    searchViewMoreResultComponent: null
   });
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
@@ -2390,9 +2414,10 @@ const SearchIconWidgetPopup = () => {
       }, onAfterAddWishlist = () => {
       }, onAfterRemoveWishlist = () => {
       }, onAfterRenderProduct = () => {
-      }, productCardsComponent = () => {
+      }, separateJsVersionComponent = null, productCardsComponent = () => {
       }, suggestionKeywordListsComponent = () => {
       }, otherIndexListsComponent = () => {
+      }, searchViewMoreResultComponent = () => {
       }) => {
         setShowInfo(true);
         setHandleFunctions({
@@ -2400,9 +2425,11 @@ const SearchIconWidgetPopup = () => {
           onAfterAddWishlist,
           onAfterRemoveWishlist,
           onAfterRenderProduct,
+          separateJsVersionComponent,
           productCardsComponent,
           suggestionKeywordListsComponent,
-          otherIndexListsComponent
+          otherIndexListsComponent,
+          searchViewMoreResultComponent
         });
         setTimeout(() => {
           if (searchFieldRef == null ? void 0 : searchFieldRef.current) {
@@ -2484,15 +2511,24 @@ const SearchIconWidgetPopup = () => {
       ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-other", children: [
           Object.keys(suggestionSettings).length && ((_c = (_b = suggestionSettings[suggestionIndex]) == null ? void 0 : _b.keywords) == null ? void 0 : _c.active) && ((_f = (_e = (_d = suggestionSettings[suggestionIndex]) == null ? void 0 : _d.keywords) == null ? void 0 : _e.list) == null ? void 0 : _f.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            RenderSuggestionKeywordLists,
+            Global.SuggestionKeywordLists,
             {
               listsComponent: handleFunctions.suggestionKeywordListsComponent,
-              keywords: suggestionSettings[suggestionIndex].keywords.list
+              keywords: suggestionSettings[suggestionIndex].keywords.list,
+              isComponentJsVersion: handleFunctions.separateJsVersionComponent
             }
           ) : null,
           searchResultOther && searchResultOther.map((item, index) => {
             const { hits, name } = item;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderOtherIndexLists, { listsComponent: handleFunctions.otherIndexListsComponent, name, items: hits }) }, index);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Global.OtherIndexLists,
+              {
+                listsComponent: handleFunctions.otherIndexListsComponent,
+                name,
+                items: hits,
+                isComponentJsVersion: handleFunctions.separateJsVersionComponent
+              }
+            ) }, index);
           })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-product", children: [
@@ -2514,6 +2550,7 @@ const SearchIconWidgetPopup = () => {
                 show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
               },
               showOptionOutOfStock: true,
+              isComponentJsVersion: handleFunctions.separateJsVersionComponent,
               cards: handleFunctions.productCardsComponent,
               onAfterAddToCart: handleFunctions.onAfterAddToCart,
               onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
@@ -2545,6 +2582,7 @@ const SearchIconWidgetPopup = () => {
                   show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price
                 },
                 showOptionOutOfStock: true,
+                isComponentJsVersion: handleFunctions.separateJsVersionComponent,
                 cards: handleFunctions.productCardsComponent,
                 onAfterAddToCart: handleFunctions.onAfterAddToCart,
                 onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
@@ -2556,7 +2594,14 @@ const SearchIconWidgetPopup = () => {
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Products" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: "No product were found" })
           ] }),
-          (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_s = (_r = suggestionSettings[suggestionIndex]) == null ? void 0 : _r.products) == null ? void 0 : _s.active) && ((_v = (_u = (_t = suggestionSettings[suggestionIndex]) == null ? void 0 : _t.products) == null ? void 0 : _u.list) == null ? void 0 : _v.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${SEARCH_RESULT_URL}?q=${keyword}`, className: "sledge-instant-search__icon-widget-button-more", children: "View More Result" }) }) : null
+          (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_s = (_r = suggestionSettings[suggestionIndex]) == null ? void 0 : _r.products) == null ? void 0 : _s.active) && ((_v = (_u = (_t = suggestionSettings[suggestionIndex]) == null ? void 0 : _t.products) == null ? void 0 : _u.list) == null ? void 0 : _v.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Global.SearchViewMoreResult,
+            {
+              component: handleFunctions.searchViewMoreResultComponent,
+              keyword,
+              isComponentJsVersion: handleFunctions.separateJsVersionComponent
+            }
+          ) }) : null
         ] })
       ] }) }) }) })
     ] })
@@ -2569,10 +2614,12 @@ const SearchResultWidget = (props) => {
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
   let productCardsComponent = null;
+  let separateJsVersionComponent = false;
   React__default.Children.map(children, (child) => {
     if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
-      const { component } = (child == null ? void 0 : child.props) || {};
+      const { component, isJsVersion } = (child == null ? void 0 : child.props) || {};
       productCardsComponent = component;
+      separateJsVersionComponent = isJsVersion;
     }
   });
   const { isRenderApp } = React__default.useContext(SledgeContext);
@@ -3040,6 +3087,7 @@ const SearchResultWidget = (props) => {
       defaultSort,
       showOutOfStock,
       data,
+      separateJsVersionComponent,
       productCardsComponent,
       onAfterAddToCart,
       onAfterAddWishlist,
@@ -3070,6 +3118,7 @@ const ResultProduct = (props) => {
     defaultSort,
     showOutOfStock,
     data,
+    separateJsVersionComponent,
     productCardsComponent,
     setKeyword,
     filterHorizontalSkeleton,
@@ -3633,6 +3682,7 @@ const ResultProduct = (props) => {
                   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
                 },
+                isComponentJsVersion: separateJsVersionComponent,
                 cards: productCardsComponent,
                 showOptionOutOfStock: true,
                 onAfterAddToCart,
@@ -3783,10 +3833,28 @@ const SearchWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   let productCardsComponent = null;
+  let suggestionKeywordListsComponent = null;
+  let otherIndexListsComponent = null;
+  let searchViewMoreResultComponent = null;
+  let separateJsVersionComponent = false;
   React__default.Children.map(children, (child) => {
-    if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
-      const { component } = (child == null ? void 0 : child.props) || {};
-      productCardsComponent = component;
+    if (React__default.isValidElement(child) && isFunction(child.type)) {
+      const { component, isJsVersion } = (child == null ? void 0 : child.props) || {};
+      separateJsVersionComponent = isJsVersion;
+      switch (child.type.name) {
+        case SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS:
+          productCardsComponent = component;
+          break;
+        case SEPARATE_COMPONENT_DISPLAY_NAME.SUGGESTION_KEYWORD_LISTS:
+          suggestionKeywordListsComponent = component;
+          break;
+        case SEPARATE_COMPONENT_DISPLAY_NAME.OTHER_INDEX_LISTS:
+          otherIndexListsComponent = component;
+          break;
+        case SEPARATE_COMPONENT_DISPLAY_NAME.SEARCH_VIEW_MORE_RESULT:
+          searchViewMoreResultComponent = component;
+          break;
+      }
     }
   });
   const { isRenderApp } = React__default.useContext(SledgeContext);
@@ -3954,36 +4022,17 @@ const SearchWidget = (props) => {
     ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { isLoading, withCorner: false, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-other", children: [
-          Object.keys(suggestionSettings).length && ((_b = (_a = suggestionSettings[suggestionIndex]) == null ? void 0 : _a.keywords) == null ? void 0 : _b.active) && ((_e = (_d = (_c = suggestionSettings[suggestionIndex]) == null ? void 0 : _c.keywords) == null ? void 0 : _d.list) == null ? void 0 : _e.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-title", children: "Suggestions" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__widget-search-form-result-list", children: suggestionSettings[suggestionIndex].keywords.list.map((keyword2, index) => {
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "a",
-                {
-                  href: `${SEARCH_RESULT_URL}?q=${keyword2}`,
-                  className: "sledge-instant-search__widget-search-form-result-list-link sledge-instant-search__widget-search-form-result-list-link-suggestion",
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 12, height: 12, color: "#677487" }),
-                    " ",
-                    keyword2
-                  ]
-                }
-              ) }, index);
-            }) })
-          ] }) : null,
+          Object.keys(suggestionSettings).length && ((_b = (_a = suggestionSettings[suggestionIndex]) == null ? void 0 : _a.keywords) == null ? void 0 : _b.active) && ((_e = (_d = (_c = suggestionSettings[suggestionIndex]) == null ? void 0 : _c.keywords) == null ? void 0 : _d.list) == null ? void 0 : _e.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Global.SuggestionKeywordLists,
+            {
+              listsComponent: suggestionKeywordListsComponent,
+              keywords: suggestionSettings[suggestionIndex].keywords.list,
+              isComponentJsVersion: separateJsVersionComponent
+            }
+          ) : null,
           searchResultOther.map((item, index) => {
             const { hits, name } = item;
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-title", children: name }),
-              (hits == null ? void 0 : hits.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__widget-search-form-result-list", children: hits.map((hit, index2) => {
-                const { title, url } = hit;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__widget-search-form-result-list-link", children: title }) }, index2);
-              }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__widget-search-form-result-item-disabled", children: [
-                "No ",
-                name.toLowerCase(),
-                " were found"
-              ] }) })
-            ] }, index);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.OtherIndexLists, { listsComponent: otherIndexListsComponent, name, items: hits, isComponentJsVersion: separateJsVersionComponent }) }, index);
           })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-product", children: [
@@ -4006,6 +4055,7 @@ const SearchWidget = (props) => {
                 show_price: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_price
               },
               showOptionOutOfStock: true,
+              isComponentJsVersion: separateJsVersionComponent,
               cards: productCardsComponent,
               onAfterAddToCart,
               onAfterAddWishlist,
@@ -4038,6 +4088,7 @@ const SearchWidget = (props) => {
                   show_price: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_price
                 },
                 showOptionOutOfStock: true,
+                isComponentJsVersion: separateJsVersionComponent,
                 cards: productCardsComponent,
                 onAfterAddToCart,
                 onAfterAddWishlist,
@@ -4048,7 +4099,7 @@ const SearchWidget = (props) => {
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-product-disabled", children: "No product were found" })
         ] })
       ] }),
-      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${SEARCH_RESULT_URL}?q=${keyword}`, className: "sledge-instant-search__widget-button-more", children: "View More Result" }) }) : null
+      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.SearchViewMoreResult, { component: searchViewMoreResultComponent, keyword, isComponentJsVersion: separateJsVersionComponent }) }) : null
     ] }) }) })
   ] });
 };