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

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

@@ -2256,7 +2256,7 @@ const SearchIconWidget = (props) => {
   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 OtherIndexLists = ({ listsComponent, name, items, isComponentJsVersion = false }) => {
+const OtherIndexLists = ({ listsComponent, name, items, isComponentJsVersion }) => {
   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 }),
@@ -3086,6 +3086,7 @@ const SearchResultWidget = (props) => {
       colorSwatches,
       defaultSort,
       showOutOfStock,
+      query,
       data,
       separateJsVersionComponent,
       productCardsComponent,
@@ -3117,6 +3118,7 @@ const ResultProduct = (props) => {
     colorSwatches,
     defaultSort,
     showOutOfStock,
+    query,
     data,
     separateJsVersionComponent,
     productCardsComponent,
@@ -3130,6 +3132,7 @@ const ResultProduct = (props) => {
     onAfterRemoveWishlist,
     onAfterRenderProduct
   } = props || {};
+  const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -3144,6 +3147,7 @@ const ResultProduct = (props) => {
       "variants.inventory_quantity": "> 0"
     } : {}
   });
+  const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
   const [searchResult, setSearchResult] = React__default.useState([]);
   const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
   const [currentPage, setCurrentPage] = React__default.useState(1);
@@ -3199,6 +3203,39 @@ const ResultProduct = (props) => {
     ...filter_button_font_weight && { fontWeight: filter_button_font_weight },
     ...filter_button_text_transform && { textTransform: filter_button_text_transform }
   });
+  const detectQueryStringFilter = (facetsQueryStringObject) => {
+    const searchParams = new URLSearchParams(document.location.search);
+    const searchParamsObject = Object.fromEntries(searchParams);
+    for (const searchParamsKey in searchParamsObject) {
+      let ifFacetsQueryStringObject = (facets == null ? void 0 : facets.length) && facets.includes(searchParamsKey);
+      if (ifFacetsQueryStringObject)
+        facetsQueryStringObject[searchParamsKey] = searchParamsObject[searchParamsKey].split(",");
+    }
+    if (Object.keys(facetsQueryStringObject).length)
+      setClickedFacets(facetsQueryStringObject);
+    return facetsQueryStringObject;
+  };
+  const handleQueryStringFilter = (valueClickedFacets) => {
+    var _a2;
+    const searchParams = new URLSearchParams(document.location.search);
+    const searchParamsObject = Object.fromEntries(searchParams);
+    let otherQueryStringObject = {};
+    for (const searchParamsKey in searchParamsObject) {
+      let ifOtherQueryStringObject = (facets == null ? void 0 : facets.length) && !facets.includes(searchParamsKey);
+      if (ifOtherQueryStringObject)
+        otherQueryStringObject[searchParamsKey] = searchParamsObject[searchParamsKey];
+    }
+    let facetQueryStringObject = {};
+    for (const valueClickedFacetsKey in valueClickedFacets) {
+      if ((_a2 = valueClickedFacets[valueClickedFacetsKey]) == null ? void 0 : _a2.length)
+        otherQueryStringObject[valueClickedFacetsKey] = valueClickedFacets[valueClickedFacetsKey];
+    }
+    const newQueryString = new URLSearchParams({
+      ...otherQueryStringObject,
+      ...facetQueryStringObject
+    }).toString();
+    window.history.pushState(null, "", `${document.location.pathname}${(newQueryString == null ? void 0 : newQueryString.length) ? `?${newQueryString}` : ""}`);
+  };
   const handleChangeSort = (label, value) => {
     setIsOpenSort(false);
     setClickedSortName(label);
@@ -3214,6 +3251,8 @@ const ResultProduct = (props) => {
   const handleFilterReset = () => {
     setIsFilterChanged(true);
     setClickedFacets({});
+    setTriggerClickedFacets(!triggerClickedFacets);
+    handleQueryStringFilter({});
     setValueFilterPriceChange([]);
     setTimeout(() => {
       setIsFilterChanged(false);
@@ -3244,12 +3283,15 @@ const ResultProduct = (props) => {
         }
       }
     }
-    setClickedFacets({
+    let valueClickedFacets = {
       ...clickedFacets,
       ...{
         [parentId]: facets2
       }
-    });
+    };
+    handleQueryStringFilter(valueClickedFacets);
+    setClickedFacets(valueClickedFacets);
+    setTriggerClickedFacets(!triggerClickedFacets);
     setTimeout(() => {
       setIsFilterChanged(false);
     }, 10);
@@ -3293,8 +3335,9 @@ const ResultProduct = (props) => {
     if (isRefreshPage)
       setCurrentPage(1);
     setIsLoading(true);
+    let detectClickedFacets = detectQueryStringFilter(clickedFacets);
     let response;
-    let filters = Object.entries(clickedFacets).map((facet) => {
+    let filters = Object.entries(detectClickedFacets).map((facet) => {
       var _a2, _b2;
       if ((facet == null ? void 0 : facet.length) && facet[1].length) {
         let value = facet[0];
@@ -3345,6 +3388,12 @@ const ResultProduct = (props) => {
   const handlePageChange = (page) => {
     setCurrentPage(page);
   };
+  const handleChangeKeyword = (value) => {
+    const searchParams = new URLSearchParams(document.location.search);
+    searchParams.set(queryKeyword, value);
+    setKeyword && setKeyword(value);
+    window.history.pushState(null, "", `${document.location.pathname}?${searchParams.toString()}`);
+  };
   React__default.useEffect(() => {
     let isRefreshSearchResult = Boolean(
       previousState && ((previousState == null ? void 0 : previousState.keyword) !== keyword || (previousState == null ? void 0 : previousState.clickedLimitId) !== clickedLimitId || (previousState == null ? void 0 : previousState.clickedFacets) !== clickedFacets)
@@ -3357,7 +3406,7 @@ const ResultProduct = (props) => {
     } else {
       handleSearchResult(isRefreshSearchResult);
     }
-  }, [clickedSortId, clickedLimitId, clickedFacets, keyword, currentPage, clickedTabIndexId]);
+  }, [clickedSortId, clickedLimitId, triggerClickedFacets, keyword, currentPage, clickedTabIndexId]);
   React__default.useEffect(() => {
     handleAllowedFilter();
   }, [allowedFilters, searchResultFacets, totalSearchResult]);
@@ -3608,8 +3657,8 @@ const ResultProduct = (props) => {
               icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
               placeholder: "Search products...",
               value: keyword,
-              onChange: ({ value }) => setKeyword && setKeyword(value),
-              onResetField: () => setKeyword && setKeyword(""),
+              onChange: ({ value }) => handleChangeKeyword(value),
+              onResetField: () => handleChangeKeyword(""),
               className: "sledge-instant-search__result-data-keyword-form",
               withClearField: true
             }