@sledge-app/react-instant-search 1.0.73 → 1.0.74

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

@@ -4467,7 +4467,8 @@ const FacetComponent = (props) => {
     setValueFilterPriceChange,
     separatedFilterItem,
     setSeparatedFilterItem,
-    settings
+    settings,
+    scrollElementSelector
   } = props;
   let aliases = {};
   if (filter.value === "hierarchicalProductType")
@@ -4623,8 +4624,7 @@ const FacetComponent = (props) => {
       ] });
     });
   };
-  const scrollElementSelector = `#filter-component-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`;
-  let scrollElement = document.querySelector(scrollElementSelector);
+  let scrollElement = document.querySelector(scrollElementSelector || `#filter-component-standard-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`);
   if (isDisplaySlider) {
     items = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
     let defaultValueMin = valueFilterPriceChange[0] || (items == null ? void 0 : items.min);
@@ -4736,6 +4736,8 @@ const FacetComponent = (props) => {
         }
       ) }, index);
     }) });
+  } else {
+    blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "sledge-instant-search__result-filter-item-no-result", style: filter_option_style, children: "No result..." });
   }
   if (haveNextPage) {
     blockComponent = React__default.cloneElement(
@@ -4837,7 +4839,8 @@ const SearchResultWidget = (props) => {
   const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
   const [generalDataSettings, setGeneralDataSettings] = React__default.useState((sledgeSettings == null ? void 0 : sledgeSettings.general) || {});
   const [clickedFacets, setClickedFacets] = React__default.useState({});
-  const [clickedOpenFilterId, setClickedOpenFilterId] = React__default.useState(null);
+  const [clickedOpenFilterHorizontalId, setClickedOpenFilterHorizontalId] = React__default.useState(null);
+  const [clickedOpenFilterHorizontalMobileId, setClickedOpenFilterHorizontalMobileId] = React__default.useState(null);
   const [separatedFilterItem, setSeparatedFilterItem] = React__default.useState({});
   const debouncedKeyword = useDebounce(keyword, 500);
   let productCardsComponent = null;
@@ -5417,13 +5420,15 @@ const SearchResultWidget = (props) => {
       clickedFacets,
       setClickedFacets,
       parentPreviousState: previousState,
-      clickedOpenFilterId,
-      setClickedOpenFilterId
+      clickedOpenFilterHorizontalId,
+      setClickedOpenFilterHorizontalId,
+      clickedOpenFilterHorizontalMobileId,
+      setClickedOpenFilterHorizontalMobileId
     })
   ] });
 };
 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, _C, _D;
+  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,
@@ -5472,8 +5477,10 @@ const ResultProduct = (props) => {
     clickedFacets,
     setClickedFacets,
     parentPreviousState,
-    clickedOpenFilterId,
-    setClickedOpenFilterId,
+    clickedOpenFilterHorizontalId,
+    setClickedOpenFilterHorizontalId,
+    clickedOpenFilterHorizontalMobileId,
+    setClickedOpenFilterHorizontalMobileId,
     isFirstLoading
   } = props || {};
   const querySortBy = (query == null ? void 0 : query.sortBy) ? query.sortBy : DEFAULT_QUERY_PARAM.SORT_BY;
@@ -5619,7 +5626,6 @@ const ResultProduct = (props) => {
     window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
   };
   const handleOpenFilterVertical = (id) => {
-    setClickedOpenFilterId == null ? void 0 : setClickedOpenFilterId(id === clickedOpenFilterId ? "" : id);
     let valueClickedOpenFilters = clickedOpenFilters;
     if (valueClickedOpenFilters.includes(id)) {
       const findIndex = valueClickedOpenFilters.indexOf(id);
@@ -5835,15 +5841,29 @@ const ResultProduct = (props) => {
       valueText = (_a2 = String(valueText)) == null ? void 0 : _a2.replaceAll(hierarchical_collections_separator, " > ");
     valueText = (_b2 = String(valueText)) == null ? void 0 : _b2.replaceAll("_", " ");
     let aliases = {};
-    if (name === "hierarchicalCollections")
+    let aliasValue = "";
+    let aliasSeparator = "";
+    if (name === "hierarchicalCollections") {
       aliases = settings.collectionAliases || {};
-    if (name === "hierarchicalProductType")
+      aliasSeparator = hierarchicalCollectionsSettings.separator;
+    }
+    if (name === "hierarchicalProductType") {
       aliases = settings.productTypeAliases || {};
+      aliasSeparator = hierarchicalProductTypeSettings.separator;
+    }
+    if (["hierarchicalCollections", "hierarchicalProductType"].includes(name) && aliasSeparator) {
+      const splitedValues = value.split(aliasSeparator);
+      let newSplitedValues = [];
+      for (const splitedValue of splitedValues) {
+        newSplitedValues.push(aliases[splitedValue.trim()] || splitedValue);
+      }
+      aliasValue = newSplitedValues.join(" > ");
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", children: [
         label,
         ": ",
-        aliases[value] || valueText
+        aliasValue || valueText
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "span",
@@ -5866,10 +5886,12 @@ const ResultProduct = (props) => {
       )
     ] }, index);
   };
-  const filterSettings = (filter) => {
+  const filterSettings = ({
+    filter,
+    scrollElementSelector
+  }) => {
     var _a2;
     const { value, display, indexFilter } = filter;
-    let isActive = clickedOpenFilterId === value;
     let items = display.toLowerCase() === "tree" ? createHierarchicalFacet({
       indexValue: value,
       filter,
@@ -5908,7 +5930,8 @@ const ResultProduct = (props) => {
         valueFilterPriceChange,
         setValueFilterPriceChange,
         separatedFilterItem,
-        setSeparatedFilterItem
+        setSeparatedFilterItem,
+        scrollElementSelector
       }
     );
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length))
@@ -5918,7 +5941,7 @@ const ResultProduct = (props) => {
     if (((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.layout) === "vertical" && (allowedFilter == null ? void 0 : allowedFilter.length) === 1)
       classesUlElement == null ? void 0 : classesUlElement.push("sledge-instant-search__result-filter-item-list-just-one");
     let isLastIndex = allowedFilter ? (allowedFilter == null ? void 0 : allowedFilter.length) - 1 === indexFilter : false;
-    return { isActive, isRender, classesUlElement, getFacetComponent, isLastIndex };
+    return { 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: [
@@ -5935,10 +5958,11 @@ const ResultProduct = (props) => {
       });
     }) })
   ] }) : null;
-  const filterVerticalComponents = allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
+  const filterVerticalComponents = ({ filterLayoutType }) => allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
     const { value, label } = filter;
-    const { isRender, classesUlElement, getFacetComponent } = filterSettings(filter);
-    return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: `filter-component-${stringToSlug(value)}`, children: [
+    const filterItemId = `filter-component-${filterLayoutType}-${stringToSlug(value)}`;
+    const { isRender, classesUlElement, getFacetComponent } = filterSettings({ filter, scrollElementSelector: `#${filterItemId} .sledge-instant-search__result-filter-item-list` });
+    return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: filterItemId, 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 }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(value) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
@@ -5946,9 +5970,15 @@ const ResultProduct = (props) => {
       clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() })
     ] }, indexFilter) : null;
   });
-  const filterHorizontalComponents = allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
+  const filterHorizontalComponents = ({ deviceType }) => allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
     const { value, label } = filter;
-    const { isActive, isRender, classesUlElement, getFacetComponent, isLastIndex } = filterSettings(filter);
+    const filterItemId = `filter-component-${deviceType}-${stringToSlug(value)}`;
+    const getValueOpenFilterId = deviceType === "mobile" ? clickedOpenFilterHorizontalMobileId : clickedOpenFilterHorizontalId;
+    const isOpenFilterHorizontal = getValueOpenFilterId === value;
+    const { isRender, classesUlElement, getFacetComponent, isLastIndex } = filterSettings({
+      filter,
+      scrollElementSelector: `#${filterItemId} .sledge-instant-search__result-filter-item-list`
+    });
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Popover,
       {
@@ -5956,17 +5986,30 @@ const ResultProduct = (props) => {
           Button,
           {
             type: "button",
-            onClick: () => setClickedOpenFilterId == null ? void 0 : setClickedOpenFilterId(value),
+            onClick: () => {
+              if (deviceType === "mobile") {
+                setClickedOpenFilterHorizontalMobileId == null ? void 0 : setClickedOpenFilterHorizontalMobileId(value);
+              } else {
+                setClickedOpenFilterHorizontalId == null ? void 0 : setClickedOpenFilterHorizontalId(value);
+              }
+            },
             className: `${isLastIndex ? (allowedFilter == null ? void 0 : allowedFilter.length) % 2 ? "sledge-instant-search__result-filter-trigger-odd" : "sledge-instant-search__result-filter-trigger-even" : ""}`,
             children: [
               label,
-              /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isOpenFilterHorizontal ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
             ]
           }
         ),
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() }) }),
-        withOpenState: false,
-        setIsOpen: (open) => setClickedOpenFilterId == null ? void 0 : setClickedOpenFilterId(!open ? "" : value),
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", id: filterItemId, children: isOpenFilterHorizontal && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() }) }),
+        withOpenState: true,
+        isOpen: isOpenFilterHorizontal,
+        setIsOpen: (open) => {
+          if (deviceType === "mobile") {
+            setClickedOpenFilterHorizontalMobileId == null ? void 0 : setClickedOpenFilterHorizontalMobileId(!open ? "" : value);
+          } else {
+            setClickedOpenFilterHorizontalId == null ? void 0 : setClickedOpenFilterHorizontalId(!open ? "" : value);
+          }
+        },
         hideCloseIcon: true,
         align: "center",
         className: "sledge-instant-search__filter-horizontal-facet-content",
@@ -5993,28 +6036,31 @@ const ResultProduct = (props) => {
       isVisibleLoadMore
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
-  const filterHorizontalBlockComponent = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.enable_on_search) && (allowedFilter == null ? void 0 : 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) && ((_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",
-        {
-          className: "sledge-instant-search__result-filter-horizontal-refine-item sledge-instant-search__result-filter-horizontal-refine-item-clear-all",
-          onClick: handleFilterReset,
-          children: "Clear All"
-        }
-      ),
-      dataClickedFacets.map((itemClickedFacet, index) => {
-        const { label, name, value } = itemClickedFacet;
-        return facetBlockSelected({
-          label,
-          name,
-          value,
-          index
-        });
-      })
-    ] }) : null
-  ] }) }) }) : null;
+  const filterHorizontalBlockComponent = ({ deviceType }) => {
+    var _a2, _b2;
+    return ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.enable_on_search) && (allowedFilter == null ? void 0 : 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({ deviceType }) }),
+      Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_b2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b2.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "sledge-instant-search__result-filter-horizontal-refine-item sledge-instant-search__result-filter-horizontal-refine-item-clear-all",
+            onClick: handleFilterReset,
+            children: "Clear All"
+          }
+        ),
+        dataClickedFacets.map((itemClickedFacet, index) => {
+          const { label, name, value } = itemClickedFacet;
+          return facetBlockSelected({
+            label,
+            name,
+            value,
+            index
+          });
+        })
+      ] }) : null
+    ] }) }) }) : null;
+  };
   const searchInputFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     SearchInputField,
     {
@@ -6039,35 +6085,41 @@ const ResultProduct = (props) => {
       case "standard":
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           searchInputFieldComponent,
-          filterHorizontalBlockComponent
+          filterHorizontalBlockComponent({ deviceType: "mobile" })
         ] });
       default:
         return null;
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.mobile_layout) === "flyout" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.mobile_layout) === "flyout" && /* @__PURE__ */ jsxRuntimeExports.jsx(
       FlyoutSidebar,
       {
         title: language_filter || "Filter",
         content: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           filterVerticalSelected,
-          ((_p = filterVerticalComponents == null ? void 0 : filterVerticalComponents.filter((item) => item)) == null ? void 0 : _p.length) ? filterVerticalComponents : null
+          ((_o = (_n = filterVerticalComponents({
+            filterLayoutType: "flyout"
+          })) == null ? void 0 : _n.filter((item) => item)) == null ? void 0 : _o.length) ? filterVerticalComponents({
+            filterLayoutType: "flyout"
+          }) : null
         ] }),
         open: openFilterFlyoutMobile,
         setOpen: setOpenFilterFlyoutMobile
       }
     ),
-    ((_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) === "horizontal" && (allowedFilter == null ? void 0 : 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": (_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.enable_on_search) && ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "vertical" && !hideFilterWhenOneValue ? !(allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isFirstLoading || (allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isLoadingProduct ? /* @__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: [
+    ((_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 == null ? void 0 : allowedFilter.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent({ deviceType: "desktop" }) }) : 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" && !hideFilterWhenOneValue ? !(allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isFirstLoading || (allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isLoadingProduct ? /* @__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
+        filterVerticalComponents({
+          filterLayoutType: "standard"
+        })
       ] }) }) : 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: [
-            ((_v = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _v.show_total_products) ? summaryTextSkeleton : null,
+            ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.show_total_products) ? summaryTextSkeleton : null,
             searchFieldSkeletonComponent,
             filterHorizontalSkeletonComponent,
             selectOptionSkeletonComponent
@@ -6077,7 +6129,7 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_w = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _w.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
             }
           ),
@@ -6117,7 +6169,7 @@ const ResultProduct = (props) => {
                 language_limit || "Limit",
                 ":"
               ] }),
-              ((_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.allowed_limit) && Boolean((_z = (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.allowed_limit) == null ? void 0 : _z.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",
@@ -6138,7 +6190,7 @@ const ResultProduct = (props) => {
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_A = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _A.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,
@@ -6153,9 +6205,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_vendor,
-                  show_sku: (_C = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _C.show_sku,
-                  show_price: (_D = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _D.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"] : ""
                 },