@sledge-app/react-instant-search 1.0.53 → 1.0.55

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

@@ -2526,13 +2526,21 @@ const ProductCard = (props) => {
   } = setting || {};
   const { product, variants } = item || {};
   const { id, title, image, url, vendor = "", currency, handle } = product || {};
-  const { id: variant_id = "", admin_graphql_api_id: variant_admin_graphql_api_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
+  const {
+    id: variant_id = "",
+    admin_graphql_api_id: variant_admin_graphql_api_id = "",
+    title: variant_title = "",
+    price = "",
+    compare_at_price = "",
+    sku = ""
+  } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
   const defaultSelectedVariantId = variant_admin_graphql_api_id ? variant_admin_graphql_api_id : "";
   const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
   const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
   const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
   let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
   let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !Number(selectedVariantStock) && showOptionOutOfStock : false;
+  let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false;
   let component = null;
   if (CardsComponent) {
     const CardsProps = {
@@ -2653,6 +2661,7 @@ const ProductCard = (props) => {
               },
               className: "sledge__product-grid-card-image-link",
               children: [
+                isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-badge-on-sale", children: "ON SALE" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Trigger,
                   {
@@ -2710,10 +2719,16 @@ const ProductCard = (props) => {
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
-            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,
+            show_price ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-price", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: display_price_style, children: [
+                currency,
+                price
+              ] }),
+              isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "sledge__product-grid-card-compare-at-price", children: [
+                currency,
+                compare_at_price
+              ] })
+            ] }) : null,
             show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
               "Vendor: ",
               vendor
@@ -2774,16 +2789,21 @@ const ProductCard = (props) => {
               const optionValues = option[1];
               let selectedOption = optionValues[0];
               return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-variant-size-swatch-flex options-button-${stringToSlug(optionName)}`, children: optionValues.map((item2, index) => {
+                var _a2;
                 const defaultOptionClass = `
 ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""} sledge__product-variant-size-swatch`;
                 const colorOptionClass = `${selectedOption === item2 ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
+                const colorDataSettings = ((_a2 = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING))) == null ? void 0 : _a2.colors) || [];
+                const getColorSwatch = (colorDataSettings == null ? void 0 : colorDataSettings.filter(({ name }) => name === item2)[0]) || {};
+                const colorSwatch = (getColorSwatch == null ? void 0 : getColorSwatch.image) ? `url(${getColorSwatch == null ? void 0 : getColorSwatch.image})` : (getColorSwatch == null ? void 0 : getColorSwatch.rgb) || item2;
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "button",
                   {
                     type: "button",
                     className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
                     style: {
-                      backgroundColor: optionName === "Color" ? item2 : null
+                      background: optionName === "Color" ? colorSwatch : null,
+                      backgroundSize: "contain"
                     },
                     onClick: (el) => {
                       setSelectedVariant(el, item2, optionParentIndex + 1);
@@ -3392,6 +3412,29 @@ const DotButton = (props) => {
   const { children, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", ...restProps, children });
 };
+const FlyoutSidebar$1 = "";
+const FlyoutSidebar = ({ title, content, open, setOpen }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "sledge-instant-search__filter-flyout-mobile",
+      style: open ? {
+        opacity: "1",
+        visibility: "visible"
+      } : {},
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__filter-flyout-overlay", onClick: () => setOpen(false) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__filter-flyout-mobile-wrapper", style: open ? { left: 0 } : {}, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__filter-flyout-header", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__filter-flyout-mobile-title", children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__clear-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__clear-field", type: "button", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__filter-flyout-mobile-content", children: content })
+        ] })
+      ]
+    }
+  );
+};
 const SearchIconWidget = (props) => {
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
@@ -4539,7 +4582,7 @@ const SearchResultWidget = (props) => {
   ] });
 };
 const ResultProduct = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
   const {
     layoutType,
     keyword,
@@ -4606,6 +4649,7 @@ const ResultProduct = (props) => {
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
+  const [openFilterFlyoutMobile, setOpenFilterFlyoutMobile] = React__default.useState(false);
   const {
     sort_by: language_sort_by,
     result: language_result,
@@ -4888,15 +4932,13 @@ const ResultProduct = (props) => {
       filters.push(`'tags' NOT IN ${JSON.stringify(hiddenTags)}`);
     if (collectionId)
       filters.push(`'collections.id' = '${collectionId}'`);
-    if (DEFAULT_QUERY_PRODUCT_MEILISEARCH == null ? void 0 : DEFAULT_QUERY_PRODUCT_MEILISEARCH.length)
-      filters = [...filters, ...DEFAULT_QUERY_PRODUCT_MEILISEARCH];
     let body = {
       q: keyword,
       sort: clickedSortId ? [clickedSortId] : [],
       page: isReplaceData ? 1 : currentPage,
       hitsPerPage: clickedLimitId,
       facets,
-      filter: filters.join(" AND ")
+      filter: [...new Set(filters.concat(DEFAULT_QUERY_PRODUCT_MEILISEARCH))].join(" AND ")
     };
     if (propsData && handleSearchResultFirstTime) {
       response = (_b2 = (_a2 = propsData == null ? void 0 : propsData.result) == null ? void 0 : _a2.results) == null ? void 0 : _b2[0];
@@ -5281,9 +5323,26 @@ const ResultProduct = (props) => {
     let isLastIndex = allowedFilter.length - 1 === indexFilter;
     return { isActive, isRender, classesUlElement, getFacetComponent, isLastIndex };
   };
+  const filterVerticalSelected = Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: language_filter || "Filter" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: language_clear_filter || "Clear All" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-item-refine-selected-flex", children: dataClickedFacets.map((itemClickedFacet, index) => {
+      const { label, name, value } = itemClickedFacet;
+      return facetBlockSelected({
+        label,
+        name,
+        value,
+        index
+      });
+    }) })
+  ] }) : null;
   const filterVerticalComponents = allowedFilter.map((filter, indexFilter) => {
     const { value, label } = filter;
     const { isRender, classesUlElement, getFacetComponent } = filterSettings(filter);
+    if ((allowedFilter == null ? void 0 : allowedFilter.length) === 1)
+      classesUlElement == null ? void 0 : classesUlElement.push("sledge-instant-search__result-filter-item-list-just-one");
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
@@ -5331,7 +5390,7 @@ const ResultProduct = (props) => {
         }
       },
       text: isLoadingButtonLoadMore ? button_loading || "Loading..." : button_load_more || "Load More",
-      isInfiniteScroll: ((_k = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _k.pagination_type) === "infinite_scroll",
+      isInfiniteScroll: ((_l = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _l.pagination_type) === "infinite_scroll",
       currentPage,
       totalPage,
       totalResult: totalSearchResult,
@@ -5339,9 +5398,9 @@ const ResultProduct = (props) => {
       isVisibleLoadMore
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
-  const filterHorizontalBlockComponent = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+  const filterHorizontalBlockComponent = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-horizontal-component", children: filterHorizontalComponents }),
-    Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+    Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -5361,31 +5420,59 @@ const ResultProduct = (props) => {
       })
     ] }) : null
   ] }) }) }) : null;
+  const searchInputFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SearchInputField,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+      placeholder: (language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product) || "Search products...",
+      value: keyword,
+      onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
+      onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
+      className: "sledge-instant-search__result-data-keyword-form",
+      withClearField: true
+    }
+  );
+  const FilterLayoutOnMobile = () => {
+    var _a2;
+    switch ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.mobile_layout) {
+      case "flyout":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-search-field-flex", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", className: "sledge-instant-search__trigger-filter-flyout", onClick: () => setOpenFilterFlyoutMobile(true), children: language_filter || "Filter" }),
+          searchInputFieldComponent
+        ] });
+      case "standard":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          searchInputFieldComponent,
+          filterHorizontalBlockComponent
+        ] });
+      default:
+        return null;
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.enable_on_search) && ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.enable_on_search) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: language_filter || "Filter" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: language_clear_filter || "Clear All" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-item-refine-selected-flex", children: dataClickedFacets.map((itemClickedFacet, index) => {
-            const { label, name, value } = itemClickedFacet;
-            return facetBlockSelected({
-              label,
-              name,
-              value,
-              index
-            });
-          }) })
-        ] }) : null,
+    ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.mobile_layout) === "flyout" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FlyoutSidebar,
+      {
+        title: language_filter || "Filter",
+        content: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          filterVerticalSelected,
+          filterVerticalComponents
+        ] }),
+        open: openFilterFlyoutMobile,
+        setOpen: setOpenFilterFlyoutMobile
+      }
+    ),
+    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.enable_on_search) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.enable_on_search) && ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        filterVerticalSelected,
         filterVerticalComponents
       ] }) }) : null }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
         isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-            ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.show_total_products) ? summaryTextSkeleton : null,
+            ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.show_total_products) ? summaryTextSkeleton : null,
             searchFieldSkeletonComponent,
             filterHorizontalSkeletonComponent,
             selectOptionSkeletonComponent
@@ -5395,24 +5482,12 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
+              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_v = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _v.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
               children: summaryText
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SearchInputField,
-            {
-              type: "text",
-              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
-              placeholder: (language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product) || "Search products...",
-              value: keyword,
-              onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
-              onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
-              className: "sledge-instant-search__result-data-keyword-form",
-              withClearField: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg sledge-instant-search__filter-horizontal-block-mobile", children: filterHorizontalBlockComponent }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile sledge-instant-search__search-field-lg", children: searchInputFieldComponent }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg sledge-instant-search__filter-horizontal-block-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FilterLayoutOnMobile, {}) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-item sledge-instant-search__result-data-summary-select-field", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-select-field-sort", children: [
@@ -5447,7 +5522,7 @@ const ResultProduct = (props) => {
                 language_limit || "Limit",
                 ":"
               ] }),
-              ((_v = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _v.allowed_limit) && Boolean((_x = (_w = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _w.allowed_limit) == null ? void 0 : _x.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ((_w = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _w.allowed_limit) && Boolean((_y = (_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.allowed_limit) == null ? void 0 : _y.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 SelectField,
                 {
                   align: "end",
@@ -5468,7 +5543,7 @@ const ResultProduct = (props) => {
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_y = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _y.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
+          ((_z = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _z.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
           (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProductGrid,
@@ -5483,9 +5558,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_vendor,
-                  show_sku: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_sku,
-                  show_price: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_price,
+                  show_vendor: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_vendor,
+                  show_sku: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_sku,
+                  show_price: (_C = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _C.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"] : ""
                 },