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

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

@@ -4262,6 +4262,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 +4390,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 +4404,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 +4449,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 +4492,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 +4548,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 +4588,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 +4632,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 +4668,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 +4704,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 +4755,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 +5523,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(() => {
@@ -9043,6 +9056,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 +9115,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;