@getlupa/vue 0.14.3 → 0.14.5

package/dist/lupaSearch.mjs

@@ -49,7 +49,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { toRaw, isRef, isReactive, toRef, effectScope, ref, markRaw, hasInjectionContext, inject, getCurrentInstance, watch, reactive, nextTick, computed, unref, getCurrentScope, onScopeDispose, toRefs, defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, withDirectives, mergeProps, vModelText, createCommentVNode, toDisplayString, onMounted, onBeforeMount, Fragment, renderList, createBlock, onBeforeUnmount, Transition, withCtx, toHandlers, withModifiers, resolveDynamicComponent, renderSlot, normalizeStyle, createSlots, createVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, resolveComponent, vModelSelect, h as h$1, provide, cloneVNode } from "vue";
+import { toRaw, isRef, isReactive, toRef, effectScope, ref, markRaw, hasInjectionContext, inject, getCurrentInstance, watch, reactive, nextTick, computed, unref, getCurrentScope, onScopeDispose, toRefs, defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, withDirectives, mergeProps, vModelText, createCommentVNode, toDisplayString, onMounted, onBeforeMount, Fragment, renderList, createBlock, onBeforeUnmount, normalizeStyle, Transition, withCtx, toHandlers, withModifiers, resolveDynamicComponent, renderSlot, createSlots, createVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, resolveComponent, vModelSelect, h as h$1, provide, cloneVNode } from "vue";
 var isVue2 = false;
 function set(target, key, val) {
   if (Array.isArray(target)) {
@@ -3595,6 +3595,34 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const generateGridTemplate = (elements) => {
+  const indexedElements = elements.map((el, index) => __spreadProps(__spreadValues({}, el), { index }));
+  if (!indexedElements.length || !indexedElements.every((el) => el.gridArea === "left" || el.gridArea === "right")) {
+    return void 0;
+  }
+  let leftElements = indexedElements.filter((el) => el.gridArea === "left");
+  let rightElements = indexedElements.filter((el) => el.gridArea === "right");
+  if (!leftElements.length && !rightElements.length) {
+    return "";
+  } else if (!leftElements.length) {
+    leftElements = rightElements;
+  } else if (!rightElements.length) {
+    rightElements = leftElements;
+  }
+  const totalRows = Math.max(leftElements.length, rightElements.length);
+  const gridTemplate = [];
+  for (let row = 0; row < totalRows; row++) {
+    const leftIndex = row < leftElements.length ? row : leftElements.length - 1;
+    const rightIndex = row < rightElements.length ? row : rightElements.length - 1;
+    const leftElement = leftElements[leftIndex];
+    const rightElement = rightElements[rightIndex];
+    const leftColumn = `${leftElement.gridArea}${leftElement.index}`;
+    const rightColumn = `${rightElement.gridArea}${rightElement.index}`;
+    const gridRow = `${leftColumn} ${rightColumn}`;
+    gridTemplate.push(`"${gridRow}"`);
+  }
+  return gridTemplate.join(" ");
+};
 const _hoisted_1$19 = ["innerHTML"];
 const _hoisted_2$Q = {
   key: 1,
@@ -3793,6 +3821,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       });
     };
     const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
+    watch(() => props.panel.limit, getSuggestionsDebounced);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1h, {
         items: searchResult.value,
@@ -12963,6 +12992,25 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
       var _a;
       return Boolean((_a = hoverImages.value) == null ? void 0 : _a.length);
     });
+    const widthOverride = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.width) != null ? _b : void 0;
+    });
+    const heightOverride = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.height) != null ? _b : void 0;
+    });
+    const objectFitOverride = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.objectFit) != null ? _b : void 0;
+    });
+    const styleOverride = computed(() => {
+      return {
+        width: widthOverride.value ? `${widthOverride.value}px` : void 0,
+        height: heightOverride.value ? `${heightOverride.value}px` : void 0,
+        objectFit: objectFitOverride.value ? objectFitOverride.value : void 0
+      };
+    });
     const replaceWithPlaceholder = (e2) => {
       replaceImageWithPlaceholder(e2, placeholder.value);
     };
@@ -13027,6 +13075,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass({ [_ctx.wrapperClass]: Boolean(_ctx.wrapperClass), "lupa-images-hover": isHover.value }),
+        style: normalizeStyle(styleOverride.value),
         onMouseenter: handleMouseEnter,
         onMouseleave: handleMouseLeave
       }, [
@@ -13037,6 +13086,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             (openBlock(), createElementBlock("img", mergeProps({
               class: ["lupa-images-hover-image", { [_ctx.imageClass]: true, "lupa-images-hover-image": isHover.value }],
+              style: styleOverride.value,
               src: finalUrl.value
             }, { alt: imageAlt.value ? imageAlt.value : void 0 }, {
               onError: replaceWithPlaceholder,
@@ -13047,9 +13097,10 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
         })) : (openBlock(), createElementBlock("img", mergeProps({
           key: 1,
           class: ["lupa-images-main-image", { [_ctx.imageClass]: true }],
+          style: styleOverride.value,
           src: finalMainImageUrl.value
         }, { alt: imageAlt.value ? imageAlt.value : void 0 }, { onError: replaceWithPlaceholder }), null, 16, _hoisted_2$P))
-      ], 34);
+      ], 38);
     };
   }
 });
@@ -13313,6 +13364,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
   const layout = ref(ResultsLayoutEnum.GRID);
   const loading = ref(false);
   const isMobileSidebarVisible = ref(false);
+  const relatedCategoryChildren = ref([]);
   const optionsStore = useOptionsStore();
   const paramsStore = useParamsStore();
   const screenStore = useScreenStore();
@@ -13454,6 +13506,9 @@ const useSearchResultStore = defineStore("searchResult", () => {
     const hasExactMatch = items.some((item) => getNormalizedString(item.title) === searchInput);
     return hasExactMatch ? items.filter((item) => getNormalizedString(item.title) === searchInput) : items;
   };
+  const setRelatedCategoryChildren = (children) => {
+    relatedCategoryChildren.value = [...children];
+  };
   return {
     isMobileSidebarVisible,
     searchResult,
@@ -13474,6 +13529,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
     itemRange,
     isPageEmpty,
     hideFiltersOnExactMatchForKeys,
+    relatedCategoryChildren,
     setSidebarState,
     queryFacet,
     add,
@@ -13482,7 +13538,8 @@ const useSearchResultStore = defineStore("searchResult", () => {
     setLayout,
     setLoading,
     clearSearchResult,
-    filterVisibleFilterValues
+    filterVisibleFilterValues,
+    setRelatedCategoryChildren
   };
 });
 const _hoisted_1$11 = { class: "lupa-search-box-add-to-cart-wrapper" };
@@ -13899,9 +13956,8 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
   }
 }));
 const _hoisted_1$V = ["href"];
-const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
-const _hoisted_3$w = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$p = {
+const _hoisted_2$I = { class: "lupa-search-box-product-details-section" };
+const _hoisted_3$w = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -13929,6 +13985,25 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.type === DocumentElementType.IMAGE)) != null ? _b : [];
     });
+    const mainImageElement = computed(() => {
+      return imageElements.value[0];
+    });
+    const widthOverride = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = mainImageElement.value) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.width) != null ? _c : void 0;
+    });
+    const heightOverride = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = mainImageElement.value) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.height) != null ? _c : void 0;
+    });
+    const imageStyleOverride = computed(() => {
+      var _a;
+      return ((_a = mainImageElement.value) == null ? void 0 : _a.dimensions) ? {
+        width: widthOverride.value ? `${widthOverride.value}px` : void 0,
+        height: heightOverride.value ? `${heightOverride.value}px` : void 0,
+        minWidth: widthOverride.value ? `${widthOverride.value + 10}px` : void 0
+      } : {};
+    });
     const detailElements = computed(() => {
       var _a, _b;
       return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
@@ -13967,7 +14042,10 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         "data-cy": "lupa-search-box-product",
         onClick: handleClick
       }), [
-        createElementVNode("div", _hoisted_2$I, [
+        createElementVNode("div", {
+          class: "lupa-search-box-product-image-section",
+          style: normalizeStyle(imageStyleOverride.value)
+        }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
             return openBlock(), createBlock(_sfc_main$16, {
               class: "lupa-search-box-product-element",
@@ -13978,8 +14056,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
               link: link.value
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
-        ]),
-        createElementVNode("div", _hoisted_3$w, [
+        ], 4),
+        createElementVNode("div", _hoisted_2$I, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
             var _a;
             return openBlock(), createBlock(_sfc_main$16, {
@@ -14003,7 +14081,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             ]), 1032, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
           createVNode(_sfc_main$16, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -14261,6 +14339,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       });
     };
     const getItemsDebounced = debounce$1(getItems, props.debounce);
+    watch(() => props.panel.limit, getItemsDebounced);
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createBlock(_sfc_main$_, {
@@ -14393,7 +14472,7 @@ const _hoisted_3$v = {
   key: 0,
   class: "lupa-panel-title lupa-panel-title-top-results"
 };
-const _hoisted_4$o = {
+const _hoisted_4$p = {
   key: 1,
   class: "lupa-panel-title"
 };
@@ -14449,6 +14528,13 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const displayPanels = computed(
       () => props.isSearchContainer ? panels.value.filter((p2) => p2.type === SearchBoxPanelType.SUGGESTION) : panels.value
     );
+    const gridTemplate = computed(() => generateGridTemplate(panels.value));
+    const styleOverrides = computed(() => {
+      return {
+        display: expandOnSinglePanel.value ? "block" : "grid",
+        gridTemplateAreas: gridTemplate.value ? gridTemplate.value : "left right"
+      };
+    });
     const getInput = (panel) => {
       var _a, _b;
       if (panel.type === SearchBoxPanelType.SUGGESTION || !panel.searchBySuggestion) {
@@ -14475,6 +14561,9 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       searchBoxStore.resetHighlightIndex();
     });
     const handleNavigation = (e2) => {
+      if (!props.focused) {
+        return;
+      }
       switch (e2.key) {
         case "ArrowDown":
           e2.preventDefault();
@@ -14562,7 +14651,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           }, toDisplayString(labels.value.closePanel), 1)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: "lupa-main-panel",
-            style: normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
+            style: normalizeStyle(styleOverrides.value),
             "data-cy": "lupa-main-panel"
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
@@ -14573,10 +14662,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                   "lupa-panel-" + panel.type + "-index",
                   panel.customClassName ? panel.customClassName : ""
                 ]),
+                style: normalizeStyle(panel.gridArea ? { gridArea: `${panel.gridArea}${index}` } : {}),
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
                 ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$v, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
-                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$o, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
                 panel.queryKey && canShowPanel(panel) ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
                   key: 2,
                   panel,
@@ -14598,7 +14688,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                     key: "0"
                   } : void 0
                 ]), 1064, ["panel", "search-box-options", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-              ], 10, _hoisted_2$G);
+              ], 14, _hoisted_2$G);
             }), 128))
           ], 4),
           !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1j, {
@@ -14662,6 +14752,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     const inputValue = ref("");
     const suggestedValue = ref(defaultSuggestedValue);
     const opened = ref(props.isSearchContainer);
+    const focused = ref(false);
     const searchBoxInput = ref(null);
     const { highlightedDocument } = storeToRefs(searchBoxStore);
     const searchValue = computed(() => {
@@ -14720,6 +14811,9 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       const elementClass = (_b = (_a2 = e2.target) == null ? void 0 : _a2.className) != null ? _b : "";
       const hasLupaClass = typeof elementClass.includes == "function" && elementClass.includes("lupa-search-box");
       const isOutsideElement = el && !el.contains(e2.target) && !hasLupaClass;
+      if (isOutsideElement && props.options.keepOpen) {
+        focused.value = false;
+      }
       if (!isOutsideElement || props.options.keepOpen) {
         return;
       }
@@ -14728,11 +14822,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
     const close = () => {
       opened.value = false;
+      focused.value = false;
       suggestedValue.value = defaultSuggestedValue;
     };
     const handleKeyDown = (e2) => {
       var _a2, _b;
-      if (!opened.value) {
+      if (!focused.value) {
         return;
       }
       switch (e2.key) {
@@ -14752,6 +14847,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     const handleInput = (value) => {
       var _a2;
       opened.value = true;
+      focused.value = true;
       inputValue.value = (_a2 = value == null ? void 0 : value.replace(/\s+$/, "")) != null ? _a2 : "";
       suggestedValue.value = defaultSuggestedValue;
       searchBoxStore.resetHighlightIndex();
@@ -14879,12 +14975,14 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    watch(() => props.options.debounce, handleCurrentValueSearch);
     const resetValues = () => {
       inputValue.value = "";
       suggestedValue.value = defaultSuggestedValue;
     };
     const handleProductClick = () => {
       opened.value = false;
+      focused.value = false;
     };
     const slotProps = (props2) => {
       return __spreadValues({}, props2);
@@ -14901,15 +14999,17 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             ref_key: "searchBoxInput",
             ref: searchBoxInput,
             onInput: handleInput,
-            onFocus: _cache[0] || (_cache[0] = ($event) => opened.value = true),
+            onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
+            onFocus: _cache[1] || (_cache[1] = ($event) => opened.value = true),
             onSearch: handleSearch,
-            onClose: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close"))
+            onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
           }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
           opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$W, {
             key: 0,
             options: panelOptions.value,
             inputValue: inputValue.value,
             isSearchContainer: _ctx.isSearchContainer,
+            focused: focused.value,
             onFetched: handleItemsFetch,
             onItemSelect: handleItemSelect,
             onGoToResults: handleSearch,
@@ -14923,7 +15023,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["options", "inputValue", "isSearchContainer"])) : createCommentVNode("", true)
+          ]), 1032, ["options", "inputValue", "isSearchContainer", "focused"])) : createCommentVNode("", true)
         ])
       ]);
     };
@@ -15021,7 +15121,7 @@ const _hoisted_3$u = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$n = { key: 1 };
+const _hoisted_4$o = { key: 1 };
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
@@ -15072,7 +15172,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$n, toDisplayString(label) + " ", 1))
+              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$o, toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -15122,7 +15222,7 @@ const _hoisted_3$t = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$m = { class: "lupa-results-total-count-number" };
+const _hoisted_4$n = { class: "lupa-results-total-count-number" };
 const _hoisted_5$g = ["innerHTML"];
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
@@ -15168,7 +15268,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           queryText.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
           showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$t, [
             createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
-            createElementVNode("span", _hoisted_4$m, toDisplayString(unref(totalItems)), 1),
+            createElementVNode("span", _hoisted_4$n, toDisplayString(unref(totalItems)), 1),
             createTextVNode(")")
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
@@ -15226,7 +15326,7 @@ const _hoisted_3$r = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$l = { class: "lupa-current-filter-list" };
+const _hoisted_4$m = { class: "lupa-current-filter-list" };
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "CurrentFilters",
   props: {
@@ -15310,7 +15410,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           }, null, 2)) : createCommentVNode("", true)
         ]),
         !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$r, [
-          createElementVNode("div", _hoisted_4$l, [
+          createElementVNode("div", _hoisted_4$m, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(currentDisplayFilters.value, (filter2) => {
               return openBlock(), createBlock(_sfc_main$R, {
                 key: filter2.key + "_" + filter2.value,
@@ -15378,7 +15478,7 @@ const _hoisted_1$K = {
 };
 const _hoisted_2$z = { class: "lupa-category-back" };
 const _hoisted_3$q = ["href"];
-const _hoisted_4$k = ["href"];
+const _hoisted_4$l = ["href"];
 const _hoisted_5$f = { class: "lupa-child-category-list" };
 const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "CategoryFilter",
@@ -15389,6 +15489,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const props = __props;
     const categoryChildren = ref([]);
     const optionStore = useOptionsStore();
+    const searchResultsStore = useSearchResultStore();
     const { envOptions, searchResultOptions } = storeToRefs(optionStore);
     const hasBackButton = computed(() => {
       var _a;
@@ -15425,6 +15526,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
         return;
       }
       categoryChildren.value = result2.items;
+      searchResultsStore.setRelatedCategoryChildren(categoryChildren.value);
       (_c = (_b = searchResultOptions.value.callbacks) == null ? void 0 : _b.onCategoryFilterResults) == null ? void 0 : _c.call(_b, {
         queryKey: props.options.queryKey,
         hasResults: result2.total > 0
@@ -15483,7 +15585,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             href: parentUrlLink.value,
             class: normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, toDisplayString(parentTitle.value), 11, _hoisted_4$k)
+          }, toDisplayString(parentTitle.value), 11, _hoisted_4$l)
         ], 2),
         createElementVNode("div", _hoisted_5$f, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categoryChildren.value, (child) => {
@@ -15504,7 +15606,7 @@ const _hoisted_1$J = {
 };
 const _hoisted_2$y = ["placeholder"];
 const _hoisted_3$p = { class: "lupa-terms-list" };
-const _hoisted_4$j = ["onClick"];
+const _hoisted_4$k = ["onClick"];
 const _hoisted_5$e = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$9 = { class: "lupa-term-checkbox-label" };
 const _hoisted_7$6 = { class: "lupa-term-label" };
@@ -15612,7 +15714,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", _hoisted_7$6, toDisplayString(item.title), 1),
                 _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_8$2, "(" + toDisplayString(item.count) + ")", 1)) : createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$j);
+            ], 10, _hoisted_4$k);
           }), 128))
         ]),
         displayShowMore.value ? (openBlock(), createElementBlock("div", {
@@ -16612,7 +16714,7 @@ const _hoisted_3$o = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$i = {
+const _hoisted_4$j = {
   key: 0,
   class: "lupa-stats-range-label"
 };
@@ -16807,7 +16909,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$I, [
         !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$x, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$o, [
           createElementVNode("div", null, [
-            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$i, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
+            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_5$d, [
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -16874,7 +16976,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 const _hoisted_1$H = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_2$w = { class: "lupa-term-checkbox-label" };
 const _hoisted_3$n = { class: "lupa-term-label" };
-const _hoisted_4$h = {
+const _hoisted_4$i = {
   key: 0,
   class: "lupa-term-count"
 };
@@ -16935,7 +17037,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           ]),
           createElementVNode("div", _hoisted_2$w, [
             createElementVNode("span", _hoisted_3$n, toDisplayString(_ctx.item.title) + toDisplayString(" "), 1),
-            _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$h, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
+            _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$i, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
           ])
         ]),
         showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
@@ -17447,7 +17549,7 @@ const _hoisted_1$A = {
 };
 const _hoisted_2$r = ["onClick"];
 const _hoisted_3$l = { class: "lupa-mobile-sidebar-content" };
-const _hoisted_4$g = { class: "lupa-sidebar-top" };
+const _hoisted_4$h = { class: "lupa-sidebar-top" };
 const _hoisted_5$b = { class: "lupa-sidebar-title" };
 const _hoisted_6$7 = {
   key: 0,
@@ -17491,7 +17593,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           onClick: withModifiers(handleMobileToggle, ["stop"])
         }, null, 8, _hoisted_2$r),
         createElementVNode("div", _hoisted_3$l, [
-          createElementVNode("div", _hoisted_4$g, [
+          createElementVNode("div", _hoisted_4$h, [
             createElementVNode("div", _hoisted_5$b, [
               createTextVNode(toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (openBlock(), createElementBlock("span", _hoisted_6$7, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
@@ -17519,7 +17621,7 @@ const _hoisted_3$k = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$f = { key: 2 };
+const _hoisted_4$g = { key: 2 };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
@@ -17560,7 +17662,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 return handleNavigation(e2, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
               }
             }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$q)) : (openBlock(), createElementBlock("span", _hoisted_3$k, toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, " / ")) : createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$g, " / ")) : createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -17666,7 +17768,7 @@ const _hoisted_2$p = {
   class: "lupa-page-number-separator"
 };
 const _hoisted_3$j = ["onClick"];
-const _hoisted_4$e = {
+const _hoisted_4$f = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -17772,7 +17874,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, toDisplayString(page), 11, _hoisted_3$j);
         }), 128)),
         showLastPage.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$e, "...")) : createCommentVNode("", true),
+          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$f, "...")) : createCommentVNode("", true),
           createElementVNode("div", {
             class: "lupa-page-number lupa-page-number-last",
             onClick: _cache[2] || (_cache[2] = () => {
@@ -17797,7 +17899,7 @@ const _hoisted_1$u = {
 };
 const _hoisted_2$o = { id: "lupa-select" };
 const _hoisted_3$i = { class: "lupa-select-label" };
-const _hoisted_4$d = ["aria-label"];
+const _hoisted_4$e = ["aria-label"];
 const _hoisted_5$a = ["value"];
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsPageSize",
@@ -17844,7 +17946,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 value: option
               }, toDisplayString(prefixLabel.value) + toDisplayString(option), 9, _hoisted_5$a);
             }), 128))
-          ], 40, _hoisted_4$d)
+          ], 40, _hoisted_4$e)
         ])
       ]);
     };
@@ -17856,7 +17958,7 @@ const _hoisted_1$t = {
 };
 const _hoisted_2$n = { id: "lupa-select" };
 const _hoisted_3$h = { class: "lupa-select-label" };
-const _hoisted_4$c = ["aria-label"];
+const _hoisted_4$d = ["aria-label"];
 const _hoisted_5$9 = ["value"];
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsSort",
@@ -17924,7 +18026,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 value: option.key
               }, toDisplayString(option.label), 9, _hoisted_5$9);
             }), 128))
-          ], 40, _hoisted_4$c), [
+          ], 40, _hoisted_4$d), [
             [vModelSelect, selectedKey.value]
           ])
         ])
@@ -17938,7 +18040,7 @@ const _hoisted_2$m = {
   class: "lupa-toolbar-right-title"
 };
 const _hoisted_3$g = { key: 2 };
-const _hoisted_4$b = { key: 4 };
+const _hoisted_4$c = { key: 4 };
 const _hoisted_5$8 = { key: 6 };
 const _hoisted_6$6 = { class: "lupa-toolbar-right" };
 const _hoisted_7$3 = {
@@ -18062,7 +18164,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             label: searchSummaryLabel.value,
             clearable: unref(hasAnyFilter) && showFilterClear.value,
             onClear: handleClearAll
-          }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$b)),
+          }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$c)),
           displayPageSelect.value ? (openBlock(), createBlock(_sfc_main$z, {
             key: 5,
             options: paginationOptions.value.pageSelect,
@@ -18111,7 +18213,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 const _hoisted_1$r = ["title", "innerHTML"];
 const _hoisted_2$l = ["title"];
 const _hoisted_3$f = ["href", "innerHTML"];
-const _hoisted_4$a = ["title"];
+const _hoisted_4$b = ["title"];
 const _hoisted_5$7 = {
   key: 0,
   class: "lupa-search-results-product-title-text"
@@ -18179,7 +18281,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           class: "lupa-search-results-product-title-text lupa-title-link",
           onClick: handleNavigation
         }, toDisplayString(title.value), 9, _hoisted_6$5)) : createCommentVNode("", true)
-      ], 12, _hoisted_4$a));
+      ], 12, _hoisted_4$b));
     };
   }
 });
@@ -18222,7 +18324,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 const _hoisted_1$p = { id: "lupa-search-results-rating" };
 const _hoisted_2$k = { class: "lupa-ratings" };
 const _hoisted_3$e = { class: "lupa-ratings-base" };
-const _hoisted_4$9 = ["innerHTML"];
+const _hoisted_4$a = ["innerHTML"];
 const _hoisted_5$6 = { class: "lupa-rating-wrapper" };
 const _hoisted_6$4 = ["innerHTML"];
 const _hoisted_7$2 = ["href"];
@@ -18266,7 +18368,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 key: index,
                 innerHTML: star,
                 class: "lupa-rating lupa-rating-not-highlighted"
-              }, null, 8, _hoisted_4$9);
+              }, null, 8, _hoisted_4$a);
             }), 128))
           ]),
           createElementVNode("div", _hoisted_5$6, [
@@ -18400,7 +18502,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 const _hoisted_1$m = ["innerHTML"];
 const _hoisted_2$i = { key: 0 };
 const _hoisted_3$c = { key: 1 };
-const _hoisted_4$8 = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$9 = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$5 = { class: "lupa-search-box-custom-text" };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductCustom",
@@ -18445,7 +18547,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         class: className.value
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$i, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$c, [
-          createElementVNode("div", _hoisted_4$8, toDisplayString(label.value), 1),
+          createElementVNode("div", _hoisted_4$9, toDisplayString(label.value), 1),
           createElementVNode("div", _hoisted_5$5, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -18491,7 +18593,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 const _hoisted_1$k = { id: "lupa-search-results-rating" };
 const _hoisted_2$h = ["innerHTML"];
 const _hoisted_3$b = { class: "lupa-ratings" };
-const _hoisted_4$7 = ["href"];
+const _hoisted_4$8 = ["href"];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductSingleStarRating",
   props: {
@@ -18529,7 +18631,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         createElementVNode("a", {
           href: ratingLink.value,
           class: "lupa-total-ratings"
-        }, toDisplayString(totalRatings.value), 9, _hoisted_4$7)
+        }, toDisplayString(totalRatings.value), 9, _hoisted_4$8)
       ]);
     };
   }
@@ -18857,7 +18959,7 @@ const _hoisted_3$9 = {
   class: "lupa-similar-query-label",
   "data-cy": "lupa-similar-query-label"
 };
-const _hoisted_4$6 = ["onClick"];
+const _hoisted_4$7 = ["onClick"];
 const _hoisted_5$4 = ["innerHTML"];
 const _hoisted_6$3 = { key: 0 };
 const _hoisted_7$1 = {
@@ -18910,7 +19012,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   innerHTML: getSimilarQueryContent(similarQuery.displayQuery)
                 }, null, 8, _hoisted_5$4),
                 similarQuery.count ? (openBlock(), createElementBlock("span", _hoisted_6$3, " (" + toDisplayString(similarQuery.count) + ")", 1)) : createCommentVNode("", true)
-              ], 8, _hoisted_4$6)
+              ], 8, _hoisted_4$7)
             ]),
             createElementVNode("div", _hoisted_7$1, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(similarQuery.items, (product, index2) => {
@@ -19133,7 +19235,7 @@ const _hoisted_3$7 = {
   class: "lupa-empty-results",
   "data-cy": "lupa-no-results-in-page"
 };
-const _hoisted_4$5 = {
+const _hoisted_4$6 = {
   key: 3,
   class: "lupa-empty-results",
   "data-cy": "lupa-no-results"
@@ -19325,7 +19427,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             location: "bottom",
             sdkOptions: _ctx.options.options
           }, null, 8, ["options", "sdkOptions"])
-        ], 64)) : !unref(loading) && unref(currentQueryText) ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+        ], 64)) : !unref(loading) && unref(currentQueryText) ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
           createTextVNode(toDisplayString(_ctx.options.labels.emptyResults) + " ", 1),
           createElementVNode("span", null, toDisplayString(unref(currentQueryText)), 1)
         ])) : createCommentVNode("", true),
@@ -19354,6 +19456,7 @@ const _hoisted_2$a = {
   class: "lupa-category-back"
 };
 const _hoisted_3$6 = ["href"];
+const _hoisted_4$5 = { class: "lupa-child-category-list" };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "CategoryTopFilters",
   props: {
@@ -19361,6 +19464,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const searchResultsStore = useSearchResultStore();
+    const { relatedCategoryChildren } = storeToRefs(searchResultsStore);
     const hasBackButton = computed(() => {
       var _a, _b;
       return Boolean((_b = (_a = props.options.categories) == null ? void 0 : _a.back) == null ? void 0 : _b.title);
@@ -19376,12 +19481,19 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const hasEventRouting = computed(() => {
       return props.options.routingBehavior === "event";
     });
+    const categoryOptions = computed(() => {
+      return props.options.categories;
+    });
     const handleNavigationBack = (event) => {
       if (!backUrlLink.value) {
         return;
       }
       handleRoutingEvent(backUrlLink.value, event, hasEventRouting.value);
     };
+    const getCategoryKey = (item) => {
+      var _a, _b, _c, _d, _e, _f;
+      return (item == null ? void 0 : item[(_c = (_b = (_a = categoryOptions.value) == null ? void 0 : _a.keys) == null ? void 0 : _b.titleKey) != null ? _c : ""]) + (item == null ? void 0 : item[(_f = (_e = (_d = categoryOptions.value) == null ? void 0 : _d.keys) == null ? void 0 : _e.urlKey) != null ? _f : ""]);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["lupa-category-top-mobile-filters", { "lupa-has-back-button": hasBackButton.value }])
@@ -19394,6 +19506,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               onClick: handleNavigationBack
             }, toDisplayString(backTitle.value), 9, _hoisted_3$6)
           ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4$5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(relatedCategoryChildren), (child) => {
+              return openBlock(), createBlock(_sfc_main$P, {
+                key: getCategoryKey(child),
+                item: child,
+                options: categoryOptions.value
+              }, null, 8, ["item", "options"]);
+            }), 128))
+          ]),
           createVNode(_sfc_main$w, {
             class: "lupa-toolbar-mobile",
             "pagination-location": "top",