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

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

@@ -4166,13 +4166,41 @@ const addToCartTrigger = async (data) => {
   });
 };
 const VariantSelector = (props) => {
-  var _a;
-  const { data, setSelectedVariantId, setSelectedVariantStock, setSelectedVariantInventoryManagement, setSelectedVariantInventoryPolicy, sourceApp } = props;
+  var _a, _b, _c;
+  const {
+    data,
+    setSelectedVariantId,
+    setSelectedVariantStock,
+    setSelectedVariantInventoryManagement,
+    setSelectedVariantInventoryPolicy,
+    sourceApp,
+    instantSearchSettings,
+    optionSelectedValue,
+    hasEntryImage
+  } = props;
   const { product } = data || {};
   const { variants } = product || {};
   const { id, handle, url } = product || {};
   const options = (product == null ? void 0 : product.options) ? Object.entries(product.options) : [];
   const images = (product == null ? void 0 : product.images) ?? [];
+  const isSplitProducts = Boolean((_a = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _a.enable);
+  const bySplitProducts = (_b = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _b.by;
+  React__default.useEffect(() => {
+    if (isSplitProducts && optionSelectedValue) {
+      const productCardElement = document.querySelector(`.sledge__product-grid-card[data-product-id="${id}"][data-option-selected-value="${encodeURIComponent(optionSelectedValue)}"]`);
+      if (productCardElement) {
+        const variantColorSwatch = productCardElement.querySelector(`.sledge__product-variant-color-swatch[data-option-value="${encodeURIComponent(optionSelectedValue)}"]`);
+        if (variantColorSwatch) {
+          variantColorSwatch.dispatchEvent(new Event("click", { bubbles: true }));
+        }
+        const variantSelectOption = productCardElement.querySelector(`.sledge__product-variant-size-swatch-select[data-option-name="${bySplitProducts}"]`);
+        if (variantSelectOption) {
+          variantSelectOption.value = optionSelectedValue;
+          variantSelectOption.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+      }
+    }
+  }, [hasEntryImage]);
   const defaultSelected = {};
   function setDefaultFunction() {
     if (!(variants == null ? void 0 : variants.length))
@@ -4190,7 +4218,10 @@ const VariantSelector = (props) => {
   }
   setDefaultFunction();
   function setSelectedOption(element, optionName) {
-    const optionsButton = element.target.offsetParent.querySelector(`.options-button-${stringToSlug(optionName)}`).querySelectorAll(`button`);
+    const optionsButtonElement = element.target.offsetParent.querySelector(`.options-button-${stringToSlug(optionName)}`);
+    if (!optionsButtonElement)
+      return;
+    const optionsButton = optionsButtonElement.querySelectorAll(`button`);
     const defaultSelectedClassChanger = () => {
       optionsButton.forEach((button, index) => {
         button.classList.remove("sledge__product-variant-size-swatch-active");
@@ -4215,7 +4246,7 @@ const VariantSelector = (props) => {
     }
   }
   function setSelectedVariant(element, value, optionIndex) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i;
     const parentCard = element.target.offsetParent;
     const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
     setElementAttribute({
@@ -4223,8 +4254,8 @@ const VariantSelector = (props) => {
       attributeName: `data-selected-option${optionIndex}`,
       value
     });
-    const option1 = `[data-option-1="${stringToSlug((_b = (_a2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a2["data-selected-option1"]) == null ? void 0 : _b.value)}"]`;
-    const option2 = `${((_c = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _c["data-selected-option2"]) ? `[data-option-2="${stringToSlug((_e = (_d = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _d["data-selected-option2"]) == null ? void 0 : _e.value)}"]` : ""}`;
+    const option1 = `[data-option-1="${stringToSlug((_b2 = (_a2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a2["data-selected-option1"]) == null ? void 0 : _b2.value)}"]`;
+    const option2 = `${((_c2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _c2["data-selected-option2"]) ? `[data-option-2="${stringToSlug((_e = (_d = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _d["data-selected-option2"]) == null ? void 0 : _e.value)}"]` : ""}`;
     const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
     const variantId = selectOption.attributes["data-graphql-id"].value;
     const imageId = (_f = selectOption.attributes["data-image-id"]) == null ? void 0 : _f.value;
@@ -4232,11 +4263,11 @@ const VariantSelector = (props) => {
     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 setOther = () => {
-      var _a3, _b2;
+      var _a3, _b3;
       setElementAttribute({
         element: selectedInput,
         attributeName: "data-variant-id",
-        value: ((_b2 = (_a3 = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _a3["data-graphql-id"]) == null ? void 0 : _b2.value) || ""
+        value: ((_b3 = (_a3 = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _a3["data-graphql-id"]) == null ? void 0 : _b3.value) || ""
       });
       setElementAttribute({
         element: selectedInput,
@@ -4289,7 +4320,7 @@ const VariantSelector = (props) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title }, id2);
     }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image) => /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", id: image == null ? void 0 : image.id, value: image == null ? void 0 : image.src }, image == null ? void 0 : image.id)) }),
-    (_a = options == null ? void 0 : options.map) == null ? void 0 : _a.call(options, (option, optionParentIndex) => {
+    (_c = options == null ? void 0 : options.map) == null ? void 0 : _c.call(options, (option, optionParentIndex) => {
       var _a2;
       const optionName = option[0];
       const optionValues = option[1];
@@ -4341,6 +4372,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
                 setSelectedOption(el, optionName);
               },
               title: optionName === "Color" ? null : item,
+              "data-option-value": encodeURIComponent(item),
               children: optionName === "Color" ? null : item
             },
             index
@@ -4356,6 +4388,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
             setSelectedVariant(el, value, optionParentIndex + 1);
             setSelectedOption(el, optionName);
           },
+          "data-option-name": optionName,
           children: optionValues.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: item, children: item }, index))
         }
       ) : "" });
@@ -4383,6 +4416,8 @@ const ProductCard = React__default.memo((props) => {
     generalDataSettings,
     previewSettings,
     isFlyout,
+    instantSearchSettings,
+    optionSelectedValue,
     additionalCardProps
   } = props;
   const {
@@ -4457,105 +4492,51 @@ const ProductCard = React__default.memo((props) => {
       setShowPopupComponent,
       sourceApp,
       forLoopIndex,
-      forLoopIndexWithPage
+      forLoopIndexWithPage,
+      optionSelectedValue: optionSelectedValue || null
     };
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        "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 }) }
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
   } else {
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFlyout ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-flyout", "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-flyout-wishlist-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Trigger,
-        {
-          params: {
-            productId: id,
-            productVariantId: variant_id,
-            productName: title,
-            productVendor: vendor,
-            productSku: sku,
-            productVariantName: variant_title,
-            productLink: url,
-            productImage: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
-            productCurrency: currency,
-            productPrice: price
-          },
-          ...triggerPropAdditional,
-          onAfterAddWishlist,
-          onAfterRemoveWishlist,
-          wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-image-flyout", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "a",
-        {
-          href: url,
-          onClick: () => {
-            if (sourceApp === "instant-search") {
-              productClickTrigger$1({
-                productId: id
-              });
-            } else if (productRecommendationSourceApps.includes(sourceApp)) {
-              productClickTrigger({
-                productId: id,
-                sourceApp
-              });
-            }
-          },
-          className: "sledge__product-grid-card-image-link-flyout",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "img",
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFlyout ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "sledge__product-grid-card-flyout",
+        "data-for-loop-index": forLoopIndex,
+        "data-for-loop-index-with-page": forLoopIndexWithPage,
+        "data-product-id": id,
+        "data-option-selected-value": encodeURIComponent(optionSelectedValue),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-flyout-wishlist-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Trigger,
             {
-              ref: imageRef,
-              ...{
-                src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
-                ["loaded"]: ""
+              params: {
+                productId: id,
+                productVariantId: variant_id,
+                productName: title,
+                productVendor: vendor,
+                productSku: sku,
+                productVariantName: variant_title,
+                productLink: url,
+                productImage: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                productCurrency: currency,
+                productPrice: price
               },
-              alt: "sledge-card-image",
-              loading: "lazy",
-              className: "sledge__product-grid-card-image-featured-image-flyout",
-              onError: ({ currentTarget }) => {
-                if (!currentTarget)
-                  return;
-                currentTarget.onerror = null;
-                currentTarget.src = `${CDN_URL}/images/blank-image.png`;
-              }
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc-flyout", children: [
-        title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "a",
-          {
-            href: url,
-            onClick: () => {
-              if (sourceApp === "instant-search") {
-                productClickTrigger$1({
-                  productId: id
-                });
-              } else if (productRecommendationSourceApps.includes(sourceApp)) {
-                productClickTrigger({
-                  productId: id,
-                  sourceApp
-                });
-              }
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name-flyout", style: display_product_name_style, children: title })
-          }
-        ) : 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) } }),
-          isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "sledge__product-grid-card-compare-at-price-flyout",
-              dangerouslySetInnerHTML: { __html: shopifyFormatMoney(compare_at_price * 100, money_format) }
+              ...triggerPropAdditional,
+              onAfterAddWishlist,
+              onAfterRemoveWishlist,
+              wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
             }
-          )
-        ] }) : null
-      ] })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-image-flyout", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "a",
             {
               href: url,
@@ -4571,186 +4552,273 @@ const ProductCard = React__default.memo((props) => {
                   });
                 }
               },
-              className: "sledge__product-grid-card-image-link",
-              children: [
-                isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-badge-on-sale", children: "ON SALE" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Trigger,
-                  {
-                    params: {
-                      productId: id,
-                      productVariantId: variant_id,
-                      productName: title,
-                      productVendor: vendor,
-                      productSku: sku,
-                      productVariantName: variant_title,
-                      productLink: url,
-                      productImage: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
-                      productCurrency: currency,
-                      productPrice: price
-                    },
-                    ...triggerPropAdditional,
-                    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) ? {
-                      previewSettings
-                    } : {}
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-featured-image-element", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "img",
-                    {
-                      ref: imageRef,
-                      ...hasEntryImage ? {
-                        src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
-                        ["loaded"]: ""
-                      } : {
-                        ["data-src"]: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`
-                      },
-                      alt: "sledge-card-image",
-                      loading: "lazy",
-                      className: "sledge__product-grid-card-image-featured-image",
-                      onError: ({ currentTarget }) => {
-                        if (!currentTarget)
-                          return;
-                        currentTarget.onerror = null;
-                        currentTarget.src = `${CDN_URL}/images/blank-image.png`;
-                      }
-                    }
-                  ),
-                  secondaryImage && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "img",
-                    {
-                      src: secondaryImage == null ? void 0 : secondaryImage.src,
-                      alt: "sledge-card-image",
-                      className: "sledge__product-grid-card-image-featured-image sledge__product-grid-card-image-featured-image--secondary"
-                    }
-                  )
-                ] }),
-                /* @__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(
-                  "img",
-                  {
-                    decoding: "async",
-                    id: image2 == null ? void 0 : image2.id,
-                    height: "270",
-                    loading: "lazy",
-                    src: image2 == null ? void 0 : image2.src,
-                    alt: product == null ? void 0 : product.title,
-                    width: 269.92,
-                    style: { aspectRatio: 269.92 / 270 }
+              className: "sledge__product-grid-card-image-link-flyout",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  ref: imageRef,
+                  ...{
+                    src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                    ["loaded"]: ""
                   },
-                  image2 == null ? void 0 : image2.id
-                )) })
-              ]
+                  alt: "sledge-card-image",
+                  loading: "lazy",
+                  className: "sledge__product-grid-card-image-featured-image-flyout",
+                  onError: ({ currentTarget }) => {
+                    if (!currentTarget)
+                      return;
+                    currentTarget.onerror = null;
+                    currentTarget.src = `${CDN_URL}/images/blank-image.png`;
+                  }
+                }
+              )
             }
-          ),
-          isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", children: language_button_out_of_stock || "Sold out" }) : null
-        ] }),
-        /* @__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.jsxs("div", { className: "sledge__product-grid-card-desc-flyout", children: [
+            title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "a",
+              {
+                href: url,
+                onClick: () => {
+                  if (sourceApp === "instant-search") {
+                    productClickTrigger$1({
+                      productId: id
+                    });
+                  } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                    productClickTrigger({
+                      productId: id,
+                      sourceApp
+                    });
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name-flyout", style: display_product_name_style, children: title })
+              }
+            ) : 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) } }),
               isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
-                  className: "sledge__product-grid-card-compare-at-price",
+                  className: "sledge__product-grid-card-compare-at-price-flyout",
                   dangerouslySetInnerHTML: { __html: shopifyFormatMoney(compare_at_price * 100, money_format) }
                 }
               )
-            ] }) : null,
-            show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
-              "Vendor: ",
-              vendor
             ] }) : null
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "sledge__product-grid-card",
+        "data-for-loop-index": forLoopIndex,
+        "data-for-loop-index-with-page": forLoopIndexWithPage,
+        "data-product-id": id,
+        "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: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "a",
+                {
+                  href: url,
+                  onClick: () => {
+                    if (sourceApp === "instant-search") {
+                      productClickTrigger$1({
+                        productId: id
+                      });
+                    } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                      productClickTrigger({
+                        productId: id,
+                        sourceApp
+                      });
+                    }
+                  },
+                  className: "sledge__product-grid-card-image-link",
+                  children: [
+                    isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-badge-on-sale", children: "ON SALE" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Trigger,
+                      {
+                        params: {
+                          productId: id,
+                          productVariantId: variant_id,
+                          productName: title,
+                          productVendor: vendor,
+                          productSku: sku,
+                          productVariantName: variant_title,
+                          productLink: url,
+                          productImage: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                          productCurrency: currency,
+                          productPrice: price
+                        },
+                        ...triggerPropAdditional,
+                        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) ? {
+                          previewSettings
+                        } : {}
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-featured-image-element", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "img",
+                        {
+                          ref: imageRef,
+                          ...hasEntryImage ? {
+                            src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                            ["loaded"]: ""
+                          } : {
+                            ["data-src"]: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`
+                          },
+                          alt: "sledge-card-image",
+                          loading: "lazy",
+                          className: "sledge__product-grid-card-image-featured-image",
+                          onError: ({ currentTarget }) => {
+                            if (!currentTarget)
+                              return;
+                            currentTarget.onerror = null;
+                            currentTarget.src = `${CDN_URL}/images/blank-image.png`;
+                          }
+                        }
+                      ),
+                      secondaryImage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "img",
+                        {
+                          src: secondaryImage == null ? void 0 : secondaryImage.src,
+                          alt: "sledge-card-image",
+                          className: "sledge__product-grid-card-image-featured-image sledge__product-grid-card-image-featured-image--secondary"
+                        }
+                      )
+                    ] }),
+                    /* @__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(
+                      "img",
+                      {
+                        decoding: "async",
+                        id: image2 == null ? void 0 : image2.id,
+                        height: "270",
+                        loading: "lazy",
+                        src: image2 == null ? void 0 : image2.src,
+                        alt: product == null ? void 0 : product.title,
+                        width: 269.92,
+                        style: { aspectRatio: 269.92 / 270 }
+                      },
+                      image2 == null ? void 0 : image2.id
+                    )) })
+                  ]
+                }
+              ),
+              isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", children: language_button_out_of_stock || "Sold out" }) : null
+            ] }),
+            /* @__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) } }),
+                  isOnSale && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: "sledge__product-grid-card-compare-at-price",
+                      dangerouslySetInnerHTML: { __html: shopifyFormatMoney(compare_at_price * 100, money_format) }
+                    }
+                  )
+                ] }) : null,
+                show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
+                  "Vendor: ",
+                  vendor
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Rating,
+                {
+                  params: {
+                    productId: id
+                  },
+                  size: "xs",
+                  withSkeletonLoading: false,
+                  isScrollToElementWidget: false,
+                  data: dataReviews == null ? void 0 : dataReviews[id]
+                }
+              ) }),
+              title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "a",
+                {
+                  href: url,
+                  onClick: () => {
+                    if (sourceApp === "instant-search") {
+                      productClickTrigger$1({
+                        productId: id
+                      });
+                    } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                      productClickTrigger({
+                        productId: id,
+                        sourceApp
+                      });
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: show_sku && sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                "SKU: ",
+                sku
+              ] }) : null }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                VariantSelector,
+                {
+                  data: {
+                    product: {
+                      ...product,
+                      variants
+                    }
+                  },
+                  setSelectedVariantId,
+                  setSelectedVariantStock,
+                  setSelectedVariantInventoryManagement,
+                  setSelectedVariantInventoryPolicy,
+                  sourceApp,
+                  instantSearchSettings,
+                  optionSelectedValue,
+                  hasEntryImage
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Rating,
-            {
-              params: {
-                productId: id
-              },
-              size: "xs",
-              withSkeletonLoading: false,
-              isScrollToElementWidget: false,
-              data: dataReviews == null ? void 0 : dataReviews[id]
-            }
-          ) }),
-          title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "a",
+          show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
             {
-              href: url,
-              onClick: () => {
-                if (sourceApp === "instant-search") {
-                  productClickTrigger$1({
-                    productId: id
-                  });
-                } else if (productRecommendationSourceApps.includes(sourceApp)) {
-                  productClickTrigger({
-                    productId: id,
-                    sourceApp
-                  });
+              type: "button",
+              colorType: "light",
+              className: "sledge__product-grid-button-add-to-cart",
+              style: {
+                ...display_button_add_to_cart_style,
+                ...isLoadingAddToCart && {
+                  cursor: "wait"
                 }
               },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: show_sku && sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            "SKU: ",
-            sku
-          ] }) : null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            VariantSelector,
-            {
-              data: {
-                product: {
-                  ...product,
-                  variants
+              ...isLoadingAddToCart || isOutOfStock ? {
+                disabled: true
+              } : {
+                onClick: () => {
+                  handleAddToCart && handleAddToCart({
+                    id: selectedVariantId,
+                    quantity: 1
+                  });
                 }
               },
-              setSelectedVariantId,
-              setSelectedVariantStock,
-              setSelectedVariantInventoryManagement,
-              setSelectedVariantInventoryPolicy,
-              sourceApp
+              children: isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "currentColor" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_out_of_stock || "Sold out" })
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                isLoadingAddToCart ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : null,
+                /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "currentColor" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart || "Add To Cart" })
+              ] })
             }
-          )
-        ] })
-      ] }),
-      show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "button",
-          colorType: "light",
-          className: "sledge__product-grid-button-add-to-cart",
-          style: {
-            ...display_button_add_to_cart_style,
-            ...isLoadingAddToCart && {
-              cursor: "wait"
-            }
-          },
-          ...isLoadingAddToCart || isOutOfStock ? {
-            disabled: true
-          } : {
-            onClick: () => {
-              handleAddToCart && handleAddToCart({
-                id: selectedVariantId,
-                quantity: 1
-              });
-            }
-          },
-          children: isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "currentColor" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_out_of_stock || "Sold out" })
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            isLoadingAddToCart ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : null,
-            /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "currentColor" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart || "Add To Cart" })
-          ] })
-        }
-      ) }) : null
-    ] }) });
+          ) }) : null
+        ]
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
 });
@@ -4767,6 +4835,7 @@ const ProductGrid = React__default.memo((props) => {
     onAfterRenderProduct,
     currentColumnGrid,
     previewSettings,
+    instantSearchSettings,
     hitsPerPage,
     currentPage
   } = props;
@@ -4864,21 +4933,23 @@ const ProductGrid = React__default.memo((props) => {
       "data-custom-card": Boolean(props == null ? void 0 : props.cards),
       "data-flyout": isFlyout,
       children: data == null ? void 0 : data.map((item, index) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ProductCard,
-          {
-            item,
-            handleAddToCart,
-            clickedAddToCartId,
-            generalDataSettings,
-            additionalCardProps: {
-              forLoopIndex: index,
-              forLoopIndexWithPage: Number(currentPage) && Number(hitsPerPage) ? index + (Number(currentPage) - 1) * Number(hitsPerPage) : index
-            },
-            ...props
+        var _a, _b, _c, _d, _e;
+        const isSplitProducts = Boolean((_a = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _a.enable);
+        const optionFirst = isSplitProducts && ((_b = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _b.by) ? (_e = (_c = item == null ? void 0 : item.product) == null ? void 0 : _c.options) == null ? void 0 : _e[(_d = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _d.by] : [];
+        const optionFirstValues = (optionFirst == null ? void 0 : optionFirst.length) ? optionFirst : [];
+        const productCardProps = {
+          item,
+          handleAddToCart,
+          clickedAddToCartId,
+          generalDataSettings,
+          additionalCardProps: {
+            forLoopIndex: index,
+            forLoopIndexWithPage: Number(currentPage) && Number(hitsPerPage) ? index + (Number(currentPage) - 1) * Number(hitsPerPage) : index
           },
-          `sledge-product-card_${index}`
-        );
+          instantSearchSettings,
+          ...props
+        };
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isSplitProducts && (optionFirstValues == null ? void 0 : optionFirstValues.length) ? optionFirstValues.map((optionFirstValue, indexFirstValue) => /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { optionSelectedValue: optionFirstValue, ...productCardProps }, `sledge-product-card_${index}_${indexFirstValue}`)) : /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { ...productCardProps }, `sledge-product-card_${index}`) });
       })
     }
   );
@@ -9840,6 +9911,7 @@ const SearchResultWidget = (props) => {
       setAllowedTabs,
       isDesktopLayout,
       previewSettings,
+      instantSearchSettings,
       currentColumnGrid,
       setCurrentColumnGrid
     })
@@ -9926,6 +9998,7 @@ const ResultProduct = React__default.memo((props) => {
     setAllowedTabs,
     isDesktopLayout,
     previewSettings,
+    instantSearchSettings,
     currentColumnGrid,
     setCurrentColumnGrid
   } = props || {};
@@ -10686,6 +10759,7 @@ const ResultProduct = React__default.memo((props) => {
       dataReviews: propsData == null ? void 0 : propsData.reviews,
       currentColumnGrid,
       previewSettings,
+      instantSearchSettings,
       hitsPerPage: hitsPerPageResult,
       currentPage
     }