@sledge-app/react-instant-search 0.0.13 → 0.0.15

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

@@ -16,18 +16,9 @@ const LOCAL_STORAGE_KEY = {
   INSTANT_SEARCH_SETTING: "sledge-instant-search-setting"
 };
 const SEARCH_RESULT_URL = "/pages/search-result";
-const OBJECT_DATA_STRING_KEY = {
-  STORE: {
-    NAME: "{{ shop.name }}"
-  },
+const SEPARATE_COMPONENT_DISPLAY_NAME = {
   PRODUCT: {
-    TITLE: "{ product_title }",
-    VARIANT_TITLE: "{ product_variant_title }",
-    IMAGE: "{ product_image }",
-    CURRENCY: "{ product_currency }",
-    PRICE: "{ product_price }",
-    VENDOR: "{ product_vendor }",
-    SKU: "{ product_sku }"
+    CARDS: "ProductCards"
   }
 };
 const sanitizeDataId = (id) => {
@@ -41,12 +32,7 @@ const sanitizeDataId = (id) => {
     return getId;
   }
 };
-const replaceString = (str, find, replace) => {
-  for (var i = 0; i < find.length; i++) {
-    str = str.replace(new RegExp(find[i], "gi"), replace[i]);
-  }
-  return str;
-};
+const isFunction = (data) => typeof data === "function";
 const SearchIconWidget$1 = "";
 const root = "";
 const Loading = "";
@@ -1644,16 +1630,19 @@ const addToCartTrigger = async (data) => {
     return;
   });
 };
-const ProductCards = ({
+const ProductGrid = ({
+  type,
+  className = "",
   data,
   setting,
-  customProductCard,
   showOptionOutOfStock = false,
   triggerPropAdditional,
   sourceApp = null,
+  cards,
   onAfterAddToCart,
   onAfterAddWishlist,
-  onAfterRemoveWishlist
+  onAfterRemoveWishlist,
+  onAfterRenderProduct
 }) => {
   const {
     show_vendor = true,
@@ -1666,15 +1655,6 @@ const ProductCards = ({
     display_price_style = {},
     display_button_add_to_cart_style = {}
   } = setting || {};
-  let {
-    image: productCardImage = false,
-    outStock: productCardOutStock = "",
-    title: productCardTitle = "",
-    price: productCardPrice = "",
-    text: productCardText = "",
-    rating: productCardRating = false,
-    buttonAddToCart: productCardButtonAddToCart = ""
-  } = customProductCard || {};
   const [clickedAddToCartId, setClickedAddToCartId] = React__default.useState(null);
   const handleAddToCart = async (data2) => {
     var _a;
@@ -1723,45 +1703,32 @@ const ProductCards = ({
       }, 1e3);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: data == null ? void 0 : data.map((item, index) => {
-    var _a;
+  React__default.useEffect(() => {
+    onAfterRenderProduct && onAfterRenderProduct("success");
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
     const { product, variants } = item || {};
     const { id, title, image, url, vendor = "", currency } = product || {};
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
-    let totalStock = ((_a = variants == null ? void 0 : variants.map(({ inventory_quantity }) => inventory_quantity)) == null ? void 0 : _a.reduce((a, b) => a + b, 0)) || 0;
     let isLoadingAddToCart = clickedAddToCartId == variant_id;
-    let isOutOfStock = !totalStock && showOptionOutOfStock && productCardOutStock;
-    if (customProductCard && Object.keys(customProductCard).length) {
-      productCardTitle = productCardTitle ? replaceString(productCardTitle, [OBJECT_DATA_STRING_KEY.PRODUCT.TITLE], [title]) : productCardTitle;
-      productCardPrice = productCardPrice ? replaceString(productCardPrice, [OBJECT_DATA_STRING_KEY.PRODUCT.CURRENCY, OBJECT_DATA_STRING_KEY.PRODUCT.PRICE], [currency, price]) : productCardPrice;
-      productCardText = productCardText ? replaceString(
-        productCardText,
-        [OBJECT_DATA_STRING_KEY.PRODUCT.VARIANT_TITLE, OBJECT_DATA_STRING_KEY.PRODUCT.VENDOR, OBJECT_DATA_STRING_KEY.PRODUCT.SKU],
-        [variant_title, vendor, sku]
-      ) : productCardText;
-    } else {
-      productCardImage = true;
-      productCardOutStock = "Sold out";
-      productCardTitle = title;
-      productCardPrice = `${currency}${price}`;
-      productCardText = `
-                    <div>${variant_title}</div>
-                    <div>Vendor: ${vendor} | SKU: ${sku}</div>`;
-      productCardRating = true;
-      productCardButtonAddToCart = `
-                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            fill-rule="evenodd"
-                            clip-rule="evenodd"
-                            d="M8.83562 1.50023C10.796 1.50023 12.4155 2.99397 12.6152 4.90442L12.6709 4.90507C13.7584 4.90507 15.0806 5.62732 15.5269 7.65307L16.1186 12.2333C16.3309 13.7116 16.0654 14.8973 15.3281 15.7478C14.5946 16.5938 13.4336 17.0416 11.9704 17.0416H5.7094C4.10215 17.0416 2.9824 16.6478 2.28565 15.8386C1.5859 15.0271 1.3519 13.8098 1.5904 12.2213L2.1724 7.70182C2.5549 5.62957 3.95365 4.90507 5.03665 4.90507C5.13014 4.04293 5.51889 3.22275 6.13562 2.60797C6.84437 1.90372 7.82162 1.50023 8.81987 1.50023H8.83562ZM12.6709 6.03007H5.03665C4.7059 6.03007 3.6004 6.16357 3.28315 7.87657L2.70415 12.3766C2.5159 13.6388 2.6614 14.5523 3.13765 15.1051C3.6079 15.6511 4.4494 15.9166 5.7094 15.9166H11.9704C12.7564 15.9166 13.8296 15.7598 14.4776 15.0113C14.9921 14.4181 15.1691 13.5346 15.0041 12.3848L14.4199 7.84582C14.1709 6.72757 13.5139 6.03007 12.6709 6.03007ZM11.023 8.11815C11.3335 8.11815 11.6027 8.37015 11.6027 8.68065C11.6027 8.99115 11.368 9.24315 11.0575 9.24315H11.023C10.7125 9.24315 10.4605 8.99115 10.4605 8.68065C10.4605 8.37015 10.7125 8.11815 11.023 8.11815ZM6.65042 8.11815C6.96092 8.11815 7.23017 8.37015 7.23017 8.68065C7.23017 8.99115 6.99467 9.24315 6.68417 9.24315H6.65042C6.33992 9.24315 6.08792 8.99115 6.08792 8.68065C6.08792 8.37015 6.33992 8.11815 6.65042 8.11815ZM8.83337 2.62522H8.82212C8.11637 2.62522 7.42862 2.90947 6.92987 3.40522C6.5236 3.80967 6.25789 4.34137 6.17193 4.90472L11.4814 4.90493C11.2887 3.61626 10.1743 2.62522 8.83337 2.62522Z"
-                            fill="#393D4E"
-                        ></path></svg
-                    ><span>Add To Cart</span>`;
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+    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({
+      product: {
+        ...product,
+        ...{
+          variants: variants.map((variant, index2) => {
+            const { inventory_quantity, ...otherObject } = variant || {};
+            return {
+              ...otherObject,
+              is_out_of_stock: Object.hasOwn(variants[index2], "inventory_quantity") ? !inventory_quantity : false
+            };
+          })
+        }
+      }
+    }) }, 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: [
-          productCardImage ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "a",
             {
               href: url,
@@ -1792,25 +1759,41 @@ const ProductCards = ({
                 /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || "", alt: "sledge-product-card-image", loading: "lazy", onError: (event) => event.currentTarget.src = `${API_URL}/img/blank-image.png` })
               ]
             }
-          ) : null,
-          isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", dangerouslySetInnerHTML: { __html: productCardOutStock } }) : null
+          ),
+          isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", children: "Sold out" }) : null
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
-            productCardTitle ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               "a",
               {
                 href: url,
                 onClick: () => sourceApp === "instant-search" && productClickTrigger({
                   productId: id
                 }),
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: display_product_name_style, dangerouslySetInnerHTML: { __html: productCardTitle } })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: display_product_name_style, children: title })
               }
-            ) }) : null,
-            show_price && productCardPrice ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-price", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: display_price_style, dangerouslySetInnerHTML: { __html: productCardPrice } }) }) : null
+            ) : null,
+            show_price ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-price", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: display_price_style, children: [
+              currency,
+              price
+            ] }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-text", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: variant_title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: show_vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                "Vendor: ",
+                vendor
+              ] }) : null }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: " | " }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: show_sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                "SKU: ",
+                sku
+              ] }) : null })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", dangerouslySetInnerHTML: { __html: productCardText } }),
-          productCardRating ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Rating,
             {
               data: {
@@ -1819,10 +1802,10 @@ const ProductCards = ({
               size: "xs",
               withSkeletonLoading: false
             }
-          ) }) : null
+          ) })
         ] })
       ] }),
-      show_add_to_cart && productCardButtonAddToCart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
         {
           type: "button",
@@ -1833,7 +1816,6 @@ const ProductCards = ({
               cursor: "wait"
             }
           },
-          dangerouslySetInnerHTML: { __html: isLoadingAddToCart ? "Adding..." : isOutOfStock ? "Sold out" : productCardButtonAddToCart },
           ...isLoadingAddToCart || isOutOfStock ? {
             disabled: true
           } : {
@@ -1841,18 +1823,24 @@ const ProductCards = ({
               id: variant_id,
               quantity: 1
             })
-          }
+          },
+          children: isLoadingAddToCart ? "Adding..." : isOutOfStock ? "Sold out" : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M8.83562 1.50023C10.796 1.50023 12.4155 2.99397 12.6152 4.90442L12.6709 4.90507C13.7584 4.90507 15.0806 5.62732 15.5269 7.65307L16.1186 12.2333C16.3309 13.7116 16.0654 14.8973 15.3281 15.7478C14.5946 16.5938 13.4336 17.0416 11.9704 17.0416H5.7094C4.10215 17.0416 2.9824 16.6478 2.28565 15.8386C1.5859 15.0271 1.3519 13.8098 1.5904 12.2213L2.1724 7.70182C2.5549 5.62957 3.95365 4.90507 5.03665 4.90507C5.13014 4.04293 5.51889 3.22275 6.13562 2.60797C6.84437 1.90372 7.82162 1.50023 8.81987 1.50023H8.83562ZM12.6709 6.03007H5.03665C4.7059 6.03007 3.6004 6.16357 3.28315 7.87657L2.70415 12.3766C2.5159 13.6388 2.6614 14.5523 3.13765 15.1051C3.6079 15.6511 4.4494 15.9166 5.7094 15.9166H11.9704C12.7564 15.9166 13.8296 15.7598 14.4776 15.0113C14.9921 14.4181 15.1691 13.5346 15.0041 12.3848L14.4199 7.84582C14.1709 6.72757 13.5139 6.03007 12.6709 6.03007ZM11.023 8.11815C11.3335 8.11815 11.6027 8.37015 11.6027 8.68065C11.6027 8.99115 11.368 9.24315 11.0575 9.24315H11.023C10.7125 9.24315 10.4605 8.99115 10.4605 8.68065C10.4605 8.37015 10.7125 8.11815 11.023 8.11815ZM6.65042 8.11815C6.96092 8.11815 7.23017 8.37015 7.23017 8.68065C7.23017 8.99115 6.99467 9.24315 6.68417 9.24315H6.65042C6.33992 9.24315 6.08792 8.99115 6.08792 8.68065C6.08792 8.37015 6.33992 8.11815 6.65042 8.11815ZM8.83337 2.62522H8.82212C8.11637 2.62522 7.42862 2.90947 6.92987 3.40522C6.5236 3.80967 6.25789 4.34137 6.17193 4.90472L11.4814 4.90493C11.2887 3.61626 10.1743 2.62522 8.83337 2.62522Z",
+                fill: "#393D4E"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart ? language_button_add_to_cart : "Add To Cart" })
+          ] })
         }
       ) }) : null
     ] }, index);
   }) });
 };
-const ProductGrid = ({ type, className = "", onAfterRenderProduct, ...otherProps }) => {
-  React__default.useEffect(() => {
-    onAfterRenderProduct && onAfterRenderProduct("success");
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCards, { ...otherProps }) });
-};
 const TextAreaField = "";
 const InputField = "";
 const CollectionGrid$1 = "";
@@ -2195,7 +2183,14 @@ const SkeletonLoading = {
   BlogGrid: SkeletonBlogGrid
 };
 const SearchIconWidget = (props) => {
-  const { size = "sm", customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
+  const { size = "sm", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
+  let productCardsComponent = null;
+  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;
+    }
+  });
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [sizing, setSizing] = React__default.useState({
     width: 0,
@@ -2223,7 +2218,7 @@ const SearchIconWidget = (props) => {
   }, [isRenderApp]);
   const handleShowWidget = () => {
     if (typeof window !== "undefined" && window.sledgeInstantSearchIconWidgetPopup)
-      window.sledgeInstantSearchIconWidgetPopup(customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct);
+      window.sledgeInstantSearchIconWidgetPopup(onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, productCardsComponent);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
 };
@@ -2249,9 +2244,9 @@ const SearchIconWidgetPopup = () => {
     onAfterRemoveWishlist: (state) => {
     },
     onAfterRenderProduct: (state) => {
-    }
+    },
+    productCardsComponent: null
   });
-  const [customProductCard, setCustomProductCard] = React__default.useState({});
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const handleMultiSearch = async (data, onSearch = false) => {
@@ -2335,19 +2330,20 @@ const SearchIconWidgetPopup = () => {
   };
   React__default.useEffect(() => {
     if (typeof window !== "undefined") {
-      window.sledgeInstantSearchIconWidgetPopup = (customProductCard2 = {}, onAfterAddToCart = () => {
+      window.sledgeInstantSearchIconWidgetPopup = (onAfterAddToCart = () => {
       }, onAfterAddWishlist = () => {
       }, onAfterRemoveWishlist = () => {
       }, onAfterRenderProduct = () => {
+      }, productCardsComponent = () => {
       }) => {
         setShowInfo(true);
         setHandleFunctions({
           onAfterAddToCart,
           onAfterAddWishlist,
           onAfterRemoveWishlist,
-          onAfterRenderProduct
+          onAfterRenderProduct,
+          productCardsComponent
         });
-        setCustomProductCard(customProductCard2);
         setTimeout(() => {
           if (searchFieldRef == null ? void 0 : searchFieldRef.current) {
             searchFieldRef.current.focus();
@@ -2487,8 +2483,8 @@ const SearchIconWidgetPopup = () => {
                 show_sku: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_sku,
                 show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
               },
-              customProductCard,
               showOptionOutOfStock: true,
+              cards: handleFunctions.productCardsComponent,
               onAfterAddToCart: handleFunctions.onAfterAddToCart,
               onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
               onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
@@ -2528,8 +2524,8 @@ const SearchIconWidgetPopup = () => {
                   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
                 },
-                customProductCard,
                 showOptionOutOfStock: true,
+                cards: handleFunctions.productCardsComponent,
                 onAfterAddToCart: handleFunctions.onAfterAddToCart,
                 onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
                 onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
@@ -2549,9 +2545,16 @@ const SearchIconWidgetPopup = () => {
 const SearchResultWidget$1 = "";
 const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { layoutType = "default", query, data, customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { layoutType = "default", query, data, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
+  let productCardsComponent = null;
+  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;
+    }
+  });
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -3017,7 +3020,7 @@ const SearchResultWidget = (props) => {
       defaultSort,
       showOutOfStock,
       data,
-      customProductCard,
+      productCardsComponent,
       onAfterAddToCart,
       onAfterAddWishlist,
       onAfterRemoveWishlist,
@@ -3047,12 +3050,12 @@ const ResultProduct = (props) => {
     defaultSort,
     showOutOfStock,
     data,
+    productCardsComponent,
     setKeyword,
     filterHorizontalSkeleton,
     filterVerticalSkeleton,
     productGridSkeleton,
     searchAndSelectOptionSkeleton,
-    customProductCard,
     onAfterAddToCart,
     onAfterAddWishlist,
     onAfterRemoveWishlist,
@@ -3620,7 +3623,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
                 },
-                customProductCard,
+                cards: productCardsComponent,
                 showOptionOutOfStock: true,
                 onAfterAddToCart,
                 onAfterAddWishlist,
@@ -3768,7 +3771,14 @@ const ResultEmpty = (props) => {
 const SearchWidget$1 = "";
 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", customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  let productCardsComponent = null;
+  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;
+    }
+  });
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [keyword, setKeyword] = React__default.useState("");
@@ -3995,8 +4005,8 @@ const SearchWidget = (props) => {
                 show_sku: (_g = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _g.show_sku,
                 show_price: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_price
               },
-              customProductCard,
               showOptionOutOfStock: true,
+              cards: productCardsComponent,
               onAfterAddToCart,
               onAfterAddWishlist,
               onAfterRemoveWishlist,
@@ -4037,8 +4047,8 @@ const SearchWidget = (props) => {
                   show_sku: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_sku,
                   show_price: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_price
                 },
-                customProductCard,
                 showOptionOutOfStock: true,
+                cards: productCardsComponent,
                 onAfterAddToCart,
                 onAfterAddWishlist,
                 onAfterRemoveWishlist,