@sledge-app/react-instant-search 1.0.4 → 1.0.6

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

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-af52d0f5.js";
+import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-efe38901.js";
 import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
 import "react-dom";
@@ -2347,6 +2347,51 @@ const ProductGrid = ({
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
     let isLoadingAddToCart = clickedAddToCartId == variant_id;
     let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !variants[0].inventory_quantity && showOptionOutOfStock : false;
+    const options = (product == null ? void 0 : product.options) ? Object.entries(product.options) : [];
+    const images = (product == null ? void 0 : product.images) ?? [];
+    const defaultSelected = {};
+    function setDefaultFunction() {
+      if (!(variants == null ? void 0 : variants.length))
+        return;
+      defaultSelected["data-product-handle"] = product.handle;
+      defaultSelected["data-selected-option1"] = variants[0].option1;
+      if (variants[0].option2) {
+        defaultSelected["data-selected-option2"] = variants[0].option2;
+      }
+      defaultSelected["data-variant-id"] = variants[0].admin_graphql_api_id;
+    }
+    setDefaultFunction();
+    const defaultSelectedVariantId = (variants == null ? void 0 : variants.length) ? variants[0].admin_graphql_api_id : "";
+    const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
+    function setSelectedVariant(element, value, optionIndex) {
+      var _a2;
+      const selectedInput = element.target.parentNode.parentNode.firstChild;
+      const parentCard = element.target.offsetParent;
+      const setOptionAttribute = () => {
+        selectedInput.attributes[`data-selected-option${optionIndex}`].value = value;
+      };
+      setOptionAttribute();
+      const option1 = `[data-option-1="${selectedInput.attributes["data-selected-option1"].value}"]`;
+      const option2 = `${selectedInput.attributes["data-selected-option2"] ? `[data-option-2="${selectedInput.attributes["data-selected-option2"].value}"]` : ""}`;
+      const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
+      const variantId = selectOption.attributes["data-graphql-id"].value;
+      const imageId = (_a2 = selectOption.attributes["data-image-id"]) == null ? void 0 : _a2.value;
+      const setOther = () => {
+        selectedInput.attributes[`data-variant-id`].value = selectOption.attributes["data-graphql-id"].value;
+        if (variantId)
+          setSelectedVariantId(variantId);
+        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;
+      };
+      setOther();
+      const result = {
+        variantId,
+        imageId
+      };
+      return result;
+    }
     const getCards = cards ? cards({
       product: {
         ...product,
@@ -2402,7 +2447,21 @@ const ProductGrid = ({
                     wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy", className: "sledge__product-grid-card-image-featured-image" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((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
+                )) })
               ]
             }
           ),
@@ -2414,9 +2473,9 @@ const ProductGrid = ({
               currency,
               price
             ] }) }) : null,
-            show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", children: [
+            show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
               "Vendor: ",
-              (vendor == null ? void 0 : vendor.length) > 5 ? `${String(vendor).substring(0, 5)}...` : vendor
+              vendor
             ] }) : null
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2444,7 +2503,49 @@ const ProductGrid = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: show_sku && sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
             "SKU: ",
             sku
-          ] }) : null })
+          ] }) : null }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-variant-swatch", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", ...defaultSelected, className: "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: title2, option1, option2, position, id: id2, admin_graphql_api_id, image_id } = variant;
+              let optionAttributes = {
+                "data-option-1": option1,
+                "data-option-2": option2,
+                "data-position": position,
+                "data-id": id2,
+                "data-graphql-id": admin_graphql_api_id,
+                "data-image-id": image_id
+              };
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title2 }, id2);
+            }) }),
+            options == null ? void 0 : options.map((option, optionParentIndex) => {
+              const optionName = option[0];
+              const optionValues = option[1];
+              const [selectedOption, setSelectedOption] = React__default.useState(optionValues[0]);
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-variant-size-swatch-flex", children: optionValues.map((item2, index2) => {
+                const defaultOptionClass = `
+                ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""} sledge__product-variant-size-swatch`;
+                const colorOptionClass = `${selectedOption === item2 ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
+                    style: {
+                      backgroundColor: optionName === "Color" ? item2 : null
+                    },
+                    onClick: (el) => {
+                      setSelectedVariant(el, item2, optionParentIndex + 1);
+                      setSelectedOption(item2);
+                    },
+                    title: optionName === "Color" ? null : item2,
+                    children: optionName === "Color" ? null : item2
+                  },
+                  index2
+                );
+              }) }, optionParentIndex) });
+            })
+          ] })
         ] })
       ] }),
       show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2462,7 +2563,7 @@ const ProductGrid = ({
             disabled: true
           } : {
             onClick: () => handleAddToCart({
-              id: variant_id,
+              id: selectedVariantId,
               quantity: 1
             })
           },
@@ -3293,7 +3394,7 @@ const SearchResultWidget = (props) => {
     data: propsData,
     sledgeSettings
   } = props;
-  const { keyword: queryKeyword = "" } = query || {};
+  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : "q";
   const { collectionId } = params || {};
   let productCardsComponent = null;
   let collectionCardsComponent = null;
@@ -3852,7 +3953,7 @@ const ResultProduct = (props) => {
     data: propsData,
     settings
   } = props || {};
-  const { keyword: queryKeyword = "" } = query || {};
+  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : "q";
   const { collectionId } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);