@sledge-app/react-instant-search 2.0.28 → 2.0.30

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

@@ -185,7 +185,8 @@ const OBJECT_DATA_STRING_KEY = {
   ACCEPTED_FILETYPE_MEDIA: "{{ accepted_filetype_media }}",
   MAX_SIZE_MEDIA: "{{ max_size_media }}",
   FILTER_TITLE: "{{ filter_title }}",
-  PRICE_MAX_MONEY_FORMAT: "{{ price_max_money_format }}"
+  PRICE_MAX_MONEY_FORMAT: "{{ price_max_money_format }}",
+  LANGUAGE_REVIEW_PLURAL_SINGULAR: "{{ language_review_plural_singular }}"
 };
 const ELEMENT_ID = {
   PRODUCT_REVIEW: {
@@ -4262,6 +4263,14 @@ const VariantSelector = (props) => {
     const inventoryQuantity = (_g = selectOption.attributes["data-inventory-quantity"]) == null ? void 0 : _g.value;
     const inventoryManagement = (_h = selectOption.attributes["data-inventory-management"]) == null ? void 0 : _h.value;
     const inventoryPolicy = (_i = selectOption.attributes["data-inventory-policy"]) == null ? void 0 : _i.value;
+    const productLinks = parentCard.querySelectorAll('a[data-product-url="true"]');
+    productLinks == null ? void 0 : productLinks.forEach((link) => {
+      if (link == null ? void 0 : link.href) {
+        const url2 = new URL(link.href);
+        url2.searchParams.set("variant", variantId == null ? void 0 : variantId.replace(/^gid:\/\/shopify\/ProductVariant\/(\d+)$/, "$1"));
+        link.href = url2.toString();
+      }
+    });
     const setOther = () => {
       var _a3, _b3;
       setElementAttribute({
@@ -4382,7 +4391,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
       ] }, optionParentIndex) : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "select",
         {
-          className: "sledge__product-variant-size-swatch-select",
+          className: `sledge__product-variant-size-swatch-select options-button-${stringToSlug(optionName)}`,
           onChange: (el) => {
             let { value } = el.target;
             setSelectedVariant(el, value, optionParentIndex + 1);
@@ -4396,7 +4405,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
   ] });
 };
 const ProductCard = React__default.memo((props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     item,
     handleAddToCart,
@@ -4441,6 +4450,7 @@ const ProductCard = React__default.memo((props) => {
     compare_at_price = "",
     sku = ""
   } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
+  const productUrl = `${url}?variant=${(_a = variants == null ? void 0 : variants[0]) == null ? void 0 : _a.id}`;
   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 defaultSelectedVariantInventoryManagement = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_management") ? variants[0].inventory_management : null;
@@ -4483,8 +4493,8 @@ const ProductCard = React__default.memo((props) => {
         },
         ...dataReviews && Object.keys(dataReviews).length ? {
           review: {
-            total: ((_a = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _a.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
-            average: ((_c = (_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.rating) == null ? void 0 : _c.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
+            total: ((_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
+            average: ((_d = (_c = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _c.rating) == null ? void 0 : _d.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
           }
         } : {}
       },
@@ -4539,7 +4549,8 @@ const ProductCard = React__default.memo((props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-image-flyout", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "a",
             {
-              href: url,
+              href: productUrl,
+              "data-product-url": "true",
               onClick: () => {
                 if (sourceApp === "instant-search") {
                   productClickTrigger$1({
@@ -4578,7 +4589,8 @@ const ProductCard = React__default.memo((props) => {
             title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               "a",
               {
-                href: url,
+                href: productUrl,
+                "data-product-url": "true",
                 onClick: () => {
                   if (sourceApp === "instant-search") {
                     productClickTrigger$1({
@@ -4621,7 +4633,8 @@ const ProductCard = React__default.memo((props) => {
               /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "a",
                 {
-                  href: url,
+                  href: productUrl,
+                  "data-product-url": "true",
                   onClick: () => {
                     if (sourceApp === "instant-search") {
                       productClickTrigger$1({
@@ -4656,7 +4669,7 @@ const ProductCard = React__default.memo((props) => {
                         onAfterAddWishlist,
                         onAfterRemoveWishlist,
                         wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id],
-                        ...objectPresent(previewSettings) && ((_e = (_d = previewSettings == null ? void 0 : previewSettings.settings) == null ? void 0 : _d.general) == null ? void 0 : _e.use_dummy_data) ? {
+                        ...objectPresent(previewSettings) && ((_f = (_e = previewSettings == null ? void 0 : previewSettings.settings) == null ? void 0 : _e.general) == null ? void 0 : _f.use_dummy_data) ? {
                           previewSettings
                         } : {}
                       }
@@ -4692,7 +4705,7 @@ const ProductCard = React__default.memo((props) => {
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: (_g = (_f = product == null ? void 0 : product.images) == null ? void 0 : _f.map) == null ? void 0 : _g.call(_f, (image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: (_h = (_g = product == null ? void 0 : product.images) == null ? void 0 : _g.map) == null ? void 0 : _h.call(_g, (image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "img",
                       {
                         decoding: "async",
@@ -4743,7 +4756,8 @@ const ProductCard = React__default.memo((props) => {
               title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "a",
                 {
-                  href: url,
+                  href: productUrl,
+                  "data-product-url": "true",
                   onClick: () => {
                     if (sourceApp === "instant-search") {
                       productClickTrigger$1({
@@ -5510,7 +5524,7 @@ const DotButton = (props) => {
 };
 const FlyoutSidebar$1 = "";
 const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position = "left", className = "", withBlurEffect = false }) => {
-  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(false);
   const [isScrollAtBottom, setIsScrollAtBottom] = React__default.useState(false);
   const contentContainerRef = React__default.useRef(null);
   React__default.useLayoutEffect(() => {
@@ -7708,7 +7722,7 @@ const Facet = (props) => {
     ...filter_option_text_transform && { textTransform: filter_option_text_transform }
   };
   let { value, label, display, indexFilter, items, settings: filterSettings } = filter;
-  const { show_search, auto_select_search, hide_filter_list } = filterSettings || {};
+  const { show_search, auto_select_search, hide_filter_list, show_all_children_items } = filterSettings || {};
   const show_filter_list_when_search = !hide_filter_list;
   if (isFirstLoading)
     return null;
@@ -7834,6 +7848,7 @@ const Facet = (props) => {
       const isFacetHierarchical = Object.hasOwn(facetValue, "children");
       const isHasChildren = isFacetHierarchical && (children == null ? void 0 : children.length);
       const isChecked = Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(itemValue)));
+      const isShowAllChildrenItems = show_all_children_items ? isHasChildren : isHasChildren && isChecked;
       const { haveNextPage: haveNextPage2, currentItems: currentItems2 } = handleFacetLoadMore({
         facetItems: children
       });
@@ -7852,7 +7867,7 @@ const Facet = (props) => {
               motion.div,
               {
                 initial: false,
-                animate: isChecked ? "open" : "closed",
+                animate: isShowAllChildrenItems ? "open" : isChecked ? "open" : "closed",
                 variants: ROTATE_FILTER_ARROW_ANIMATION,
                 className: "sledge-instant-search__result-filter-checkbox-item-level-arrow",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" })
@@ -7886,7 +7901,7 @@ const Facet = (props) => {
           },
           key
         ),
-        isHasChildren && isChecked ? haveNextPage2 ? React__default.cloneElement(
+        isShowAllChildrenItems ? haveNextPage2 ? React__default.cloneElement(
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             blockComponentChildren,
             loadMoreComponent
@@ -9043,6 +9058,8 @@ const SearchResultWidget = (props) => {
   const querySortBy = (query == null ? void 0 : query.sortBy) ? query.sortBy : DEFAULT_QUERY_PARAM.SORT_BY;
   const queryPage = (query == null ? void 0 : query.page) ? query.page : DEFAULT_QUERY_PARAM.PAGE;
   const queryLimit = (query == null ? void 0 : query.limit) ? query.limit : DEFAULT_QUERY_PARAM.LIMIT;
+  const desktopColumns = localStorage.getItem(LOCAL_STORAGE_KEY.GRID_DESKTOP_COLUMN) || "column-3";
+  const mobileColumns = localStorage.getItem(LOCAL_STORAGE_KEY.GRID_MOBILE_COLUMN) || "column-2";
   const { collectionId } = params || {};
   const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
   const { generalPreviewSettings, instantSearchPreviewSettings, previewSettings } = usePreviewSettings({
@@ -9100,7 +9117,10 @@ const SearchResultWidget = (props) => {
   const [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
   const [valueFilterOnSaleChange, setValueFilterOnSaleChange] = React__default.useState([]);
   const [valueFilterSliderOthers, setValueFilterSliderOthers] = React__default.useState({});
-  const [currentColumnGrid, setCurrentColumnGrid] = React__default.useState(null);
+  const [currentColumnGrid, setCurrentColumnGrid] = React__default.useState({
+    desktop: desktopColumns,
+    mobile: mobileColumns
+  });
   const debouncedKeyword = useDebounce(keyword, 500);
   let productCardsComponent = null;
   let collectionCardsComponent = null;