@sledge-app/react-instant-search 2.0.31 → 2.0.32

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

@@ -4174,6 +4174,8 @@ const VariantSelector = (props) => {
     setSelectedVariantStock,
     setSelectedVariantInventoryManagement,
     setSelectedVariantInventoryPolicy,
+    setSelectedVariantPrice,
+    setSelectedVariantCompareAtPrice,
     sourceApp,
     instantSearchSettings,
     optionSelectedValue,
@@ -4247,7 +4249,7 @@ const VariantSelector = (props) => {
     }
   }
   function setSelectedVariant(element, value, optionIndex) {
-    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i;
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
     const parentCard = element.target.offsetParent;
     const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
     setElementAttribute({
@@ -4263,6 +4265,8 @@ 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 price = (_j = selectOption.attributes["data-price"]) == null ? void 0 : _j.value;
+    const compareAtPrice = (_k = selectOption.attributes["data-compare-at-price"]) == null ? void 0 : _k.value;
     const productLinks = parentCard.querySelectorAll('a[data-product-url="true"]');
     productLinks == null ? void 0 : productLinks.forEach((link) => {
       if (link == null ? void 0 : link.href) {
@@ -4293,6 +4297,16 @@ const VariantSelector = (props) => {
         attributeName: "data-inventory-policy",
         value: inventoryPolicy || ""
       });
+      setElementAttribute({
+        element: selectedInput,
+        attributeName: "data-price",
+        value: price || ""
+      });
+      setElementAttribute({
+        element: selectedInput,
+        attributeName: "data-compare-at-price",
+        value: compareAtPrice || ""
+      });
       if (variantId)
         setSelectedVariantId == null ? void 0 : setSelectedVariantId(variantId);
       if (inventoryQuantity)
@@ -4301,6 +4315,10 @@ const VariantSelector = (props) => {
         setSelectedVariantInventoryManagement == null ? void 0 : setSelectedVariantInventoryManagement(inventoryManagement);
       if (inventoryPolicy)
         setSelectedVariantInventoryPolicy == null ? void 0 : setSelectedVariantInventoryPolicy(inventoryPolicy);
+      if (price)
+        setSelectedVariantPrice == null ? void 0 : setSelectedVariantPrice(price);
+      if (compareAtPrice)
+        setSelectedVariantCompareAtPrice == null ? void 0 : setSelectedVariantCompareAtPrice(compareAtPrice);
       if (imageId)
         parentCard.querySelector(`img.sledge__product-grid-card-image-featured-image`).src = parentCard.querySelector(`div.sledge__product-grid-card-variant-images img[id="${imageId}"]`).src;
     };
@@ -4314,7 +4332,7 @@ const VariantSelector = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-variant-swatch", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", ...defaultSelected, className: "sledge__product-grid-card-selected-option" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("select", { className: "variant-picker sledge__product-grid-card-variant-picker", children: variants == null ? void 0 : variants.map((variant) => {
-      const { title, option1, option2, position, id: id2, admin_graphql_api_id, image_id, inventory_quantity, inventory_management, inventory_policy } = variant;
+      const { title, option1, option2, position, id: id2, admin_graphql_api_id, image_id, inventory_quantity, inventory_management, inventory_policy, price, compare_at_price } = variant;
       let optionAttributes = {
         "data-option-1": stringToSlug(option1),
         "data-option-2": stringToSlug(option2),
@@ -4324,7 +4342,9 @@ const VariantSelector = (props) => {
         "data-position": position,
         "data-id": id2,
         "data-graphql-id": admin_graphql_api_id,
-        "data-image-id": image_id
+        "data-image-id": image_id,
+        "data-price": price,
+        "data-compare-at-price": compare_at_price
       };
       return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title }, id2);
     }) }),
@@ -4405,7 +4425,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
   ] });
 };
 const ProductCard = React__default.memo((props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const {
     item,
     handleAddToCart,
@@ -4451,6 +4471,8 @@ const ProductCard = React__default.memo((props) => {
     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 searchParams = new URLSearchParams(document.location.search);
+  const searchParamsObject = Object.fromEntries(searchParams);
   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;
@@ -4460,6 +4482,8 @@ const ProductCard = React__default.memo((props) => {
   const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
   const [selectedVariantInventoryManagement, setSelectedVariantInventoryManagement] = React__default.useState(defaultSelectedVariantInventoryManagement);
   const [selectedVariantInventoryPolicy, setSelectedVariantInventoryPolicy] = React__default.useState(defaultSelectedVariantInventoryPolicy);
+  const [selectedVariantPrice, setSelectedVariantPrice] = React__default.useState(price);
+  const [selectedVariantCompareAtPrice, setSelectedVariantCompareAtPrice] = React__default.useState(compare_at_price);
   const [hasEntryImage, setHasEntryImage] = React__default.useState(false);
   const [imageRef, imageEntry] = useIntersectionObserver({
     threshold: 0.1,
@@ -4472,10 +4496,17 @@ const ProductCard = React__default.memo((props) => {
   }, [imageEntry]);
   let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
   let isOutOfStock = showOptionOutOfStock ? !Boolean(selectedVariantStock > 0 || selectedVariantInventoryManagement === null || selectedVariantInventoryPolicy === "continue") : false;
-  let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false;
+  let isOnSale = parseFloat(String(selectedVariantCompareAtPrice)) ? parseFloat(String(selectedVariantCompareAtPrice)) > parseFloat(String(selectedVariantPrice)) : false;
   const { money_format } = generalDataSettings || {};
   const { forLoopIndex, forLoopIndexWithPage } = additionalCardProps || {};
   let component = null;
+  const isSplitProducts = Boolean((_b = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _b.enable);
+  const bySplitProducts = (_c = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _c.by;
+  const optionsFiltered = bySplitProducts ? (_g = (_f = (_e = (_d = searchParamsObject == null ? void 0 : searchParamsObject[`options.${bySplitProducts}`]) == null ? void 0 : _d.split) == null ? void 0 : _e.call(_d, ",")) == null ? void 0 : _f.map) == null ? void 0 : _g.call(_f, (item2) => decodeURIComponent(item2)) : [];
+  const hasOptionsFiltered = (optionsFiltered == null ? void 0 : optionsFiltered.length) ? !((_h = optionsFiltered == null ? void 0 : optionsFiltered.includes) == null ? void 0 : _h.call(optionsFiltered, optionSelectedValue)) : false;
+  if (isSplitProducts && hasOptionsFiltered) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
+  }
   if (CardsComponent) {
     const CardsProps = {
       product: {
@@ -4493,8 +4524,8 @@ const ProductCard = React__default.memo((props) => {
         },
         ...dataReviews && Object.keys(dataReviews).length ? {
           review: {
-            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
+            total: ((_i = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _i.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
+            average: ((_k = (_j = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _j.rating) == null ? void 0 : _k.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
           }
         } : {}
       },
@@ -4511,8 +4542,10 @@ const ProductCard = React__default.memo((props) => {
         "data-for-loop-index": forLoopIndex,
         "data-for-loop-index-with-page": forLoopIndexWithPage,
         "data-product-id": id,
-        "data-option-selected-value": encodeURIComponent(optionSelectedValue),
-        dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) }
+        dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) },
+        ...optionSelectedValue ? {
+          ["data-option-selected-value"]: encodeURIComponent(optionSelectedValue)
+        } : {}
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
   } else {
@@ -4523,7 +4556,9 @@ const ProductCard = React__default.memo((props) => {
         "data-for-loop-index": forLoopIndex,
         "data-for-loop-index-with-page": forLoopIndexWithPage,
         "data-product-id": id,
-        "data-option-selected-value": encodeURIComponent(optionSelectedValue),
+        ...optionSelectedValue ? {
+          ["data-option-selected-value"]: encodeURIComponent(optionSelectedValue)
+        } : {},
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-flyout-wishlist-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Trigger,
@@ -4607,12 +4642,12 @@ const ProductCard = React__default.memo((props) => {
               }
             ) : null,
             show_price ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-price-flyout", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: display_price_style, dangerouslySetInnerHTML: { __html: shopifyFormatMoney(price * 100, money_format) } }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: display_price_style, dangerouslySetInnerHTML: { __html: shopifyFormatMoney(selectedVariantPrice * 100, money_format) } }),
               isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
                   className: "sledge__product-grid-card-compare-at-price-flyout",
-                  dangerouslySetInnerHTML: { __html: shopifyFormatMoney(compare_at_price * 100, money_format) }
+                  dangerouslySetInnerHTML: { __html: shopifyFormatMoney(selectedVariantCompareAtPrice * 100, money_format) }
                 }
               )
             ] }) : null
@@ -4626,7 +4661,9 @@ const ProductCard = React__default.memo((props) => {
         "data-for-loop-index": forLoopIndex,
         "data-for-loop-index-with-page": forLoopIndexWithPage,
         "data-product-id": id,
-        "data-option-selected-value": encodeURIComponent(optionSelectedValue),
+        ...optionSelectedValue ? {
+          ["data-option-selected-value"]: encodeURIComponent(optionSelectedValue)
+        } : {},
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
@@ -4669,7 +4706,7 @@ const ProductCard = React__default.memo((props) => {
                         onAfterAddWishlist,
                         onAfterRemoveWishlist,
                         wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id],
-                        ...objectPresent(previewSettings) && ((_f = (_e = previewSettings == null ? void 0 : previewSettings.settings) == null ? void 0 : _e.general) == null ? void 0 : _f.use_dummy_data) ? {
+                        ...objectPresent(previewSettings) && ((_m = (_l = previewSettings == null ? void 0 : previewSettings.settings) == null ? void 0 : _l.general) == null ? void 0 : _m.use_dummy_data) ? {
                           previewSettings
                         } : {}
                       }
@@ -4705,7 +4742,7 @@ const ProductCard = React__default.memo((props) => {
                         }
                       )
                     ] }),
-                    /* @__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(
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: (_o = (_n = product == null ? void 0 : product.images) == null ? void 0 : _n.map) == null ? void 0 : _o.call(_n, (image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "img",
                       {
                         decoding: "async",
@@ -4727,12 +4764,12 @@ const ProductCard = React__default.memo((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.jsxs("div", { className: "sledge__product-grid-card-price", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: display_price_style, dangerouslySetInnerHTML: { __html: shopifyFormatMoney(price * 100, money_format) } }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: display_price_style, dangerouslySetInnerHTML: { __html: shopifyFormatMoney(selectedVariantPrice * 100, money_format) } }),
                   isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "div",
                     {
                       className: "sledge__product-grid-card-compare-at-price",
-                      dangerouslySetInnerHTML: { __html: shopifyFormatMoney(compare_at_price * 100, money_format) }
+                      dangerouslySetInnerHTML: { __html: shopifyFormatMoney(selectedVariantCompareAtPrice * 100, money_format) }
                     }
                   )
                 ] }) : null,
@@ -4790,6 +4827,8 @@ const ProductCard = React__default.memo((props) => {
                   setSelectedVariantStock,
                   setSelectedVariantInventoryManagement,
                   setSelectedVariantInventoryPolicy,
+                  setSelectedVariantPrice,
+                  setSelectedVariantCompareAtPrice,
                   sourceApp,
                   instantSearchSettings,
                   optionSelectedValue,