@getlupa/client 1.0.5 → 1.1.0

package/dist/lupaSearch.umd.js

@@ -7635,16 +7635,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       resetHighlightIndex
     };
   });
-  const _hoisted_1$11 = { id: "lupa-search-box-input-container" };
-  const _hoisted_2$H = { class: "lupa-input-clear" };
-  const _hoisted_3$t = { id: "lupa-search-box-input" };
-  const _hoisted_4$l = ["value"];
+  const _hoisted_1$12 = { id: "lupa-search-box-input-container" };
+  const _hoisted_2$I = { class: "lupa-input-clear" };
+  const _hoisted_3$u = { id: "lupa-search-box-input" };
+  const _hoisted_4$m = ["value"];
   const _hoisted_5$c = ["placeholder"];
   const _hoisted_6$6 = {
     key: 0,
     class: "lupa-close-label"
   };
-  const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxInput",
     props: {
       options: {},
@@ -7721,19 +7721,19 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       __expose({ focus });
       return (_ctx, _cache) => {
-        return openBlock(), createElementBlock("div", _hoisted_1$11, [
-          createBaseVNode("div", _hoisted_2$H, [
+        return openBlock(), createElementBlock("div", _hoisted_1$12, [
+          createBaseVNode("div", _hoisted_2$I, [
             createBaseVNode("div", {
               class: normalizeClass(["lupa-input-clear-content", { "lupa-input-clear-filled": inputValue.value }]),
               onClick: clear2
             }, null, 2)
           ]),
-          createBaseVNode("div", _hoisted_3$t, [
+          createBaseVNode("div", _hoisted_3$u, [
             createBaseVNode("input", {
               class: "lupa-hint",
               value: showHint.value ? suggestedValue.value.item.suggestion : "",
               disabled: ""
-            }, null, 8, _hoisted_4$l),
+            }, null, 8, _hoisted_4$m),
             withDirectives(createBaseVNode("input", mergeProps({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
             }, inputAttributes.value, {
@@ -7761,7 +7761,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxMoreResults",
     props: {
       labels: {},
@@ -7793,9 +7793,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _hoisted_1$10 = { class: "lupa-search-box-history-item" };
-  const _hoisted_2$G = { class: "lupa-search-box-history-item-content" };
-  const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+  const _hoisted_1$11 = { class: "lupa-search-box-history-item" };
+  const _hoisted_2$H = { class: "lupa-search-box-history-item-content" };
+  const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxHistoryItem",
     props: {
       item: {},
@@ -7811,8 +7811,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         emit2("click", { query: props.item });
       };
       return (_ctx, _cache) => {
-        return openBlock(), createElementBlock("div", _hoisted_1$10, [
-          createBaseVNode("div", _hoisted_2$G, [
+        return openBlock(), createElementBlock("div", _hoisted_1$11, [
+          createBaseVNode("div", _hoisted_2$H, [
             createBaseVNode("div", {
               class: normalizeClass(["lupa-search-box-history-item-text", { "lupa-search-box-history-item-highlighted": _ctx.highlighted }]),
               onClick: click2
@@ -7826,11 +7826,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _hoisted_1$$ = {
+  const _hoisted_1$10 = {
     key: 0,
     class: "lupa-search-box-history-panel"
   };
-  const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxHistoryPanel",
     props: {
       options: {}
@@ -7871,9 +7871,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
       };
       return (_ctx, _cache) => {
-        return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$$, [
+        return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$10, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(history), (item, index) => {
-            return openBlock(), createBlock(_sfc_main$17, {
+            return openBlock(), createBlock(_sfc_main$18, {
               key: item,
               item,
               highlighted: index === highlightIndex.value,
@@ -7889,18 +7889,18 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _hoisted_1$_ = ["innerHTML"];
-  const _hoisted_2$F = {
+  const _hoisted_1$$ = ["innerHTML"];
+  const _hoisted_2$G = {
     key: 1,
     "data-cy": "lupa-suggestion-value",
     class: "lupa-suggestion-value"
   };
-  const _hoisted_3$s = {
+  const _hoisted_3$t = {
     key: 2,
     class: "lupa-suggestion-facet",
     "data-cy": "lupa-suggestion-facet"
   };
-  const _hoisted_4$k = {
+  const _hoisted_4$l = {
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
@@ -7908,7 +7908,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-suggestion-facet-value",
     "data-cy": "lupa-suggestion-facet-value"
   };
-  const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxSuggestion",
     props: {
       suggestion: {},
@@ -7944,20 +7944,20 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             class: "lupa-suggestion-value",
             "data-cy": "lupa-suggestion-value",
             innerHTML: _ctx.suggestion.displayHighlight
-          }, null, 8, _hoisted_1$_)) : (openBlock(), createElementBlock("div", _hoisted_2$F, toDisplayString(_ctx.suggestion.display), 1)),
-          _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
-            createBaseVNode("span", _hoisted_4$k, toDisplayString(facetLabel.value), 1),
+          }, null, 8, _hoisted_1$$)) : (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.suggestion.display), 1)),
+          _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
+            createBaseVNode("span", _hoisted_4$l, toDisplayString(facetLabel.value), 1),
             createBaseVNode("span", _hoisted_5$b, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$Z = {
+  const _hoisted_1$_ = {
     id: "lupa-search-box-suggestions",
     "data-cy": "lupa-search-box-suggestions"
   };
-  const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxSuggestions",
     props: {
       items: {},
@@ -8017,9 +8017,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         });
       });
       return (_ctx, _cache) => {
-        return openBlock(), createElementBlock("div", _hoisted_1$Z, [
+        return openBlock(), createElementBlock("div", _hoisted_1$_, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$15, {
+            return openBlock(), createBlock(_sfc_main$16, {
               key: getSuggestionKey(item),
               class: normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
               suggestion: item,
@@ -8047,7 +8047,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }, timeout);
     };
   };
-  const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxSuggestionsWrapper",
     props: {
       panel: {},
@@ -8088,7 +8088,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(_sfc_main$14, {
+        return openBlock(), createBlock(_sfc_main$15, {
           items: searchResult.value,
           highlight: _ctx.panel.highlight,
           queryKey: _ctx.panel.queryKey,
@@ -8166,8 +8166,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     });
     return { dynamicDataIdMap, loading, enhanceSearchResultsWithDynamicData };
   });
-  const _hoisted_1$Y = ["src"];
-  const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+  const _hoisted_1$Z = ["src"];
+  const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     __name: "ProductImage",
     props: {
       item: {},
@@ -8215,12 +8215,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             class: normalizeClass((_b = _ctx.imageClass) != null ? _b : ""),
             src: finalUrl.value,
             onError: replaceWithPlaceholder
-          }, null, 42, _hoisted_1$Y)
+          }, null, 42, _hoisted_1$Z)
         ], 2);
       };
     }
   });
-  const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductImage",
     props: {
       item: {},
@@ -8228,7 +8228,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(_sfc_main$12, {
+        return openBlock(), createBlock(_sfc_main$13, {
           item: _ctx.item,
           options: _ctx.options,
           "wrapper-class": "lupa-search-box-image-wrapper",
@@ -8237,12 +8237,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _hoisted_1$X = ["innerHTML"];
-  const _hoisted_2$E = {
+  const _hoisted_1$Y = ["innerHTML"];
+  const _hoisted_2$F = {
     key: 1,
     class: "lupa-search-box-product-title"
   };
-  const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductTitle",
     props: {
       item: {},
@@ -8262,18 +8262,18 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           key: 0,
           class: "lupa-search-box-product-title",
           innerHTML: title.value
-        }, null, 8, _hoisted_1$X)) : (openBlock(), createElementBlock("div", _hoisted_2$E, [
+        }, null, 8, _hoisted_1$Y)) : (openBlock(), createElementBlock("div", _hoisted_2$F, [
           createBaseVNode("strong", null, toDisplayString(title.value), 1)
         ]));
       };
     }
   });
-  const _hoisted_1$W = ["innerHTML"];
-  const _hoisted_2$D = {
+  const _hoisted_1$X = ["innerHTML"];
+  const _hoisted_2$E = {
     key: 1,
     class: "lupa-search-box-product-description"
   };
-  const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+  const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductDescription",
     props: {
       item: {},
@@ -8293,12 +8293,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           key: 0,
           class: "lupa-search-box-product-description",
           innerHTML: description.value
-        }, null, 8, _hoisted_1$W)) : (openBlock(), createElementBlock("div", _hoisted_2$D, toDisplayString(description.value), 1));
+        }, null, 8, _hoisted_1$X)) : (openBlock(), createElementBlock("div", _hoisted_2$E, toDisplayString(description.value), 1));
       };
     }
   });
-  const _hoisted_1$V = { class: "lupa-search-box-product-price" };
-  const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+  const _hoisted_1$W = { class: "lupa-search-box-product-price" };
+  const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductPrice",
     props: {
       item: {},
@@ -8316,14 +8316,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         );
       });
       return (_ctx, _cache) => {
-        return openBlock(), createElementBlock("div", _hoisted_1$V, [
+        return openBlock(), createElementBlock("div", _hoisted_1$W, [
           createBaseVNode("strong", null, toDisplayString(price.value), 1)
         ]);
       };
     }
   });
-  const _hoisted_1$U = { class: "lupa-search-box-product-regular-price" };
-  const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+  const _hoisted_1$V = { class: "lupa-search-box-product-regular-price" };
+  const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductRegularPrice",
     props: {
       item: {},
@@ -8341,16 +8341,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         );
       });
       return (_ctx, _cache) => {
-        return openBlock(), createElementBlock("div", _hoisted_1$U, toDisplayString(price.value), 1);
+        return openBlock(), createElementBlock("div", _hoisted_1$V, toDisplayString(price.value), 1);
       };
     }
   });
-  const _hoisted_1$T = ["innerHTML"];
-  const _hoisted_2$C = { key: 0 };
-  const _hoisted_3$r = { key: 1 };
-  const _hoisted_4$j = { class: "lupa-search-box-custom-label" };
+  const _hoisted_1$U = ["innerHTML"];
+  const _hoisted_2$D = { key: 0 };
+  const _hoisted_3$s = { key: 1 };
+  const _hoisted_4$k = { class: "lupa-search-box-custom-label" };
   const _hoisted_5$a = { class: "lupa-search-box-custom-text" };
-  const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+  const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
     props: {
       item: {},
@@ -8376,20 +8376,20 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           key: 0,
           class: [className.value, "lupa-search-box-product-custom"],
           innerHTML: text.value
-        }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$T)) : (openBlock(), createElementBlock("div", mergeProps({
+        }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$U)) : (openBlock(), createElementBlock("div", mergeProps({
           key: 1,
           class: [className.value, "lupa-search-box-product-custom"]
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
-          !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$C, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$r, [
-            createBaseVNode("div", _hoisted_4$j, toDisplayString(label.value), 1),
+          !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$D, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
+            createBaseVNode("div", _hoisted_4$k, toDisplayString(label.value), 1),
             createBaseVNode("div", _hoisted_5$a, toDisplayString(text.value), 1)
           ]))
         ], 16));
       };
     }
   });
-  const _hoisted_1$S = ["innerHTML"];
-  const _sfc_main$X = /* @__PURE__ */ defineComponent({
+  const _hoisted_1$T = ["innerHTML"];
+  const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustomHtml",
     props: {
       item: {},
@@ -8409,19 +8409,255 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         return openBlock(), createElementBlock("div", mergeProps({
           class: className.value,
           innerHTML: text.value
-        }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$S);
+        }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$T);
+      };
+    }
+  });
+  var ResultsLayoutEnum = /* @__PURE__ */ ((ResultsLayoutEnum2) => {
+    ResultsLayoutEnum2["GRID"] = "Grid";
+    ResultsLayoutEnum2["LIST"] = "List";
+    return ResultsLayoutEnum2;
+  })(ResultsLayoutEnum || {});
+  const RESULT_ROOT_ID = "lupa-search-results";
+  const SHADOW_ROOT_ID = "lupa-shadow-id";
+  const CONTAINER_ROOT_ID = "lupa-search-container";
+  const scrollToSearchResults = (timeout = 500) => {
+    if (timeout) {
+      setTimeout(() => scrollTo(RESULT_ROOT_ID), timeout);
+    } else {
+      scrollTo(RESULT_ROOT_ID);
+    }
+  };
+  const scrollTo = (elementId) => {
+    var _a, _b;
+    let el = document.getElementById(elementId);
+    const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) == null ? void 0 : _a.shadowRoot;
+    if (!el) {
+      el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementId)) != null ? _b : null;
+    }
+    if (!el) {
+      return;
+    }
+    const searchContainer2 = shadowRoot ? shadowRoot.getElementById(CONTAINER_ROOT_ID) : void 0;
+    const container = searchContainer2 != null ? searchContainer2 : window;
+    container.scrollTo({
+      top: el.offsetTop,
+      behavior: "smooth"
+    });
+  };
+  const disableBodyScroll = () => {
+    const scrollY = window.scrollY;
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+  };
+  const enableBodyScroll = () => {
+    const scrollY = document.body.style.top;
+    document.body.style.position = "";
+    document.body.style.top = "";
+    window.scrollTo(0, parseInt(scrollY || "0") * -1);
+  };
+  const setDocumentTitle = (template, textToInsert = "") => {
+    document.title = addParamsToLabel(template, textToInsert);
+  };
+  const useSearchResultStore = defineStore("searchResult", () => {
+    const searchResult = ref({});
+    const columnCount = ref(2);
+    const addToCartAmount = ref(1);
+    const layout = ref(ResultsLayoutEnum.GRID);
+    const loading = ref(false);
+    const isMobileSidebarVisible = ref(false);
+    const optionsStore = useOptionsStore();
+    const paramsStore = useParamsStore();
+    const facets = computed(() => searchResult.value.facets);
+    const filters = computed(() => searchResult.value.filters);
+    const currentQueryText = computed(() => searchResult.value.searchText);
+    const totalItems = computed(() => searchResult.value.total);
+    const hasResults = computed(() => totalItems.value > 0);
+    const labeledFilters = computed(
+      () => getLabeledFilters(unfoldFilters(filters.value), facets.value)
+    );
+    const displayFilters = computed(() => {
+      var _a, _b;
+      const initialFilters = optionsStore.initialFilters;
+      return (_b = (_a = labeledFilters.value) == null ? void 0 : _a.filter((f2) => !(initialFilters == null ? void 0 : initialFilters[f2.key]))) != null ? _b : [];
+    });
+    const currentFilterCount = computed(() => {
+      var _a, _b;
+      return (_b = (_a = displayFilters.value) == null ? void 0 : _a.length) != null ? _b : 0;
+    });
+    const currentFilterKeys = computed(() => {
+      var _a;
+      return Object.keys((_a = filters.value) != null ? _a : {});
+    });
+    const hasAnyFilter = computed(() => {
+      var _a;
+      return Object.keys((_a = filters.value) != null ? _a : {}).length > 0;
+    });
+    const itemRange = computed(() => {
+      var _a, _b;
+      const limit = (_a = paramsStore.limit) != null ? _a : 0;
+      const offset = (_b = searchResult.value.offset) != null ? _b : 0;
+      return [offset + 1, Math.min(offset + limit, totalItems.value)];
+    });
+    const isPageEmpty = computed(
+      () => {
+        var _a;
+        return hasResults.value && ((_a = searchResult.value.offset) != null ? _a : 0) >= totalItems.value;
+      }
+    );
+    const setSidebarState = ({ visible }) => {
+      if (visible) {
+        disableBodyScroll();
+      } else {
+        enableBodyScroll();
+      }
+      isMobileSidebarVisible.value = visible;
+    };
+    const queryFacet = (_0) => __async(void 0, [_0], function* ({ queryKey, facetKey }) {
+      var _a, _b, _c, _d;
+      const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+      const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+      const result = yield LupaSearchSdk.query(queryKey, query, options);
+      if (!result.success) {
+        return;
+      }
+      const facet = (_b = result.facets) == null ? void 0 : _b.find((f2) => f2.key === facetKey);
+      const facetItems = (_c = facet == null ? void 0 : facet.items) != null ? _c : [];
+      const updatedResult = __spreadProps2(__spreadValues2({}, searchResult.value), {
+        facets: (_d = facets.value) == null ? void 0 : _d.map((f2) => f2.key === facetKey ? __spreadProps2(__spreadValues2({}, f2), { items: facetItems }) : f2)
+      });
+      searchResult.value = updatedResult;
+    });
+    const add2 = (newSearchResult) => {
+      var _a, _b;
+      if (!newSearchResult) {
+        return {
+          searchResult: searchResult.value,
+          pageSize: searchResult.value.limit || 0
+        };
+      }
+      if (typeof document !== "undefined") {
+        setDocumentTitle(
+          (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
+          newSearchResult.searchText
+        );
+      }
+      searchResult.value = newSearchResult;
+      return { searchResult: newSearchResult };
+    };
+    const setColumnCount = ({ width, grid }) => {
+      if (!width || !grid) {
+        return;
+      }
+      if (width <= S_MIN_WIDTH) {
+        columnCount.value = grid.columns.xs;
+      } else if (width > S_MIN_WIDTH && width <= MD_MIN_WIDTH) {
+        columnCount.value = grid.columns.sm;
+      } else if (width > MD_MIN_WIDTH && width <= L_MIN_WIDTH) {
+        columnCount.value = grid.columns.md;
+      } else if (width > L_MIN_WIDTH && width <= XL_MIN_WIDTH) {
+        columnCount.value = grid.columns.l;
+      } else {
+        columnCount.value = grid.columns.xl;
+      }
+    };
+    const setAddToCartAmount = (newAddToCartAmount) => {
+      if (!newAddToCartAmount) {
+        return;
+      }
+      addToCartAmount.value = newAddToCartAmount;
+    };
+    const setLayout = (newLayout) => {
+      if (!newLayout) {
+        return;
+      }
+      layout.value = newLayout;
+    };
+    const setLoading = (state) => {
+      loading.value = state || false;
+    };
+    return {
+      isMobileSidebarVisible,
+      searchResult,
+      columnCount,
+      addToCartAmount,
+      facets,
+      filters,
+      loading,
+      layout,
+      currentQueryText,
+      totalItems,
+      hasResults,
+      labeledFilters,
+      displayFilters,
+      currentFilterCount,
+      currentFilterKeys,
+      hasAnyFilter,
+      itemRange,
+      isPageEmpty,
+      setSidebarState,
+      queryFacet,
+      add: add2,
+      setColumnCount,
+      setAddToCartAmount,
+      setLayout,
+      setLoading
+    };
+  });
+  const _hoisted_1$S = { class: "lupa-search-results-add-to-cart-wrapper" };
+  const _hoisted_2$C = { class: "lupa-search-results-product-addtocart" };
+  const _hoisted_3$r = ["onClick", "disabled"];
+  const _sfc_main$X = /* @__PURE__ */ defineComponent({
+    __name: "SearchBoxProductAddToCart",
+    props: {
+      item: {},
+      options: {},
+      inStock: { type: Boolean }
+    },
+    emits: ["productEvent"],
+    setup(__props, { emit: emit2 }) {
+      const props = __props;
+      const inStockValue = computed(() => {
+        var _a;
+        return (_a = props.inStock) != null ? _a : true;
+      });
+      const searchResultStore = useSearchResultStore();
+      const { addToCartAmount } = storeToRefs(searchResultStore);
+      const loading = ref(false);
+      const label = computed(() => {
+        return props.options.labels.addToCart;
+      });
+      const handleClick = () => __async(this, null, function* () {
+        loading.value = true;
+        yield props.options.action(props.item, addToCartAmount.value);
+        emit2("productEvent", { type: "addToCart" });
+        loading.value = false;
+      });
+      return (_ctx, _cache) => {
+        return openBlock(), createElementBlock("div", _hoisted_1$S, [
+          createBaseVNode("div", _hoisted_2$C, [
+            createBaseVNode("button", {
+              onClick: withModifiers(handleClick, ["stop", "prevent"]),
+              class: normalizeClass(loading.value ? "lupa-add-to-cart-loading" : "lupa-add-to-cart"),
+              "data-cy": "lupa-add-to-cart",
+              type: "button",
+              disabled: !inStockValue.value || loading.value
+            }, toDisplayString(label.value), 11, _hoisted_3$r)
+          ])
+        ]);
       };
     }
   });
   const __default__$4 = {
     components: {
-      SearchBoxProductImage: _sfc_main$11,
-      SearchBoxProductTitle: _sfc_main$10,
-      SearchBoxProductDescription: _sfc_main$$,
-      SearchBoxProductPrice: _sfc_main$_,
-      SearchBoxProductRegularPrice: _sfc_main$Z,
-      SearchBoxProductCustom: _sfc_main$Y,
-      SearchBoxProductCustomHtml: _sfc_main$X
+      SearchBoxProductImage: _sfc_main$12,
+      SearchBoxProductTitle: _sfc_main$11,
+      SearchBoxProductDescription: _sfc_main$10,
+      SearchBoxProductPrice: _sfc_main$$,
+      SearchBoxProductRegularPrice: _sfc_main$_,
+      SearchBoxProductCustom: _sfc_main$Z,
+      SearchBoxProductCustomHtml: _sfc_main$Y,
+      SearchBoxProductAddToCart: _sfc_main$X
     }
   };
   const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$4), {
@@ -8429,7 +8665,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     props: {
       item: {},
       element: {},
-      labels: {}
+      labels: {},
+      isInStock: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -8451,6 +8688,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             return "search-box-product-custom";
           case DocumentElementType.CUSTOM_HTML:
             return "search-box-product-custom-html";
+          case DocumentElementType.ADDTOCART:
+            return "search-box-product-add-to-cart";
         }
         return "search-box-product-title";
       });
@@ -8474,8 +8713,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           item: enhancedItem.value,
           options: _ctx.element,
           labels: _ctx.labels,
-          class: normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value })
-        }, null, 8, ["item", "options", "labels", "class"])) : createCommentVNode("", true);
+          class: normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value }),
+          inStock: _ctx.isInStock
+        }, null, 8, ["item", "options", "labels", "class", "inStock"])) : createCommentVNode("", true);
       };
     }
   }));
@@ -8537,6 +8777,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$R = ["href"];
   const _hoisted_2$B = { class: "lupa-search-box-product-image-section" };
   const _hoisted_3$q = { class: "lupa-search-box-product-details-section" };
+  const _hoisted_4$j = {
+    key: 0,
+    class: "lupa-search-box-product-add-to-cart-section"
+  };
   const _sfc_main$V = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProduct",
     props: {
@@ -8552,6 +8796,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const historyStore = useHistoryStore();
       const trackingStore = useTrackingStore();
       const optionsStore = useOptionsStore();
+      const isInStock = ref(true);
       const { boxRoutingBehavior } = storeToRefs(optionsStore);
       const link = computed(() => {
         var _a, _b;
@@ -8563,7 +8808,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       });
       const detailElements = computed(() => {
         var _a, _b;
-        return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e) => e.type !== DocumentElementType.IMAGE)) != null ? _b : [];
+        return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
+          (e) => e.type !== DocumentElementType.IMAGE && e.type !== DocumentElementType.ADDTOCART
+        )) != null ? _b : [];
       });
       const id = computed(() => {
         if (props.panelOptions.idKey) {
@@ -8581,6 +8828,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         });
         return title2;
       });
+      const addToCartElement = computed(() => {
+        var _a;
+        return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
+      });
       const handleClick = (event) => {
         var _a;
         if (props.panelOptions.titleKey) {
@@ -8610,6 +8861,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         emit2("product-click");
         handleRoutingEvent(link.value, event, boxRoutingBehavior.value === "event");
       };
+      onMounted(() => {
+        checkIfIsInStock();
+      });
+      const checkIfIsInStock = () => __async(this, null, function* () {
+        isInStock.value = props.panelOptions.isInStock ? yield props.panelOptions.isInStock(props.item) : true;
+      });
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("a", {
           class: normalizeClass(["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }]),
@@ -8640,7 +8897,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
                 link: link.value
               }, null, 8, ["item", "element", "labels", "link"]);
             }), 128))
-          ])
+          ]),
+          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+            createVNode(_sfc_main$W, {
+              class: "lupa-search-box-product-element",
+              item: _ctx.item,
+              element: addToCartElement.value,
+              labels: _ctx.labels,
+              link: link.value,
+              isInStock: isInStock.value
+            }, null, 8, ["item", "element", "labels", "link", "isInStock"])
+          ])) : createCommentVNode("", true)
         ], 10, _hoisted_1$R);
       };
     }
@@ -8774,7 +9041,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   };
   const __default__$3 = {
     components: {
-      SearchBoxSuggestionsWrapper: _sfc_main$13,
+      SearchBoxSuggestionsWrapper: _sfc_main$14,
       SearchBoxProductsWrapper: _sfc_main$T
     }
   };
@@ -8924,13 +9191,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               ], 10, _hoisted_2$A);
             }), 128))
           ]),
-          createVNode(_sfc_main$18, {
+          createVNode(_sfc_main$19, {
             labels: labels.value,
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])
         ], 512)) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
-          createVNode(_sfc_main$16, {
+          createVNode(_sfc_main$17, {
             ref: "panel",
             options: _ctx.options.history,
             history: history.value,
@@ -9191,7 +9458,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         var _a2;
         return openBlock(), createElementBlock("div", _hoisted_1$O, [
           createBaseVNode("div", _hoisted_2$z, [
-            createVNode(_sfc_main$19, {
+            createVNode(_sfc_main$1a, {
               options: inputOptions.value,
               suggestedValue: suggestedValue.value,
               "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -9225,197 +9492,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  var ResultsLayoutEnum = /* @__PURE__ */ ((ResultsLayoutEnum2) => {
-    ResultsLayoutEnum2["GRID"] = "Grid";
-    ResultsLayoutEnum2["LIST"] = "List";
-    return ResultsLayoutEnum2;
-  })(ResultsLayoutEnum || {});
-  const RESULT_ROOT_ID = "lupa-search-results";
-  const SHADOW_ROOT_ID = "lupa-shadow-id";
-  const CONTAINER_ROOT_ID = "lupa-search-container";
-  const scrollToSearchResults = (timeout = 500) => {
-    if (timeout) {
-      setTimeout(() => scrollTo(RESULT_ROOT_ID), timeout);
-    } else {
-      scrollTo(RESULT_ROOT_ID);
-    }
-  };
-  const scrollTo = (elementId) => {
-    var _a, _b;
-    let el = document.getElementById(elementId);
-    const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) == null ? void 0 : _a.shadowRoot;
-    if (!el) {
-      el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementId)) != null ? _b : null;
-    }
-    if (!el) {
-      return;
-    }
-    const searchContainer2 = shadowRoot ? shadowRoot.getElementById(CONTAINER_ROOT_ID) : void 0;
-    const container = searchContainer2 != null ? searchContainer2 : window;
-    container.scrollTo({
-      top: el.offsetTop,
-      behavior: "smooth"
-    });
-  };
-  const disableBodyScroll = () => {
-    const scrollY = window.scrollY;
-    document.body.style.position = "fixed";
-    document.body.style.top = `-${scrollY}px`;
-  };
-  const enableBodyScroll = () => {
-    const scrollY = document.body.style.top;
-    document.body.style.position = "";
-    document.body.style.top = "";
-    window.scrollTo(0, parseInt(scrollY || "0") * -1);
-  };
-  const setDocumentTitle = (template, textToInsert = "") => {
-    document.title = addParamsToLabel(template, textToInsert);
-  };
-  const useSearchResultStore = defineStore("searchResult", () => {
-    const searchResult = ref({});
-    const columnCount = ref(2);
-    const addToCartAmount = ref(1);
-    const layout = ref(ResultsLayoutEnum.GRID);
-    const loading = ref(false);
-    const isMobileSidebarVisible = ref(false);
-    const optionsStore = useOptionsStore();
-    const paramsStore = useParamsStore();
-    const facets = computed(() => searchResult.value.facets);
-    const filters = computed(() => searchResult.value.filters);
-    const currentQueryText = computed(() => searchResult.value.searchText);
-    const totalItems = computed(() => searchResult.value.total);
-    const hasResults = computed(() => totalItems.value > 0);
-    const labeledFilters = computed(
-      () => getLabeledFilters(unfoldFilters(filters.value), facets.value)
-    );
-    const displayFilters = computed(() => {
-      var _a, _b;
-      const initialFilters = optionsStore.initialFilters;
-      return (_b = (_a = labeledFilters.value) == null ? void 0 : _a.filter((f2) => !(initialFilters == null ? void 0 : initialFilters[f2.key]))) != null ? _b : [];
-    });
-    const currentFilterCount = computed(() => {
-      var _a, _b;
-      return (_b = (_a = displayFilters.value) == null ? void 0 : _a.length) != null ? _b : 0;
-    });
-    const currentFilterKeys = computed(() => {
-      var _a;
-      return Object.keys((_a = filters.value) != null ? _a : {});
-    });
-    const hasAnyFilter = computed(() => {
-      var _a;
-      return Object.keys((_a = filters.value) != null ? _a : {}).length > 0;
-    });
-    const itemRange = computed(() => {
-      var _a, _b;
-      const limit = (_a = paramsStore.limit) != null ? _a : 0;
-      const offset = (_b = searchResult.value.offset) != null ? _b : 0;
-      return [offset + 1, Math.min(offset + limit, totalItems.value)];
-    });
-    const isPageEmpty = computed(
-      () => {
-        var _a;
-        return hasResults.value && ((_a = searchResult.value.offset) != null ? _a : 0) >= totalItems.value;
-      }
-    );
-    const setSidebarState = ({ visible }) => {
-      if (visible) {
-        disableBodyScroll();
-      } else {
-        enableBodyScroll();
-      }
-      isMobileSidebarVisible.value = visible;
-    };
-    const queryFacet = (_0) => __async(void 0, [_0], function* ({ queryKey, facetKey }) {
-      var _a, _b, _c, _d;
-      const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
-      const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-      const result = yield LupaSearchSdk.query(queryKey, query, options);
-      if (!result.success) {
-        return;
-      }
-      const facet = (_b = result.facets) == null ? void 0 : _b.find((f2) => f2.key === facetKey);
-      const facetItems = (_c = facet == null ? void 0 : facet.items) != null ? _c : [];
-      const updatedResult = __spreadProps2(__spreadValues2({}, searchResult.value), {
-        facets: (_d = facets.value) == null ? void 0 : _d.map((f2) => f2.key === facetKey ? __spreadProps2(__spreadValues2({}, f2), { items: facetItems }) : f2)
-      });
-      searchResult.value = updatedResult;
-    });
-    const add2 = (newSearchResult) => {
-      var _a, _b;
-      if (!newSearchResult) {
-        return {
-          searchResult: searchResult.value,
-          pageSize: searchResult.value.limit || 0
-        };
-      }
-      if (typeof document !== "undefined") {
-        setDocumentTitle(
-          (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
-          newSearchResult.searchText
-        );
-      }
-      searchResult.value = newSearchResult;
-      return { searchResult: newSearchResult };
-    };
-    const setColumnCount = ({ width, grid }) => {
-      if (!width || !grid) {
-        return;
-      }
-      if (width <= S_MIN_WIDTH) {
-        columnCount.value = grid.columns.xs;
-      } else if (width > S_MIN_WIDTH && width <= MD_MIN_WIDTH) {
-        columnCount.value = grid.columns.sm;
-      } else if (width > MD_MIN_WIDTH && width <= L_MIN_WIDTH) {
-        columnCount.value = grid.columns.md;
-      } else if (width > L_MIN_WIDTH && width <= XL_MIN_WIDTH) {
-        columnCount.value = grid.columns.l;
-      } else {
-        columnCount.value = grid.columns.xl;
-      }
-    };
-    const setAddToCartAmount = (newAddToCartAmount) => {
-      if (!newAddToCartAmount) {
-        return;
-      }
-      addToCartAmount.value = newAddToCartAmount;
-    };
-    const setLayout = (newLayout) => {
-      if (!newLayout) {
-        return;
-      }
-      layout.value = newLayout;
-    };
-    const setLoading = (state) => {
-      loading.value = state || false;
-    };
-    return {
-      isMobileSidebarVisible,
-      searchResult,
-      columnCount,
-      addToCartAmount,
-      facets,
-      filters,
-      loading,
-      layout,
-      currentQueryText,
-      totalItems,
-      hasResults,
-      labeledFilters,
-      displayFilters,
-      currentFilterCount,
-      currentFilterKeys,
-      hasAnyFilter,
-      itemRange,
-      isPageEmpty,
-      setSidebarState,
-      queryFacet,
-      add: add2,
-      setColumnCount,
-      setAddToCartAmount,
-      setLayout,
-      setLoading
-    };
-  });
   const createPublicQuery = (queryParams, sortOptions, defaultPageSize) => {
     var _a;
     const publicQuery = {};
@@ -12565,7 +12641,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(_sfc_main$12, {
+        return openBlock(), createBlock(_sfc_main$13, {
           item: _ctx.item,
           options: _ctx.options,
           "wrapper-class": "lupa-search-results-image-wrapper",
@@ -20383,7 +20459,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-recommended-products",
     "data-cy": "lupa-recommended-products"
   };
-  const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     __name: "Recommendations",
     props: {
       options: {}
@@ -26316,7 +26392,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       __expose({ fetch: fetch2 });
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(unref(_sfc_main$1a), {
+        return openBlock(), createBlock(unref(_sfc_main$1b), {
           options: _ctx.recommendationOptions,
           ref_key: "productRecommendations",
           ref: productRecommendations