@sledge-app/react-instant-search 2.0.13 → 2.0.14

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

@@ -4337,7 +4337,7 @@ const ProductCard = React__default.memo((props) => {
     display_button_add_to_cart_style = {}
   } = setting || {};
   const { product, variants } = item || {};
-  const { id, title, image, url, vendor = "", currency, handle } = product || {};
+  const { id, title, image, url, vendor = "", currency, handle, images } = product || {};
   const {
     id: variant_id = "",
     admin_graphql_api_id: variant_admin_graphql_api_id = "",
@@ -4350,6 +4350,7 @@ const ProductCard = React__default.memo((props) => {
   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;
   const defaultSelectedVariantInventoryPolicy = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_policy") ? variants[0].inventory_policy : "";
+  const secondaryImage = images == null ? void 0 : images[1];
   const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
   const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
   const [selectedVariantInventoryManagement, setSelectedVariantInventoryManagement] = React__default.useState(defaultSelectedVariantInventoryManagement);
@@ -4537,27 +4538,37 @@ const ProductCard = React__default.memo((props) => {
                     } : {}
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("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`;
+                /* @__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",
                   {
@@ -8001,8 +8012,8 @@ const ResultWrapper = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.layout, children });
 };
 const ResultData = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data", children });
+  const { children, className = "" } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-data ${className}`, children });
 };
 const ResultDataKeyword = (props) => {
   const { children } = props;
@@ -8299,7 +8310,7 @@ const EnterpriseLayout = (props) => {
       ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.hide_search_bar) ? null : searchField,
       ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { className: openFilterToggle ? "" : "sledge__has-closed-filter-toggle", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-filter-toggle-panel ${"animated"}`, "data-filter-toggle": openFilterToggle ? "open" : "closed", children: filterVertical == null ? void 0 : filterVertical({
         filterLayoutType: "standard",
         isSkeleton: Boolean(!isAllowedFilterTree && isFirstLoading || isAllowedFilterTree && isLoadingProduct || isLoadingSetting)