@getlupa/vue 0.9.6 → 0.10.1

package/dist/lupaSearch.js

@@ -2248,6 +2248,11 @@ const useOptionsStore = defineStore("options", () => {
   const setInitialFilters = ({ initialFilters: initialFilters2 }) => {
     searchResultInitialFilters.value = initialFilters2;
   };
+  const getQueryParamName = (param) => {
+    var _a;
+    const nameMap = searchBoxOptions.value.queryParameterNames;
+    return (_a = nameMap == null ? void 0 : nameMap[param]) != null ? _a : param;
+  };
   return {
     searchBoxOptions,
     searchResultOptions,
@@ -2262,7 +2267,8 @@ const useOptionsStore = defineStore("options", () => {
     setSearchBoxOptions,
     setTrackingOptions,
     setSearchResultOptions,
-    setInitialFilters
+    setInitialFilters,
+    getQueryParamName
   };
 });
 var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
@@ -2515,9 +2521,14 @@ const parseParam = (key, params) => {
     return void 0;
   }
 };
-const parseRegularKeys = (regularKeys, searchParams) => {
+const parseRegularKeys = (regularKeys, searchParams, getQueryParamName) => {
   const params = /* @__PURE__ */ Object.create({});
-  const keys = reverseKeyValue(QUERY_PARAMS);
+  const keys = reverseKeyValue({
+    QUERY: getQueryParamName ? getQueryParamName(QUERY_PARAMS.QUERY) : QUERY_PARAMS.QUERY,
+    LIMIT: getQueryParamName ? getQueryParamName(QUERY_PARAMS.LIMIT) : QUERY_PARAMS.LIMIT,
+    PAGE: getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE,
+    SORT: getQueryParamName ? getQueryParamName(QUERY_PARAMS.SORT) : QUERY_PARAMS.SORT
+  });
   for (const key of regularKeys) {
     const rawKey = keys[key] || key;
     params[rawKey] = parseParam(key, searchParams);
@@ -2559,16 +2570,17 @@ const parseFacetKeys = (facetKeys, searchParams) => {
   }
   return params;
 };
-const parseParams = (searchParams) => {
+const parseParams = (getQueryParamName, searchParams) => {
   const params = /* @__PURE__ */ Object.create({});
   if (!searchParams)
     return params;
   const paramKeys = Array.from(searchParams.keys());
   const facetKeys = paramKeys.filter((k) => isFacetKey(k));
   const regularKeys = paramKeys.filter((k) => !isFacetKey(k));
-  return __spreadValues(__spreadValues({
+  const r = __spreadValues(__spreadValues({
     [QUERY_PARAMS_PARSED.QUERY]: ""
-  }, parseRegularKeys(regularKeys, searchParams)), parseFacetKeys(facetKeys, searchParams));
+  }, parseRegularKeys(regularKeys, searchParams, getQueryParamName)), parseFacetKeys(facetKeys, searchParams));
+  return r;
 };
 const appendParam = (url, { name, value }, encode = true) => {
   if (Array.isArray(value)) {
@@ -2589,10 +2601,16 @@ const appendArrayParams = (url, param) => {
   url.searchParams.delete(param.name);
   param.value.forEach((v) => url.searchParams.append(param.name, encodeParam(v)));
 };
-const getRemovableParams = (url, paramsToRemove) => {
+const getRemovableParams = (url, getQueryParamName, paramsToRemove) => {
   if (paramsToRemove === "all") {
+    const params = {
+      QUERY: getQueryParamName ? getQueryParamName(QUERY_PARAMS.QUERY) : QUERY_PARAMS.QUERY,
+      LIMIT: getQueryParamName ? getQueryParamName(QUERY_PARAMS.LIMIT) : QUERY_PARAMS.LIMIT,
+      PAGE: getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE,
+      SORT: getQueryParamName ? getQueryParamName(QUERY_PARAMS.SORT) : QUERY_PARAMS.SORT
+    };
     return [
-      ...Object.values(QUERY_PARAMS),
+      ...Object.values(params),
       ...Array.from(url.searchParams.keys()).filter((k) => isFacetKey(k))
     ];
   }
@@ -2623,12 +2641,12 @@ const generateLink = (linkPattern, document2) => {
   }
   return link;
 };
-const generateResultLink = (link, searchText, facet) => {
+const generateResultLink = (link, getQueryParamName, searchText, facet) => {
   if (!searchText) {
     return link;
   }
   const facetParam = facet ? `&${FACET_PARAMS_TYPE.TERMS}${encodeParam(facet.key)}=${encodeParam(facet.title)}` : "";
-  const queryParam = `?${QUERY_PARAMS.QUERY}=${encodeParam(searchText)}`;
+  const queryParam = `?${getQueryParamName ? getQueryParamName(QUERY_PARAMS.QUERY) : QUERY_PARAMS.QUERY}=${encodeParam(searchText)}`;
   return `${link}${queryParam}${facetParam}`;
 };
 const getRelativePath = (link) => {
@@ -2657,8 +2675,8 @@ const handleRoutingEvent = (link, event, hasEventRouting = false) => {
   event == null ? void 0 : event.preventDefault();
   emitRoutingEvent(link);
 };
-const redirectToResultsPage = (link, searchText, facet, routingBehavior = "direct-link") => {
-  const url = generateResultLink(link, searchText, facet);
+const redirectToResultsPage = (link, searchText, getQueryParamName, facet, routingBehavior = "direct-link") => {
+  const url = generateResultLink(link, getQueryParamName, searchText, facet);
   if (routingBehavior === "event") {
     emitRoutingEvent(url);
   } else {
@@ -2683,15 +2701,15 @@ const getFacetParam = (key, value, type = FACET_PARAMS_TYPE.TERMS) => {
     value
   };
 };
-const toggleTermFilter = (appendParams, facetAction, currentFilters) => {
+const toggleTermFilter = (appendParams, facetAction, getQueryParamName, currentFilters) => {
   const currentFilter = currentFilters == null ? void 0 : currentFilters[facetAction.key];
   const newParams = toggleTermParam(currentFilter, facetAction.value);
   appendParams({
     params: [getFacetParam(facetAction.key, newParams)],
-    paramsToRemove: [QUERY_PARAMS.PAGE]
+    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE]
   });
 };
-const toggleHierarchyFilter = (appendParams, facetAction, currentFilters, removeAllLevels = false) => {
+const toggleHierarchyFilter = (appendParams, facetAction, getQueryParamName, currentFilters, removeAllLevels = false) => {
   var _a;
   const currentFilter = currentFilters == null ? void 0 : currentFilters[facetAction.key];
   const newParams = toggleHierarchyParam(
@@ -2701,10 +2719,10 @@ const toggleHierarchyFilter = (appendParams, facetAction, currentFilters, remove
   );
   appendParams({
     params: [getFacetParam(facetAction.key, newParams, FACET_PARAMS_TYPE.HIERARCHY)],
-    paramsToRemove: [QUERY_PARAMS.PAGE]
+    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE]
   });
 };
-const toggleRangeFilter = (appendParams, facetAction, currentFilters) => {
+const toggleRangeFilter = (appendParams, facetAction, getQueryParamName, currentFilters) => {
   const currentFilter = rangeFilterToString(
     currentFilters == null ? void 0 : currentFilters[facetAction.key],
     FACET_RANGE_SEPARATOR
@@ -2713,7 +2731,7 @@ const toggleRangeFilter = (appendParams, facetAction, currentFilters) => {
   facetValue = currentFilter === facetValue ? "" : facetValue;
   appendParams({
     params: [getFacetParam(facetAction.key, facetValue, FACET_PARAMS_TYPE.RANGE)],
-    paramsToRemove: [QUERY_PARAMS.PAGE],
+    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE],
     encode: false
   });
 };
@@ -2842,7 +2860,7 @@ const useParamsStore = defineStore("params", () => {
   const navigate = (url) => {
     var _a, _b, _c;
     window.history.pushState("", "Append params", url.pathname + url.search);
-    const params2 = parseParams(url.searchParams);
+    const params2 = parseParams(optionsStore.getQueryParamName, url.searchParams);
     (_c = (_b = (_a = optionsStore == null ? void 0 : optionsStore.searchBoxOptions) == null ? void 0 : _a.callbacks) == null ? void 0 : _b.onSearchResultsNavigate) == null ? void 0 : _c.call(_b, {
       params: params2
     });
@@ -2860,7 +2878,7 @@ const useParamsStore = defineStore("params", () => {
     const paramsToRemove = Array.from(url.searchParams.keys()).filter(isFacetKey);
     removeParams(url, paramsToRemove);
     navigate(url);
-    params.value = parseParams(url.searchParams);
+    params.value = parseParams(optionsStore.getQueryParamName, url.searchParams);
     searchString.value = url.search;
   };
   const removeParameters = ({
@@ -2868,13 +2886,13 @@ const useParamsStore = defineStore("params", () => {
     save = true
   }) => {
     const url = getPageUrl();
-    paramsToRemove = getRemovableParams(url, paramsToRemove);
+    paramsToRemove = getRemovableParams(url, optionsStore.getQueryParamName, paramsToRemove);
     removeParams(url, paramsToRemove);
     navigate(url);
     if (!save) {
       return;
     }
-    params.value = parseParams(url.searchParams);
+    params.value = parseParams(optionsStore.getQueryParamName, url.searchParams);
     searchString.value = url.search;
   };
   const handleNoResultsFlag = ({
@@ -2916,13 +2934,22 @@ const useParamsStore = defineStore("params", () => {
         })
       ] : [];
       appendParams({
-        params: [{ name: QUERY_PARAMS.QUERY, value: searchText }, ...facetParam],
+        params: [
+          { name: optionsStore.getQueryParamName(QUERY_PARAMS.QUERY), value: searchText },
+          ...facetParam
+        ],
         paramsToRemove: "all",
         searchResultsLink: searchResultsLink.value
       });
     } else {
       const routing = (_a = optionsStore.boxRoutingBehavior) != null ? _a : "direct-link";
-      redirectToResultsPage(searchResultsLink.value, searchText, facet, routing);
+      redirectToResultsPage(
+        searchResultsLink.value,
+        searchText,
+        optionsStore.getQueryParamName,
+        facet,
+        routing
+      );
     }
   };
   const appendParams = ({
@@ -2936,14 +2963,14 @@ const useParamsStore = defineStore("params", () => {
       return { params: params.value };
     }
     const url = getPageUrl(searchResultsLink2);
-    paramsToRemove = getRemovableParams(url, paramsToRemove);
+    paramsToRemove = getRemovableParams(url, optionsStore.getQueryParamName, paramsToRemove);
     removeParams(url, paramsToRemove);
     newParams.forEach((p2) => appendParam(url, p2, encode));
     navigate(url);
     if (!save) {
       return;
     }
-    params.value = parseParams(url.searchParams);
+    params.value = parseParams(optionsStore.getQueryParamName, url.searchParams);
     searchString.value = url.search;
   };
   const setDefaultLimit = (newDefaultLimit) => {
@@ -3194,7 +3221,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
     resetHighlightIndex
   };
 });
-const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
+const _hoisted_1$1d = { id: "lupa-search-box-input-container" };
 const _hoisted_2$P = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
 const _hoisted_4$s = ["value"];
@@ -3284,7 +3311,7 @@ const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
     };
     __expose({ focus });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1c, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1d, [
         vue.createElementVNode("div", _hoisted_2$P, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["lupa-input-clear-content", { "lupa-input-clear-filled": inputValue.value }]),
@@ -3358,7 +3385,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1b = { class: "lupa-search-box-history-item" };
+const _hoisted_1$1c = { class: "lupa-search-box-history-item" };
 const _hoisted_2$O = { class: "lupa-search-box-history-item-content" };
 const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryItem",
@@ -3376,7 +3403,7 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
       emit("click", { query: props.item });
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1b, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1c, [
         vue.createElementVNode("div", _hoisted_2$O, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["lupa-search-box-history-item-text", { "lupa-search-box-history-item-highlighted": _ctx.highlighted }]),
@@ -3391,7 +3418,7 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1a = {
+const _hoisted_1$1b = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
@@ -3436,7 +3463,7 @@ const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return hasHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1a, [
+      return hasHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1b, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(history), (item, index) => {
           return vue.openBlock(), vue.createBlock(_sfc_main$1j, {
             key: item,
@@ -3454,7 +3481,7 @@ const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$19 = { class: "lupa-search-box-no-results" };
+const _hoisted_1$1a = { class: "lupa-search-box-no-results" };
 const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxNoResults",
   props: {
@@ -3462,11 +3489,11 @@ const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("p", _hoisted_1$19, vue.toDisplayString(_ctx.labels.noResults), 1);
+      return vue.openBlock(), vue.createElementBlock("p", _hoisted_1$1a, vue.toDisplayString(_ctx.labels.noResults), 1);
     };
   }
 });
-const _hoisted_1$18 = ["innerHTML"];
+const _hoisted_1$19 = ["innerHTML"];
 const _hoisted_2$N = {
   key: 1,
   "data-cy": "lupa-suggestion-value",
@@ -3521,7 +3548,7 @@ const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
           class: "lupa-suggestion-value",
           "data-cy": "lupa-suggestion-value",
           innerHTML: _ctx.suggestion.displayHighlight
-        }, null, 8, _hoisted_1$18)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$N, vue.toDisplayString(_ctx.suggestion.display), 1)),
+        }, null, 8, _hoisted_1$19)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$N, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
           vue.createElementVNode("span", _hoisted_4$r, vue.toDisplayString(facetLabel.value), 1),
           vue.createElementVNode("span", _hoisted_5$g, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
@@ -3530,7 +3557,7 @@ const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$17 = {
+const _hoisted_1$18 = {
   id: "lupa-search-box-suggestions",
   "data-cy": "lupa-search-box-suggestions"
 };
@@ -3594,7 +3621,7 @@ const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$17, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$18, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
           return vue.openBlock(), vue.createBlock(_sfc_main$1g, {
             key: getSuggestionKey(item),
@@ -3678,8 +3705,9 @@ const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
 const useDynamicDataStore = defineStore("dynamicData", () => {
   const loading = vue.ref(false);
   const dynamicDataIdMap = vue.ref({});
+  const loadingIds = vue.ref({});
   const optionsStore = useOptionsStore();
-  const loadedIds = vue.computed(() => Object.keys(dynamicDataIdMap.value));
+  vue.computed(() => Object.keys(dynamicDataIdMap.value));
   const searchResultOptions = vue.computed(() => optionsStore.searchResultOptions);
   const searchBoxOptions = vue.computed(() => optionsStore.searchBoxOptions);
   const dynamicSearchResultData = vue.computed(() => {
@@ -3719,11 +3747,12 @@ const useDynamicDataStore = defineStore("dynamicData", () => {
     const similarQueryResultIds = (_e = (_d = (_c = result.similarQueries) == null ? void 0 : _c.map((q) => q.items.map((i) => i.id))) == null ? void 0 : _d.flat()) != null ? _e : [];
     let requestedIds = [...resultIds, ...similarQueryResultIds];
     if (isCacheEnabled.value) {
-      requestedIds = requestedIds.filter((i) => !loadedIds.value.includes(i));
+      requestedIds = requestedIds.filter((i) => !dynamicDataIdMap.value[`${i}`]);
     }
     if (!requestedIds.length) {
       return;
     }
+    loadingIds.value = requestedIds.reduce((a, c2) => __spreadProps(__spreadValues({}, a), { [c2]: true }), {});
     loading.value = true;
     try {
       const dynamicData = dynamicSearchResultData.value || dynamicSearchBoxData.value;
@@ -3733,15 +3762,16 @@ const useDynamicDataStore = defineStore("dynamicData", () => {
       const dynamicDataResult = (_f = yield dynamicData == null ? void 0 : dynamicData.handler(requestedIds)) != null ? _f : [];
       const seed = {};
       const dynamicDataIdMapValue = dynamicDataResult.reduce(
-        (a, c2) => __spreadProps(__spreadValues({}, a), { [c2.id]: c2 }),
+        (a, c2) => __spreadProps(__spreadValues({}, a), { [`${c2.id}`]: c2 }),
         seed
       );
       dynamicDataIdMap.value = __spreadValues(__spreadValues({}, dynamicDataIdMap.value), dynamicDataIdMapValue);
     } finally {
       loading.value = false;
+      loadingIds.value = {};
     }
   });
-  return { dynamicDataIdMap, loading, enhanceSearchResultsWithDynamicData };
+  return { dynamicDataIdMap, loading, loadingIds, enhanceSearchResultsWithDynamicData };
 });
 const joinUrlParts = (...parts) => {
   var _a, _b, _c;
@@ -3750,7 +3780,7 @@ const joinUrlParts = (...parts) => {
   }
   return (_c = (_b = (_a = parts == null ? void 0 : parts.map((part) => part.replace(/(^\/+|\/+$)/g, ""))) == null ? void 0 : _a.filter((part) => part !== "")) == null ? void 0 : _b.join("/")) != null ? _c : "";
 };
-const _hoisted_1$16 = ["src"];
+const _hoisted_1$17 = ["src"];
 const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
   __name: "ProductImage",
   props: {
@@ -3804,7 +3834,7 @@ const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("img", vue.mergeProps({
           class: (_b = _ctx.imageClass) != null ? _b : "",
           src: finalUrl.value
-        }, { alt: imageAlt.value ? imageAlt.value : void 0 }, { onError: replaceWithPlaceholder }), null, 16, _hoisted_1$16)
+        }, { alt: imageAlt.value ? imageAlt.value : void 0 }, { onError: replaceWithPlaceholder }), null, 16, _hoisted_1$17)
       ], 2);
     };
   }
@@ -3826,7 +3856,7 @@ const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$15 = ["innerHTML"];
+const _hoisted_1$16 = ["innerHTML"];
 const _hoisted_2$M = {
   key: 1,
   class: "lupa-search-box-product-title"
@@ -3851,13 +3881,13 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         class: "lupa-search-box-product-title",
         innerHTML: title.value
-      }, null, 8, _hoisted_1$15)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$M, [
+      }, null, 8, _hoisted_1$16)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$M, [
         vue.createElementVNode("strong", null, vue.toDisplayString(title.value), 1)
       ]));
     };
   }
 });
-const _hoisted_1$14 = ["innerHTML"];
+const _hoisted_1$15 = ["innerHTML"];
 const _hoisted_2$L = {
   key: 1,
   class: "lupa-search-box-product-description"
@@ -3882,11 +3912,11 @@ const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         class: "lupa-search-box-product-description",
         innerHTML: description.value
-      }, null, 8, _hoisted_1$14)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$L, vue.toDisplayString(description.value), 1));
+      }, null, 8, _hoisted_1$15)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$L, vue.toDisplayString(description.value), 1));
     };
   }
 });
-const _hoisted_1$13 = { class: "lupa-search-box-product-price" };
+const _hoisted_1$14 = { class: "lupa-search-box-product-price" };
 const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductPrice",
   props: {
@@ -3905,13 +3935,13 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
       );
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$13, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$14, [
         vue.createElementVNode("strong", null, vue.toDisplayString(price.value), 1)
       ]);
     };
   }
 });
-const _hoisted_1$12 = { class: "lupa-search-box-product-regular-price" };
+const _hoisted_1$13 = { class: "lupa-search-box-product-regular-price" };
 const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductRegularPrice",
   props: {
@@ -3930,11 +3960,11 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
       );
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$12, vue.toDisplayString(price.value), 1);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$13, vue.toDisplayString(price.value), 1);
     };
   }
 });
-const _hoisted_1$11 = ["innerHTML"];
+const _hoisted_1$12 = ["innerHTML"];
 const _hoisted_2$K = { key: 0 };
 const _hoisted_3$y = { key: 1 };
 const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
@@ -3965,7 +3995,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         class: [className.value, "lupa-search-box-product-custom"],
         innerHTML: text.value
-      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$11)) : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$12)) : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         key: 1,
         class: [className.value, "lupa-search-box-product-custom"]
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
@@ -3977,7 +4007,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$10 = ["innerHTML"];
+const _hoisted_1$11 = ["innerHTML"];
 const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustomHtml",
   props: {
@@ -3998,7 +4028,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         class: className.value,
         innerHTML: text.value
-      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$10);
+      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$11);
     };
   }
 });
@@ -4192,7 +4222,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
     setLoading
   };
 });
-const _hoisted_1$$ = { class: "lupa-search-box-add-to-cart-wrapper" };
+const _hoisted_1$10 = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$J = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$x = ["onClick", "disabled"];
 const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
@@ -4222,7 +4252,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
       loading.value = false;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$10, [
         vue.createElementVNode("div", _hoisted_2$J, [
           vue.createElementVNode("button", {
             onClick: vue.withModifiers(handleClick, ["stop", "prevent"]),
@@ -4236,6 +4266,10 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$$ = {
+  key: 1,
+  class: "lupa-search-box-element-badge-wrapper"
+};
 const __default__$4 = {
   components: {
     SearchBoxProductImage: _sfc_main$1c,
@@ -4259,7 +4293,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
   setup(__props) {
     const props = __props;
     const dynamicDataStore = useDynamicDataStore();
-    const { loading, dynamicDataIdMap } = storeToRefs(dynamicDataStore);
+    const { loading, loadingIds, dynamicDataIdMap } = storeToRefs(dynamicDataStore);
     const elementComponent = vue.computed(() => {
       switch (props.element.type) {
         case DocumentElementType.IMAGE:
@@ -4284,9 +4318,6 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
     const displayElement = vue.computed(() => {
       return props.element.display ? props.element.display(props.item) : true;
     });
-    const isLoadingDynamicData = vue.computed(() => {
-      return Boolean(props.element.dynamic && loading.value);
-    });
     const enhancedItem = vue.computed(() => {
       var _a, _b, _c, _d;
       if (!((_a = props.item) == null ? void 0 : _a.id)) {
@@ -4295,26 +4326,295 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
       const enhancementData = (_d = (_c = dynamicDataIdMap.value) == null ? void 0 : _c[(_b = props.item) == null ? void 0 : _b.id]) != null ? _d : {};
       return __spreadValues(__spreadValues({}, props.item), enhancementData);
     });
+    const isLoadingDynamicData = (id) => {
+      return Boolean(props.element.dynamic && id && loading.value && (loadingIds == null ? void 0 : loadingIds.value[id]));
+    };
     return (_ctx, _cache) => {
-      return displayElement.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(elementComponent.value), {
-        key: 0,
-        item: enhancedItem.value,
-        options: _ctx.element,
-        labels: _ctx.labels,
-        class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value }),
-        inStock: _ctx.isInStock
-      }, null, 8, ["item", "options", "labels", "class", "inStock"])) : vue.createCommentVNode("", true);
+      var _a, _b;
+      return !_ctx.$slots.badges ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+        displayElement.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(elementComponent.value), {
+          key: 0,
+          item: enhancedItem.value,
+          options: _ctx.element,
+          labels: _ctx.labels,
+          class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData((_a = _ctx.item) == null ? void 0 : _a.id) }),
+          inStock: _ctx.isInStock
+        }, null, 8, ["item", "options", "labels", "class", "inStock"])) : vue.createCommentVNode("", true)
+      ], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
+        displayElement.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(elementComponent.value), {
+          key: 0,
+          item: enhancedItem.value,
+          options: _ctx.element,
+          labels: _ctx.labels,
+          class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData((_b = _ctx.item) == null ? void 0 : _b.id) }),
+          inStock: _ctx.isInStock
+        }, null, 8, ["item", "options", "labels", "class", "inStock"])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "badges")
+      ]));
     };
   }
 }));
-const _hoisted_1$_ = ["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_1$_ = { class: "lupa-badge-title" };
+const _hoisted_2$I = ["src"];
+const _hoisted_3$w = { key: 1 };
 const _hoisted_4$p = {
   key: 0,
-  class: "lupa-search-box-product-add-to-cart-section"
+  class: "lupa-badge-full-text"
 };
 const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchResultGeneratedBadge",
+  props: {
+    options: {},
+    badge: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const image = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options.generate) == null ? void 0 : _a.image) == null ? void 0 : _b.call(_a, props.badge)) != null ? _c : "";
+    });
+    const showTitle = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options.generate) == null ? void 0 : _a.showTitle) == null ? void 0 : _b.call(_a, props.badge)) != null ? _c : true;
+    });
+    const hasAdditionalText = vue.computed(() => {
+      var _a, _b;
+      return Boolean((_a = props.badge) == null ? void 0 : _a.additionalText) && typeof ((_b = props.badge) == null ? void 0 : _b.additionalText) === "string";
+    });
+    const hasTitleText = vue.computed(() => {
+      var _a, _b;
+      return Boolean((_a = props.badge) == null ? void 0 : _a.titleText) && typeof ((_b = props.badge) == null ? void 0 : _b.titleText) === "string";
+    });
+    const customClassName = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options.generate) == null ? void 0 : _a.customClass) == null ? void 0 : _b.call(_a, props.badge)) != null ? _c : "";
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["lupa-dynamic-badge", customClassName.value]),
+        style: vue.normalizeStyle({ background: _ctx.badge.backgroundColor, color: _ctx.badge.color })
+      }, [
+        vue.createElementVNode("span", _hoisted_1$_, [
+          image.value ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            src: image.value
+          }, null, 8, _hoisted_2$I)) : vue.createCommentVNode("", true),
+          hasTitleText.value && showTitle.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$w, vue.toDisplayString(_ctx.badge.titleText), 1)) : vue.createCommentVNode("", true)
+        ]),
+        hasAdditionalText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$p, vue.toDisplayString(_ctx.badge.additionalText), 1)) : vue.createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const _hoisted_1$Z = { class: "lupa-generated-badges" };
+const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchResultGeneratedBadges",
+  props: {
+    options: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const badgeField = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const fieldHasBadges = ((_a = props.options.generate) == null ? void 0 : _a.key) && ((_d = props.options.product) == null ? void 0 : _d[(_c = (_b = props.options.generate) == null ? void 0 : _b.key) != null ? _c : ""]) && Array.isArray(props.options.product[(_f = (_e = props.options.generate) == null ? void 0 : _e.key) != null ? _f : ""]);
+      return fieldHasBadges ? props.options.product[(_h = (_g = props.options.generate) == null ? void 0 : _g.key) != null ? _h : ""] : [];
+    });
+    const keyMap = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.options.generate) == null ? void 0 : _a.keyMap) != null ? _b : {};
+    });
+    const badges = vue.computed(() => {
+      return badgeField.value.filter((f2) => Boolean(f2)).map((f2) => ({
+        backgroundColor: keyMap.value.backgroundColor ? f2[keyMap.value.backgroundColor] : void 0,
+        color: keyMap.value.color ? f2[keyMap.value.color] : void 0,
+        titleText: keyMap.value.titleText ? f2[keyMap.value.titleText] : void 0,
+        additionalText: keyMap.value.additionalText ? f2[keyMap.value.additionalText] : void 0,
+        id: keyMap.value.id ? f2[keyMap.value.id] : void 0
+      })).filter((b) => Boolean(b.id));
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(badges.value, (badge) => {
+          return vue.openBlock(), vue.createBlock(_sfc_main$13, {
+            key: badge.id,
+            badge,
+            options: _ctx.options
+          }, null, 8, ["badge", "options"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$Y = ["innerHTML"];
+const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
+  __name: "CustomBadge",
+  props: {
+    badge: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const text = vue.computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = props.badge).html) == null ? void 0 : _c.call(_b, (_a = props.badge.product) != null ? _a : {});
+    });
+    const className = vue.computed(() => {
+      var _a;
+      return (_a = props.badge.className) != null ? _a : "";
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(className.value),
+        innerHTML: text.value
+      }, null, 10, _hoisted_1$Y);
+    };
+  }
+});
+const _hoisted_1$X = { class: "lupa-text-badges" };
+const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TextBadge",
+  props: {
+    badge: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const badges = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.badge) == null ? void 0 : _a.value) != null ? _b : [];
+    });
+    const displayBadges = vue.computed(() => {
+      return badges.value.slice(0, props.badge.maxItems);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayBadges.value, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            class: "lupa-badge lupa-text-badge",
+            key: item
+          }, vue.toDisplayString(_ctx.badge.prefix) + vue.toDisplayString(item), 1);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$W = { class: "lupa-image-badges" };
+const _hoisted_2$H = ["src"];
+const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
+  __name: "ImageBadge",
+  props: {
+    badge: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const badges = vue.computed(() => {
+      return props.badge.value;
+    });
+    const displayBadges = vue.computed(() => {
+      return badges.value.slice(0, props.badge.maxItems);
+    });
+    const getImageUrl = (src) => {
+      if (!props.badge.rootImageUrl) {
+        return src;
+      }
+      return `${props.badge.rootImageUrl}${src}`;
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayBadges.value, (item) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            class: "lupa-badge lupa-image-badge",
+            key: item
+          }, [
+            vue.createElementVNode("img", {
+              src: getImageUrl(item)
+            }, null, 8, _hoisted_2$H)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$V = { id: "lupa-search-results-badges" };
+const __default__$3 = {
+  components: {
+    CustomBadge: _sfc_main$11,
+    TextBadge: _sfc_main$10,
+    ImageBadge: _sfc_main$$
+  }
+};
+const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+  __name: "SearchResultsBadgeWrapper",
+  props: {
+    position: {},
+    options: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const positionValue = vue.computed(() => {
+      var _a;
+      return (_a = props.position) != null ? _a : "card";
+    });
+    const anchorPosition = vue.computed(() => {
+      return props.options.anchor;
+    });
+    const badges = vue.computed(() => {
+      if (!props.options.elements) {
+        return [];
+      }
+      return props.options.elements.filter((e) => {
+        var _a;
+        return !e.display || e.display((_a = props.options.product) != null ? _a : {});
+      }).map((x) => {
+        var _a;
+        return __spreadProps(__spreadValues({}, x), {
+          value: ((_a = props.options.product) == null ? void 0 : _a[x.key]) || "badge",
+          product: props.options.product
+        });
+      });
+    });
+    const displayBadges = vue.computed(() => {
+      return positionValue.value === "card" ? badges.value.filter((b) => !b.position || b.position === "card") : badges.value.filter((b) => b.position === "image");
+    });
+    const getBadgeComponent = (type) => {
+      switch (type) {
+        case BadgeType.TEXT:
+          return "TextBadge";
+        case BadgeType.IMAGE:
+          return "ImageBadge";
+        case BadgeType.CUSTOM_HTML:
+          return "CustomBadge";
+        default:
+          return "CustomBadge";
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
+        vue.createElementVNode("div", {
+          id: "lupa-badges",
+          class: vue.normalizeClass(anchorPosition.value)
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayBadges.value, (badge, index) => {
+            return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getBadgeComponent(badge.type)), {
+              key: index,
+              badge
+            }, null, 8, ["badge"]);
+          }), 128)),
+          positionValue.value === "card" ? (vue.openBlock(), vue.createBlock(_sfc_main$12, {
+            key: 0,
+            options: _ctx.options
+          }, null, 8, ["options"])) : vue.createCommentVNode("", true)
+        ], 2)
+      ]);
+    };
+  }
+}));
+const _hoisted_1$U = ["href"];
+const _hoisted_2$G = { class: "lupa-search-box-product-image-section" };
+const _hoisted_3$v = { class: "lupa-search-box-product-details-section" };
+const _hoisted_4$o = {
+  key: 0,
+  class: "lupa-search-box-product-add-to-cart-section"
+};
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProduct",
   props: {
     item: {},
@@ -4331,6 +4631,9 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
       var _a, _b;
       return generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", props.item);
     });
+    const badgeOptions = vue.computed(() => {
+      return __spreadProps(__spreadValues({}, props.panelOptions.badges), { product: props.item });
+    });
     const imageElements = vue.computed(() => {
       var _a, _b;
       return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e) => e.type === DocumentElementType.IMAGE)) != null ? _b : [];
@@ -4370,7 +4673,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
         "data-cy": "lupa-search-box-product",
         onClick: handleClick
       }), [
-        vue.createElementVNode("div", _hoisted_2$I, [
+        vue.createElementVNode("div", _hoisted_2$G, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(imageElements.value, (element) => {
             return vue.openBlock(), vue.createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
@@ -4382,19 +4685,31 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        vue.createElementVNode("div", _hoisted_3$w, [
+        vue.createElementVNode("div", _hoisted_3$v, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(detailElements.value, (element) => {
+            var _a;
             return vue.openBlock(), vue.createBlock(_sfc_main$14, {
+              key: element.key,
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
-              key: element.key,
               labels: _ctx.labels,
               link: link.value
-            }, null, 8, ["item", "element", "labels", "link"]);
+            }, vue.createSlots({ _: 2 }, [
+              badgeOptions.value && ((_a = badgeOptions.value) == null ? void 0 : _a.anchorElementKey) === element.key ? {
+                name: "badges",
+                fn: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$_, {
+                    options: badgeOptions.value,
+                    position: "card"
+                  }, null, 8, ["options"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$p, [
+        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, [
           vue.createVNode(_sfc_main$14, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -4404,7 +4719,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
             isInStock: isInStock.value
           }, null, 8, ["item", "element", "labels", "link", "isInStock"])
         ])) : vue.createCommentVNode("", true)
-      ], 16, _hoisted_1$_);
+      ], 16, _hoisted_1$U);
     };
   }
 });
@@ -4465,8 +4780,8 @@ const useTrackingStore = defineStore("tracking", () => {
   };
   return { trackSearch, trackResults, trackEvent };
 });
-const _hoisted_1$Z = { id: "lupa-search-box-products" };
-const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$T = { id: "lupa-search-box-products" };
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProducts",
   props: {
     items: {},
@@ -4527,7 +4842,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
         _ctx.$slots.productCard ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.items, (item, index) => {
           return vue.renderSlot(_ctx.$slots, "productCard", {
             key: index,
@@ -4539,7 +4854,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
             itemClicked: handleProductClick
           });
         }), 128)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$13, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$Z, {
             key: index,
             item,
             panelOptions: _ctx.panelOptions,
@@ -4553,7 +4868,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductsWrapper",
   props: {
     panel: {},
@@ -4605,7 +4920,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     const getItemsDebounced = debounce$1(getItems, props.debounce);
     return (_ctx, _cache) => {
       var _a, _b;
-      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$Y, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: _ctx.panel,
         labels: _ctx.labels,
@@ -4623,7 +4938,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxRelatedSourceWrapper",
   props: {
     panel: {},
@@ -4695,7 +5010,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       var _a, _b;
-      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$Y, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: documentPanelOptions.value,
         labels: _ctx.labels,
@@ -4713,16 +5028,16 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$Y = {
+const _hoisted_1$S = {
   key: 0,
   id: "lupa-search-box-panel"
 };
-const _hoisted_2$H = ["data-cy"];
-const _hoisted_3$v = {
+const _hoisted_2$F = ["data-cy"];
+const _hoisted_3$u = {
   key: 0,
   class: "lupa-panel-title lupa-panel-title-top-results"
 };
-const _hoisted_4$o = {
+const _hoisted_4$n = {
   key: 1,
   class: "lupa-panel-title"
 };
@@ -4730,14 +5045,14 @@ const _hoisted_5$e = {
   key: 1,
   id: "lupa-search-box-panel"
 };
-const __default__$3 = {
+const __default__$2 = {
   components: {
     SearchBoxSuggestionsWrapper: _sfc_main$1e,
-    SearchBoxProductsWrapper: _sfc_main$11,
-    SearchBoxRelatedSourceWrapper: _sfc_main$10
+    SearchBoxProductsWrapper: _sfc_main$X,
+    SearchBoxRelatedSourceWrapper: _sfc_main$W
   }
 };
-const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
   __name: "SearchBoxMainPanel",
   props: {
     options: {},
@@ -4883,7 +5198,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         ref_key: "panelContainer",
         ref: panelContainer
       }, [
-        displayResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [
+        displayResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
           labels.value.closePanel ? (vue.openBlock(), vue.createElementBlock("a", {
             key: 0,
             class: "lupa-search-box-close-panel",
@@ -4904,8 +5219,8 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
                 ]),
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
-                ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$v, vue.toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : vue.createCommentVNode("", true),
-                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, vue.toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
+                ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$u, vue.toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : vue.createCommentVNode("", true),
+                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$n, vue.toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
                 panel.queryKey && canShowPanel(panel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent(panel.type)), {
                   key: 2,
                   panel,
@@ -4925,7 +5240,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
                     key: "0"
                   } : void 0
                 ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : vue.createCommentVNode("", true)
-              ], 10, _hoisted_2$H);
+              ], 10, _hoisted_2$F);
             }), 128))
           ], 4),
           !vue.unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (vue.openBlock(), vue.createBlock(_sfc_main$1h, {
@@ -4964,9 +5279,9 @@ const unbindSearchTriggers = (triggers = [], event) => {
   const elements = getElements(triggers);
   elements.forEach((e) => e == null ? void 0 : e.removeEventListener(BIND_EVENT, event));
 };
-const _hoisted_1$X = { id: "lupa-search-box" };
-const _hoisted_2$G = { class: "lupa-search-box-wrapper" };
-const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$R = { id: "lupa-search-box" };
+const _hoisted_2$E = { class: "lupa-search-box-wrapper" };
+const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBox",
   props: {
     options: {},
@@ -5211,8 +5526,8 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
     };
     return (_ctx, _cache) => {
       var _a2;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
-        vue.createElementVNode("div", _hoisted_2$G, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
+        vue.createElementVNode("div", _hoisted_2$E, [
           vue.createVNode(_sfc_main$1l, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
@@ -5224,7 +5539,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
             onFocus: _cache[0] || (_cache[0] = ($event) => opened.value = true),
             onClose: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close"))
           }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
-          opened.value || _ctx.isSearchContainer ? (vue.openBlock(), vue.createBlock(_sfc_main$$, {
+          opened.value || _ctx.isSearchContainer ? (vue.openBlock(), vue.createBlock(_sfc_main$V, {
             key: 0,
             options: panelOptions.value,
             inputValue: inputValue.value,
@@ -5312,11 +5627,11 @@ const getSearchParams = (url, params, baseUrl) => {
   }
   return searchParams;
 };
-const getInitialSearchResults = (options, defaultData) => __async(exports, null, function* () {
+const getInitialSearchResults = (options, getQueryParamName, defaultData) => __async(exports, null, function* () {
   var _a, _b, _c;
   const searchParams = getSearchParams((_a = options.ssr) == null ? void 0 : _a.url, void 0, (_b = options.ssr) == null ? void 0 : _b.baseUrl);
   const publicQuery = createPublicQuery(
-    parseParams(searchParams),
+    parseParams(getQueryParamName, searchParams),
     options.sort,
     defaultData == null ? void 0 : defaultData.pageSize
   );
@@ -5328,20 +5643,20 @@ const getInitialSearchResults = (options, defaultData) => __async(exports, null,
     options.options.onError(e);
   }
 });
-const _hoisted_1$W = {
+const _hoisted_1$Q = {
   key: 0,
   id: "lupa-search-results-did-you-mean"
 };
-const _hoisted_2$F = {
+const _hoisted_2$D = {
   key: 0,
   "data-cy": "suggested-search-text-label"
 };
-const _hoisted_3$u = {
+const _hoisted_3$t = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$n = { key: 1 };
-const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$m = { key: 1 };
+const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
     labels: {}
@@ -5373,8 +5688,8 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
       paramStore.goToResults({ searchText, facet });
     };
     return (_ctx, _cache) => {
-      return vue.unref(searchResult).suggestedSearchText || didYouMeanValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
-        vue.unref(searchResult).suggestedSearchText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$F, [
+      return vue.unref(searchResult).suggestedSearchText || didYouMeanValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
+        vue.unref(searchResult).suggestedSearchText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.labels.noResultsSuggestion.split(" "), (label, index) => {
             return vue.openBlock(), vue.createElementBlock("span", { key: index }, [
               vue.createElementVNode("span", {
@@ -5383,7 +5698,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
             ]);
           }), 128))
         ])) : vue.createCommentVNode("", true),
-        didYouMeanValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$u, [
+        didYouMeanValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$t, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.labels.didYouMean.split(" "), (label, index) => {
             return vue.openBlock(), vue.createElementBlock("span", { key: index }, [
               label.includes("{1}") ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -5391,7 +5706,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.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 }))
-              }, vue.toDisplayString(didYouMeanValue.value) + " ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$n, vue.toDisplayString(label) + " ", 1))
+              }, vue.toDisplayString(didYouMeanValue.value) + " ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$m, vue.toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -5399,12 +5714,12 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$V = {
+const _hoisted_1$P = {
   key: 0,
   class: "lupa-search-results-summary"
 };
-const _hoisted_2$E = ["innerHTML"];
-const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_2$C = ["innerHTML"];
+const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsSummary",
   props: {
     label: {},
@@ -5419,8 +5734,8 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
       return addParamsToLabel(props.label, range, `<span>${totalItems.value}</span>`);
     });
     return (_ctx, _cache) => {
-      return vue.unref(totalItems) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-        vue.createElementVNode("div", { innerHTML: summaryLabel.value }, null, 8, _hoisted_2$E),
+      return vue.unref(totalItems) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
+        vue.createElementVNode("div", { innerHTML: summaryLabel.value }, null, 8, _hoisted_2$C),
         _ctx.clearable ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: "lupa-filter-clear",
@@ -5431,18 +5746,18 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$U = {
+const _hoisted_1$O = {
   key: 0,
   class: "lupa-result-page-title",
   "data-cy": "lupa-result-page-title"
 };
-const _hoisted_2$D = { key: 0 };
-const _hoisted_3$t = {
+const _hoisted_2$B = { key: 0 };
+const _hoisted_3$s = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$m = ["innerHTML"];
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$l = ["innerHTML"];
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsTitle",
   props: {
     options: {},
@@ -5477,12 +5792,12 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", null, [
-        showSearchTitle.value ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_1$U, [
+        showSearchTitle.value ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_1$O, [
           vue.createTextVNode(vue.toDisplayString(_ctx.options.labels.searchResults), 1),
-          queryText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$D, "'" + vue.toDisplayString(queryText.value) + "'", 1)) : vue.createCommentVNode("", true),
-          showProductCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$t, "(" + vue.toDisplayString(vue.unref(totalItems)) + ")", 1)) : vue.createCommentVNode("", true)
+          queryText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$B, "'" + vue.toDisplayString(queryText.value) + "'", 1)) : vue.createCommentVNode("", true),
+          showProductCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$s, "(" + vue.toDisplayString(vue.unref(totalItems)) + ")", 1)) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
-        _ctx.showSummary ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+        _ctx.showSummary ? (vue.openBlock(), vue.createBlock(_sfc_main$S, {
           key: 1,
           label: summaryLabel.value
         }, null, 8, ["label"])) : vue.createCommentVNode("", true),
@@ -5490,21 +5805,21 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
           key: 2,
           class: "lupa-result-page-description-top",
           innerHTML: descriptionTop.value
-        }, null, 8, _hoisted_4$m)) : vue.createCommentVNode("", true)
+        }, null, 8, _hoisted_4$l)) : vue.createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$T = { class: "lupa-search-result-filter-value" };
-const _hoisted_2$C = {
+const _hoisted_1$N = { class: "lupa-search-result-filter-value" };
+const _hoisted_2$A = {
   class: "lupa-current-filter-label",
   "data-cy": "lupa-current-filter-label"
 };
-const _hoisted_3$s = {
+const _hoisted_3$r = {
   class: "lupa-current-filter-value",
   "data-cy": "lupa-current-filter-value"
 };
-const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "CurrentFilterDisplay",
   props: {
     filter: {}
@@ -5516,28 +5831,28 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
       emit("remove", { filter: props.filter });
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
         vue.createElementVNode("div", {
           class: "lupa-current-filter-action",
           onClick: handleClick
         }, "⨉"),
-        vue.createElementVNode("div", _hoisted_2$C, vue.toDisplayString(_ctx.filter.label) + ": ", 1),
-        vue.createElementVNode("div", _hoisted_3$s, vue.toDisplayString(_ctx.filter.value), 1)
+        vue.createElementVNode("div", _hoisted_2$A, vue.toDisplayString(_ctx.filter.label) + ": ", 1),
+        vue.createElementVNode("div", _hoisted_3$r, vue.toDisplayString(_ctx.filter.value), 1)
       ]);
     };
   }
 });
-const _hoisted_1$S = { class: "lupa-filter-title-text" };
-const _hoisted_2$B = {
+const _hoisted_1$M = { class: "lupa-filter-title-text" };
+const _hoisted_2$z = {
   key: 0,
   class: "lupa-filter-count"
 };
-const _hoisted_3$r = {
+const _hoisted_3$q = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$l = { class: "lupa-current-filter-list" };
-const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$k = { class: "lupa-current-filter-list" };
+const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
   __name: "CurrentFilters",
   props: {
     options: {},
@@ -5546,6 +5861,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const isOpen = vue.ref(false);
     const paramsStore = useParamsStore();
+    const optionStore = useOptionsStore();
     const searchResultStore = useSearchResultStore();
     const { filters, displayFilters, currentFilterCount } = storeToRefs(searchResultStore);
     const currentFilters = vue.computed(() => filters.value);
@@ -5563,6 +5879,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
             // TODO: Fix any
             paramsStore.appendParams,
             { type: "terms", value: filter.value, key: filter.key },
+            optionStore.getQueryParamName,
             currentFilters.value
           );
           break;
@@ -5570,13 +5887,17 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           toggleHierarchyFilter(
             paramsStore.appendParams,
             { type: "hierarchy", value: filter.value, key: filter.key },
+            optionStore.getQueryParamName,
             currentFilters.value,
             true
           );
           break;
         case "range":
           paramsStore.removeParameters({
-            paramsToRemove: [QUERY_PARAMS.PAGE, `${FACET_PARAMS_TYPE.RANGE}${filter.key}`]
+            paramsToRemove: [
+              optionStore.getQueryParamName(QUERY_PARAMS.PAGE),
+              `${FACET_PARAMS_TYPE.RANGE}${filter.key}`
+            ]
           });
           break;
       }
@@ -5592,19 +5913,19 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
           class: "lupa-current-filter-title",
           onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
         }, [
-          vue.createElementVNode("div", _hoisted_1$S, [
+          vue.createElementVNode("div", _hoisted_1$M, [
             vue.createTextVNode(vue.toDisplayString((_c = (_b = (_a = _ctx.options) == null ? void 0 : _a.labels) == null ? void 0 : _b.title) != null ? _c : "") + " ", 1),
-            _ctx.expandable ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$B, " (" + vue.toDisplayString(vue.unref(currentFilterCount)) + ") ", 1)) : vue.createCommentVNode("", true)
+            _ctx.expandable ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$z, " (" + vue.toDisplayString(vue.unref(currentFilterCount)) + ") ", 1)) : vue.createCommentVNode("", true)
           ]),
           _ctx.expandable ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: vue.normalizeClass(["lupa-filter-title-caret", isOpen.value && "open"])
           }, null, 2)) : vue.createCommentVNode("", true)
         ]),
-        !_ctx.expandable || isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$r, [
-          vue.createElementVNode("div", _hoisted_4$l, [
+        !_ctx.expandable || isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$q, [
+          vue.createElementVNode("div", _hoisted_4$k, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(displayFilters), (filter) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$W, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
                 key: filter.key + "_" + filter.value,
                 filter,
                 onRemove: handleRemove
@@ -5621,8 +5942,8 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$R = ["href"];
-const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$L = ["href"];
+const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "CategoryFilterItem",
   props: {
     options: {},
@@ -5659,20 +5980,20 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
           "data-cy": "lupa-child-category-item",
           href: urlLink.value,
           onClick: handleNavigation
-        }, vue.toDisplayString(title.value), 9, _hoisted_1$R)
+        }, vue.toDisplayString(title.value), 9, _hoisted_1$L)
       ], 2);
     };
   }
 });
-const _hoisted_1$Q = {
+const _hoisted_1$K = {
   class: "lupa-category-filter",
   "data-cy": "lupa-category-filter"
 };
-const _hoisted_2$A = { class: "lupa-category-back" };
-const _hoisted_3$q = ["href"];
-const _hoisted_4$k = ["href"];
+const _hoisted_2$y = { class: "lupa-category-back" };
+const _hoisted_3$p = ["href"];
+const _hoisted_4$j = ["href"];
 const _hoisted_5$d = { class: "lupa-child-category-list" };
-const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "CategoryFilter",
   props: {
     options: {}
@@ -5758,14 +6079,14 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
     __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
-        vue.createElementVNode("div", _hoisted_2$A, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
+        vue.createElementVNode("div", _hoisted_2$y, [
           hasBackButton.value ? (vue.openBlock(), vue.createElementBlock("a", {
             key: 0,
             "data-cy": "lupa-category-back",
             href: backUrlLink.value,
             onClick: handleNavigationBack
-          }, vue.toDisplayString(backTitle.value), 9, _hoisted_3$q)) : vue.createCommentVNode("", true)
+          }, vue.toDisplayString(backTitle.value), 9, _hoisted_3$p)) : vue.createCommentVNode("", true)
         ]),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["lupa-current-category", { "lupa-current-category-active": isActive }])
@@ -5775,11 +6096,11 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
             href: parentUrlLink.value,
             class: vue.normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, vue.toDisplayString(parentTitle.value), 11, _hoisted_4$k)
+          }, vue.toDisplayString(parentTitle.value), 11, _hoisted_4$j)
         ], 2),
         vue.createElementVNode("div", _hoisted_5$d, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categoryChildren.value, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$U, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: getCategoryKey(child),
               item: child,
               options: _ctx.options
@@ -5790,13 +6111,13 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$P = {
+const _hoisted_1$J = {
   class: "lupa-search-result-facet-term-values",
   "data-cy": "lupa-search-result-facet-term-values"
 };
-const _hoisted_2$z = ["placeholder"];
-const _hoisted_3$p = { class: "lupa-terms-list" };
-const _hoisted_4$j = ["onClick"];
+const _hoisted_2$x = ["placeholder"];
+const _hoisted_3$o = { class: "lupa-terms-list" };
+const _hoisted_4$i = ["onClick"];
 const _hoisted_5$c = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$8 = { class: "lupa-term-checkbox-label" };
 const _hoisted_7$6 = { class: "lupa-term-label" };
@@ -5806,7 +6127,7 @@ const _hoisted_8$1 = {
 };
 const _hoisted_9$1 = { key: 0 };
 const _hoisted_10$1 = { key: 1 };
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "TermFacet",
   props: {
     options: {},
@@ -5875,17 +6196,17 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       return selectedItems == null ? void 0 : selectedItems.includes((_b = item.title) == null ? void 0 : _b.toString());
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
         isFilterable.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
           key: 0,
           class: "lupa-term-filter",
           "data-cy": "lupa-term-filter",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
           placeholder: _ctx.options.labels.facetFilter
-        }, null, 8, _hoisted_2$z)), [
+        }, null, 8, _hoisted_2$x)), [
           [vue.vModelText, termFilter.value]
         ]) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_3$p, [
+        vue.createElementVNode("div", _hoisted_3$o, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayValues.value, (item) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: vue.normalizeClass(["lupa-facet-term", { checked: isChecked(item) }]),
@@ -5902,7 +6223,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("span", _hoisted_7$6, vue.toDisplayString(item.title), 1),
                 _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$1, "(" + vue.toDisplayString(item.count) + ")", 1)) : vue.createCommentVNode("", true)
               ])
-            ], 10, _hoisted_4$j);
+            ], 10, _hoisted_4$i);
           }), 128))
         ]),
         displayShowMore.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -6893,16 +7214,16 @@ var m = { name: "Slider", emits: ["input", "update:modelValue", "start", "slide"
 m.render = function(e, t, r, i, n, o) {
   return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps(e.sliderProps, { ref: "slider" }), null, 16);
 }, m.__file = "src/Slider.vue";
-const _hoisted_1$O = { class: "lupa-search-result-facet-stats-values" };
-const _hoisted_2$y = {
+const _hoisted_1$I = { class: "lupa-search-result-facet-stats-values" };
+const _hoisted_2$w = {
   key: 0,
   class: "lupa-stats-facet-summary"
 };
-const _hoisted_3$o = {
+const _hoisted_3$n = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$i = {
+const _hoisted_4$h = {
   key: 0,
   class: "lupa-stats-range-label"
 };
@@ -6921,7 +7242,7 @@ const _hoisted_13 = {
   key: 2,
   class: "lupa-stats-slider-wrapper"
 };
-const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "StatsFacet",
   props: {
     options: {},
@@ -7090,10 +7411,10 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       innerSliderRange.value = value;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
-        !isInputVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$y, vue.toDisplayString(statsSummary.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$o, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
+        !isInputVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, vue.toDisplayString(statsSummary.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$n, [
           vue.createElementVNode("div", null, [
-            rangeLabelFrom.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$i, vue.toDisplayString(rangeLabelFrom.value), 1)) : vue.createCommentVNode("", true),
+            rangeLabelFrom.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$h, vue.toDisplayString(rangeLabelFrom.value), 1)) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_5$b, [
               vue.withDirectives(vue.createElementVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -7157,10 +7478,10 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$N = { class: "lupa-term-checkbox-wrapper" };
-const _hoisted_2$x = { class: "lupa-term-checkbox-label" };
-const _hoisted_3$n = { class: "lupa-term-label" };
-const _hoisted_4$h = {
+const _hoisted_1$H = { class: "lupa-term-checkbox-wrapper" };
+const _hoisted_2$v = { class: "lupa-term-checkbox-label" };
+const _hoisted_3$m = { class: "lupa-term-label" };
+const _hoisted_4$g = {
   key: 0,
   class: "lupa-term-count"
 };
@@ -7168,7 +7489,7 @@ const _hoisted_5$a = {
   key: 0,
   class: "lupa-facet-level"
 };
-const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   __name: "HierarchyFacetLevel",
   props: {
     options: {},
@@ -7214,14 +7535,14 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
           "data-cy": "lupa-facet-term",
           onClick: _cache[0] || (_cache[0] = ($event) => handleFacetClick(_ctx.item))
         }, [
-          vue.createElementVNode("div", _hoisted_1$N, [
+          vue.createElementVNode("div", _hoisted_1$H, [
             vue.createElementVNode("span", {
               class: vue.normalizeClass(["lupa-term-checkbox", { checked: isChecked.value }])
             }, null, 2)
           ]),
-          vue.createElementVNode("div", _hoisted_2$x, [
-            vue.createElementVNode("span", _hoisted_3$n, vue.toDisplayString(_ctx.item.title) + vue.toDisplayString(" "), 1),
-            _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$h, "(" + vue.toDisplayString(_ctx.item.count) + ")", 1)) : vue.createCommentVNode("", true)
+          vue.createElementVNode("div", _hoisted_2$v, [
+            vue.createElementVNode("span", _hoisted_3$m, vue.toDisplayString(_ctx.item.title) + vue.toDisplayString(" "), 1),
+            _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$g, "(" + vue.toDisplayString(_ctx.item.count) + ")", 1)) : vue.createCommentVNode("", true)
           ])
         ]),
         showChildren.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$a, [
@@ -7240,13 +7561,13 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$M = {
+const _hoisted_1$G = {
   class: "lupa-search-result-facet-term-values lupa-search-result-facet-hierarchy-values",
   "data-cy": "lupa-search-result-facet-term-values"
 };
-const _hoisted_2$w = { key: 0 };
-const _hoisted_3$m = ["placeholder"];
-const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_2$u = { key: 0 };
+const _hoisted_3$l = ["placeholder"];
+const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "HierarchyFacet",
   props: {
     options: {},
@@ -7296,19 +7617,19 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
       showAll.value = true;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
-        isFilterable.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
+        isFilterable.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u, [
           vue.withDirectives(vue.createElementVNode("input", {
             class: "lupa-term-filter",
             "data-cy": "lupa-term-filter",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
             placeholder: _ctx.options.labels.facetFilter
-          }, null, 8, _hoisted_3$m), [
+          }, null, 8, _hoisted_3$l), [
             [vue.vModelText, termFilter.value]
           ])
         ])) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayValues.value, (item) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$K, {
             key: item.title,
             options: _ctx.options,
             item,
@@ -7328,20 +7649,20 @@ const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$L = { class: "lupa-facet-label-text" };
-const _hoisted_2$v = {
+const _hoisted_1$F = { class: "lupa-facet-label-text" };
+const _hoisted_2$t = {
   key: 0,
   class: "lupa-facet-content",
   "data-cy": "lupa-facet-content"
 };
-const __default__$2 = {
+const __default__$1 = {
   components: {
-    TermFacet: _sfc_main$S,
-    StatsFacet: _sfc_main$R,
-    HierarchyFacet: _sfc_main$P
+    TermFacet: _sfc_main$M,
+    StatsFacet: _sfc_main$L,
+    HierarchyFacet: _sfc_main$J
   }
 };
-const _sfc_main$O = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+const _sfc_main$I = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
   __name: "FacetDisplay",
   props: {
     options: {},
@@ -7453,12 +7774,12 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
           "data-cy": "lupa-search-result-facet-label",
           onClick: toggleFacet
         }, [
-          vue.createElementVNode("div", _hoisted_1$L, vue.toDisplayString(facet.value.label), 1),
+          vue.createElementVNode("div", _hoisted_1$F, vue.toDisplayString(facet.value.label), 1),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["lupa-facet-label-caret", isOpen.value && "open"])
           }, null, 2)
         ], 2),
-        isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v, [
+        isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(facetType.value), {
             facet: facet.value,
             currentFilters: currentFilters.value[facet.value.key],
@@ -7476,12 +7797,12 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     };
   }
 }));
-const _hoisted_1$K = { class: "lupa-search-result-facet-section" };
-const _hoisted_2$u = {
+const _hoisted_1$E = { class: "lupa-search-result-facet-section" };
+const _hoisted_2$s = {
   key: 0,
   class: "lupa-facets-title"
 };
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   __name: "FacetList",
   props: {
     options: {},
@@ -7515,14 +7836,14 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     };
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
-        _ctx.options.labels.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u, vue.toDisplayString(_ctx.options.labels.title), 1)) : vue.createCommentVNode("", true),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+        _ctx.options.labels.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$s, vue.toDisplayString(_ctx.options.labels.title), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["lupa-search-result-facet-list", "lupa-" + ((_a = _ctx.facetStyle) != null ? _a : "")])
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayFacets.value, (facet) => {
             var _a2;
-            return vue.openBlock(), vue.createBlock(_sfc_main$O, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$I, {
               key: facet.key,
               facet,
               currentFilters: currentFiltersValue.value,
@@ -7537,8 +7858,8 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$J = { class: "lupa-search-result-facets" };
-const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$D = { class: "lupa-search-result-facets" };
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "Facets",
   props: {
     options: {},
@@ -7578,13 +7899,28 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     const handleFacetSelect = (facetAction) => {
       switch (facetAction.type) {
         case "terms":
-          toggleTermFilter(paramStore.appendParams, facetAction, filters.value);
+          toggleTermFilter(
+            paramStore.appendParams,
+            facetAction,
+            optionsStore.getQueryParamName,
+            filters.value
+          );
           break;
         case "range":
-          toggleRangeFilter(paramStore.appendParams, facetAction, filters.value);
+          toggleRangeFilter(
+            paramStore.appendParams,
+            facetAction,
+            optionsStore.getQueryParamName,
+            filters.value
+          );
           break;
         case "hierarchy":
-          toggleHierarchyFilter(paramStore.appendParams, facetAction, filters.value);
+          toggleHierarchyFilter(
+            paramStore.appendParams,
+            facetAction,
+            optionsStore.getQueryParamName,
+            filters.value
+          );
           break;
       }
       if (scrollToResultsOptions.value.enabled) {
@@ -7599,8 +7935,8 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       paramStore.removeParameters({ paramsToRemove: [param] });
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
-        regularFacets.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+        regularFacets.value ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
           key: 0,
           options: _ctx.options,
           facets: regularFacets.value,
@@ -7614,11 +7950,11 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$I = {
+const _hoisted_1$C = {
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters"
 };
-const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsFilters",
   props: {
     options: {},
@@ -7647,19 +7983,19 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
-        showCurrentFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$V, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+        showCurrentFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
           key: 0,
           options: _ctx.options.currentFilters,
           expandable: (_a = _ctx.expandable) != null ? _a : false
         }, null, 8, ["options", "expandable"])) : vue.createCommentVNode("", true),
-        _ctx.options.categories ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+        _ctx.options.categories ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
           key: 1,
           options: _ctx.options.categories,
           ref_key: "categoryFilters",
           ref: categoryFilters
         }, null, 8, ["options"])) : vue.createCommentVNode("", true),
-        _ctx.options.facets ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+        _ctx.options.facets ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
           key: 2,
           options: _ctx.options.facets
         }, null, 8, ["options"])) : vue.createCommentVNode("", true)
@@ -7667,20 +8003,20 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$B = {
   key: 0,
   class: "lupa-mobile-filter-sidebar"
 };
-const _hoisted_2$t = ["onClick"];
-const _hoisted_3$l = { class: "lupa-mobile-sidebar-content" };
-const _hoisted_4$g = { class: "lupa-sidebar-top" };
+const _hoisted_2$r = ["onClick"];
+const _hoisted_3$k = { class: "lupa-mobile-sidebar-content" };
+const _hoisted_4$f = { class: "lupa-sidebar-top" };
 const _hoisted_5$9 = { class: "lupa-sidebar-title" };
 const _hoisted_6$6 = {
   key: 0,
   class: "lupa-sidebar-filter-count"
 };
 const _hoisted_7$4 = { class: "lupa-sidebar-filter-options" };
-const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "MobileFilterSidebar",
   props: {
     options: {}
@@ -7706,13 +8042,13 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
       searchResultStore.setSidebarState({ visible: false });
     };
     return (_ctx, _cache) => {
-      return isMobileSidebarVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [
+      return isMobileSidebarVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
         vue.createElementVNode("div", {
           class: "lupa-sidebar-close",
           onClick: vue.withModifiers(handleMobileToggle, ["stop"])
-        }, null, 8, _hoisted_2$t),
-        vue.createElementVNode("div", _hoisted_3$l, [
-          vue.createElementVNode("div", _hoisted_4$g, [
+        }, null, 8, _hoisted_2$r),
+        vue.createElementVNode("div", _hoisted_3$k, [
+          vue.createElementVNode("div", _hoisted_4$f, [
             vue.createElementVNode("div", _hoisted_5$9, [
               vue.createTextVNode(vue.toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$6, vue.toDisplayString(vue.unref(currentFilterCount)), 1)) : vue.createCommentVNode("", true)
@@ -7723,7 +8059,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
             })
           ]),
           vue.createElementVNode("div", _hoisted_7$4, [
-            vue.createVNode(_sfc_main$L, {
+            vue.createVNode(_sfc_main$F, {
               options: _ctx.options,
               expandable: isActiveFiltersExpanded.value
             }, null, 8, ["options", "expandable"])
@@ -7733,14 +8069,14 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$G = { id: "lupa-search-results-breadcrumbs" };
-const _hoisted_2$s = ["href", "onClick"];
-const _hoisted_3$k = {
+const _hoisted_1$A = { id: "lupa-search-results-breadcrumbs" };
+const _hoisted_2$q = ["href", "onClick"];
+const _hoisted_3$j = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$f = { key: 2 };
-const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$e = { key: 2 };
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
     breadcrumbs: {}
@@ -7765,7 +8101,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
       handleRoutingEvent(link, event, hasEventRouting.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(breadcrumbsValue.value, (breadcrumb, index) => {
           return vue.openBlock(), vue.createElementBlock("span", {
             class: "lupa-search-results-breadcrumb",
@@ -7779,19 +8115,19 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
                 var _a;
                 return handleNavigation(e, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
               }
-            }, vue.toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$s)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$k, vue.toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$f, " / ")) : vue.createCommentVNode("", true)
+            }, vue.toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$q)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$j, vue.toDisplayString(getLabel(breadcrumb.label)), 1)),
+            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$e, " / ")) : vue.createCommentVNode("", true)
           ]);
         }), 128))
       ]);
     };
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$z = {
   id: "lupa-search-result-filters",
   class: "lupa-search-result-filters"
 };
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "FiltersTopDropdown",
   props: {
     options: {}
@@ -7799,8 +8135,8 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
-        _ctx.options.facets ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+        _ctx.options.facets ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
           key: 0,
           options: _ctx.options.facets,
           "facet-style": (_a = _ctx.options.facets.style) == null ? void 0 : _a.type,
@@ -7810,8 +8146,8 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$E = { id: "lupa-search-results-layout-selection" };
-const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$y = { id: "lupa-search-results-layout-selection" };
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsLayoutSelection",
   setup(__props) {
     const searchResultStore = useSearchResultStore();
@@ -7822,7 +8158,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
       searchResultStore.setLayout(layout2);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass([
             "lupa-layout-selection-grid",
@@ -7844,11 +8180,11 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$D = {
+const _hoisted_1$x = {
   key: 0,
   class: "lupa-mobile-toggle-filter-count"
 };
-const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsMobileToggle",
   props: {
     label: {},
@@ -7866,26 +8202,26 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         onClick: handleMobileToggle
       }, [
         vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-        _ctx.showFilterCount && vue.unref(currentFilterCount) > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$D, vue.toDisplayString(vue.unref(currentFilterCount)), 1)) : vue.createCommentVNode("", true)
+        _ctx.showFilterCount && vue.unref(currentFilterCount) > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$x, vue.toDisplayString(vue.unref(currentFilterCount)), 1)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$C = {
+const _hoisted_1$w = {
   key: 0,
   id: "lupa-search-results-page-select",
   "data-cy": "lupa-search-results-page-select"
 };
-const _hoisted_2$r = {
+const _hoisted_2$p = {
   key: 0,
   class: "lupa-page-number-separator"
 };
-const _hoisted_3$j = ["onClick"];
-const _hoisted_4$e = {
+const _hoisted_3$i = ["onClick"];
+const _hoisted_4$d = {
   key: 0,
   class: "lupa-page-number-separator"
 };
-const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsPageSelect",
   props: {
     lastPageLabel: {},
@@ -7951,7 +8287,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     const handlePageChange = (page) => {
       if (page > 0) {
         paramStore.appendParams({
-          params: [{ name: QUERY_PARAMS.PAGE, value: page.toString() }]
+          params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.PAGE), value: page.toString() }]
         });
         if (scrollToResultsOptions.value.enabled) {
           scrollToSearchResults(
@@ -7962,7 +8298,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return showPagination.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+      return showPagination.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
         showBack.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(firstPageLabel.value === "<" ? "lupa-page-arrow" : "lupa-show-less"),
@@ -7973,7 +8309,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             class: "lupa-page-number lupa-page-number-first",
             onClick: _cache[1] || (_cache[1] = () => handlePageChange(1))
           }, " 1 "),
-          showFirstPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$r, "...")) : vue.createCommentVNode("", true)
+          showFirstPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, "...")) : vue.createCommentVNode("", true)
         ], 64)) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pages.value, (page) => {
           return vue.openBlock(), vue.createElementBlock("div", {
@@ -7984,10 +8320,10 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
               page === _ctx.options.selectedPage ? "lupa-page-number-selected" : ""
             ]),
             "data-cy": "lupa-page-number"
-          }, vue.toDisplayString(page), 11, _hoisted_3$j);
+          }, vue.toDisplayString(page), 11, _hoisted_3$i);
         }), 128)),
         showLastPage.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, "...")) : vue.createCommentVNode("", true),
+          showLastPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$d, "...")) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: "lupa-page-number lupa-page-number-last",
             onClick: _cache[2] || (_cache[2] = () => {
@@ -8006,14 +8342,14 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$B = {
+const _hoisted_1$v = {
   id: "lupa-search-results-page-size",
   "data-cy": "lupa-search-results-page-size"
 };
-const _hoisted_2$q = { id: "lupa-select" };
-const _hoisted_3$i = { class: "lupa-select-label" };
-const _hoisted_4$d = ["aria-label"];
-const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_2$o = { id: "lupa-select" };
+const _hoisted_3$h = { class: "lupa-select-label" };
+const _hoisted_4$c = ["aria-label"];
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsPageSize",
   props: {
     label: {},
@@ -8021,18 +8357,19 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const paramsStore = useParamsStore();
+    const optionsStore = useOptionsStore();
     const select = vue.ref(null);
     const handleSelect = (e) => {
       const value = e.target.value;
       paramsStore.appendParams({
-        params: [{ name: QUERY_PARAMS.LIMIT, value }],
-        paramsToRemove: [QUERY_PARAMS.PAGE]
+        params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.LIMIT), value }],
+        paramsToRemove: [optionsStore.getQueryParamName(QUERY_PARAMS.PAGE)]
       });
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
-        vue.createElementVNode("div", _hoisted_2$q, [
-          vue.createElementVNode("label", _hoisted_3$i, vue.toDisplayString(_ctx.label), 1),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+        vue.createElementVNode("div", _hoisted_2$o, [
+          vue.createElementVNode("label", _hoisted_3$h, vue.toDisplayString(_ctx.label), 1),
           vue.createElementVNode("select", {
             class: "lupa-select-dropdown",
             "aria-label": _ctx.label,
@@ -8044,21 +8381,21 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options.sizes, (option) => {
               return vue.openBlock(), vue.createElementBlock("option", { key: option }, vue.toDisplayString(option), 1);
             }), 128))
-          ], 40, _hoisted_4$d)
+          ], 40, _hoisted_4$c)
         ])
       ]);
     };
   }
 });
-const _hoisted_1$A = {
+const _hoisted_1$u = {
   id: "lupa-search-results-sort",
   class: "lupa-search-results-sort"
 };
-const _hoisted_2$p = { id: "lupa-select" };
-const _hoisted_3$h = { class: "lupa-select-label" };
-const _hoisted_4$c = ["aria-label"];
+const _hoisted_2$n = { id: "lupa-select" };
+const _hoisted_3$g = { class: "lupa-select-label" };
+const _hoisted_4$b = ["aria-label"];
 const _hoisted_5$8 = ["value"];
-const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsSort",
   props: {
     options: {},
@@ -8067,6 +8404,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const paramStore = useParamsStore();
+    const optionStore = useOptionsStore();
     const { sort } = storeToRefs(paramStore);
     const selectedKey = vue.ref("");
     const previousKey = vue.ref("");
@@ -8100,15 +8438,15 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       paramStore.setSortSettings({ selectedSortKey: value, previousSortKey: previousKey.value });
       (_c = (_b = props.callbacks) == null ? void 0 : _b.onSortChange) == null ? void 0 : _c.call(_b, { selectedSortKey: value, previousSortKey: previousKey.value });
       paramStore.appendParams({
-        params: [{ name: QUERY_PARAMS.SORT, value }],
-        paramsToRemove: [QUERY_PARAMS.PAGE]
+        params: [{ name: optionStore.getQueryParamName(QUERY_PARAMS.SORT), value }],
+        paramsToRemove: [optionStore.getQueryParamName(QUERY_PARAMS.PAGE)]
       });
       previousKey.value = selectedKey.value;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
-        vue.createElementVNode("div", _hoisted_2$p, [
-          vue.createElementVNode("label", _hoisted_3$h, vue.toDisplayString(_ctx.options.label), 1),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+        vue.createElementVNode("div", _hoisted_2$n, [
+          vue.createElementVNode("label", _hoisted_3$g, vue.toDisplayString(_ctx.options.label), 1),
           vue.withDirectives(vue.createElementVNode("select", {
             class: "lupa-select-dropdown",
             "aria-label": _ctx.options.label,
@@ -8123,7 +8461,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                 value: option.key
               }, vue.toDisplayString(option.label), 9, _hoisted_5$8);
             }), 128))
-          ], 40, _hoisted_4$c), [
+          ], 40, _hoisted_4$b), [
             [vue.vModelSelect, selectedKey.value]
           ])
         ])
@@ -8131,14 +8469,14 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$z = { class: "lupa-toolbar-left" };
-const _hoisted_2$o = { key: 1 };
-const _hoisted_3$g = { key: 3 };
-const _hoisted_4$b = { key: 5 };
+const _hoisted_1$t = { class: "lupa-toolbar-left" };
+const _hoisted_2$m = { key: 1 };
+const _hoisted_3$f = { key: 3 };
+const _hoisted_4$a = { key: 5 };
 const _hoisted_5$7 = { class: "lupa-toolbar-right" };
 const _hoisted_6$5 = { key: 1 };
 const _hoisted_7$3 = { key: 3 };
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsToolbar",
   props: {
     options: {},
@@ -8237,32 +8575,32 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
         id: "lupa-search-results-toolbar",
         class: vue.normalizeClass({ "lupa-filter-no-results": !hasResults.value })
       }, [
-        vue.createElementVNode("div", _hoisted_1$z, [
-          showLayoutSelection.value ? (vue.openBlock(), vue.createBlock(_sfc_main$H, { key: 0 })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o)),
-          showItemSummary.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+        vue.createElementVNode("div", _hoisted_1$t, [
+          showLayoutSelection.value ? (vue.openBlock(), vue.createBlock(_sfc_main$B, { key: 0 })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$m)),
+          showItemSummary.value ? (vue.openBlock(), vue.createBlock(_sfc_main$S, {
             key: 2,
             label: searchSummaryLabel.value,
             clearable: vue.unref(hasAnyFilter) && showFilterClear.value,
             onClear: handleClearAll
-          }, null, 8, ["label", "clearable"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$g)),
-          displayPageSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          }, null, 8, ["label", "clearable"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f)),
+          displayPageSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
             key: 4,
             options: paginationOptions.value.pageSelect,
             "last-page-label": paginationOptions.value.labels.showMore,
             "first-page-label": paginationOptions.value.labels.showLess
-          }, null, 8, ["options", "last-page-label", "first-page-label"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$b))
+          }, null, 8, ["options", "last-page-label", "first-page-label"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$a))
         ]),
         vue.createElementVNode("div", _hoisted_5$7, [
-          vue.createVNode(_sfc_main$G, {
+          vue.createVNode(_sfc_main$A, {
             label: optionsValue.value.labels.mobileFilterButton,
             "show-filter-count": showMobileFilterCount.value
           }, null, 8, ["label", "show-filter-count"]),
-          paginationDisplay.value.pageSize ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+          paginationDisplay.value.pageSize ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 0,
             options: paginationOptions.value.pageSize,
             label: paginationOptions.value.labels.pageSize
           }, null, 8, ["options", "label"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$5)),
-          sortOptions.value ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
+          sortOptions.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
             key: 2,
             options: sortOptions.value,
             callbacks: callbacks.value
@@ -8272,259 +8610,6 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$y = { class: "lupa-badge-title" };
-const _hoisted_2$n = ["src"];
-const _hoisted_3$f = { key: 1 };
-const _hoisted_4$a = {
-  key: 0,
-  class: "lupa-badge-full-text"
-};
-const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
-  __name: "SearchResultGeneratedBadge",
-  props: {
-    options: {},
-    badge: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const image = vue.computed(() => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = props.options.generate) == null ? void 0 : _a.image) == null ? void 0 : _b.call(_a, props.badge)) != null ? _c : "";
-    });
-    const showTitle = vue.computed(() => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = props.options.generate) == null ? void 0 : _a.showTitle) == null ? void 0 : _b.call(_a, props.badge)) != null ? _c : true;
-    });
-    const hasAdditionalText = vue.computed(() => {
-      var _a, _b;
-      return Boolean((_a = props.badge) == null ? void 0 : _a.additionalText) && typeof ((_b = props.badge) == null ? void 0 : _b.additionalText) === "string";
-    });
-    const hasTitleText = vue.computed(() => {
-      var _a, _b;
-      return Boolean((_a = props.badge) == null ? void 0 : _a.titleText) && typeof ((_b = props.badge) == null ? void 0 : _b.titleText) === "string";
-    });
-    const customClassName = vue.computed(() => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = props.options.generate) == null ? void 0 : _a.customClass) == null ? void 0 : _b.call(_a, props.badge)) != null ? _c : "";
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["lupa-dynamic-badge", customClassName.value]),
-        style: vue.normalizeStyle({ background: _ctx.badge.backgroundColor, color: _ctx.badge.color })
-      }, [
-        vue.createElementVNode("span", _hoisted_1$y, [
-          image.value ? (vue.openBlock(), vue.createElementBlock("img", {
-            key: 0,
-            src: image.value
-          }, null, 8, _hoisted_2$n)) : vue.createCommentVNode("", true),
-          hasTitleText.value && showTitle.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$f, vue.toDisplayString(_ctx.badge.titleText), 1)) : vue.createCommentVNode("", true)
-        ]),
-        hasAdditionalText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$a, vue.toDisplayString(_ctx.badge.additionalText), 1)) : vue.createCommentVNode("", true)
-      ], 6);
-    };
-  }
-});
-const _hoisted_1$x = { class: "lupa-generated-badges" };
-const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
-  __name: "SearchResultGeneratedBadges",
-  props: {
-    options: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const badgeField = vue.computed(() => {
-      var _a, _b, _c, _d, _e, _f, _g;
-      const fieldHasBadges = ((_a = props.options.generate) == null ? void 0 : _a.key) && props.options.product[(_c = (_b = props.options.generate) == null ? void 0 : _b.key) != null ? _c : ""] && Array.isArray(props.options.product[(_e = (_d = props.options.generate) == null ? void 0 : _d.key) != null ? _e : ""]);
-      return fieldHasBadges ? props.options.product[(_g = (_f = props.options.generate) == null ? void 0 : _f.key) != null ? _g : ""] : [];
-    });
-    const keyMap = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.options.generate) == null ? void 0 : _a.keyMap) != null ? _b : {};
-    });
-    const badges = vue.computed(() => {
-      return badgeField.value.filter((f2) => Boolean(f2)).map((f2) => ({
-        backgroundColor: keyMap.value.backgroundColor ? f2[keyMap.value.backgroundColor] : void 0,
-        color: keyMap.value.color ? f2[keyMap.value.color] : void 0,
-        titleText: keyMap.value.titleText ? f2[keyMap.value.titleText] : void 0,
-        additionalText: keyMap.value.additionalText ? f2[keyMap.value.additionalText] : void 0,
-        id: keyMap.value.id ? f2[keyMap.value.id] : void 0
-      })).filter((b) => Boolean(b.id));
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(badges.value, (badge) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$B, {
-            key: badge.id,
-            badge,
-            options: _ctx.options
-          }, null, 8, ["badge", "options"]);
-        }), 128))
-      ]);
-    };
-  }
-});
-const _hoisted_1$w = ["innerHTML"];
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
-  __name: "CustomBadge",
-  props: {
-    badge: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const text = vue.computed(() => {
-      var _a, _b, _c;
-      return (_c = (_b = props.badge).html) == null ? void 0 : _c.call(_b, (_a = props.badge.product) != null ? _a : {});
-    });
-    const className = vue.computed(() => {
-      var _a;
-      return (_a = props.badge.className) != null ? _a : "";
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(className.value),
-        innerHTML: text.value
-      }, null, 10, _hoisted_1$w);
-    };
-  }
-});
-const _hoisted_1$v = { class: "lupa-text-badges" };
-const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
-  __name: "TextBadge",
-  props: {
-    badge: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const badges = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.badge) == null ? void 0 : _a.value) != null ? _b : [];
-    });
-    const displayBadges = vue.computed(() => {
-      return badges.value.slice(0, props.badge.maxItems);
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayBadges.value, (item) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            class: "lupa-badge lupa-text-badge",
-            key: item
-          }, vue.toDisplayString(_ctx.badge.prefix) + vue.toDisplayString(item), 1);
-        }), 128))
-      ]);
-    };
-  }
-});
-const _hoisted_1$u = { class: "lupa-image-badges" };
-const _hoisted_2$m = ["src"];
-const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
-  __name: "ImageBadge",
-  props: {
-    badge: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const badges = vue.computed(() => {
-      return props.badge.value;
-    });
-    const displayBadges = vue.computed(() => {
-      return badges.value.slice(0, props.badge.maxItems);
-    });
-    const getImageUrl = (src) => {
-      if (!props.badge.rootImageUrl) {
-        return src;
-      }
-      return `${props.badge.rootImageUrl}${src}`;
-    };
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayBadges.value, (item) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
-            class: "lupa-badge lupa-image-badge",
-            key: item
-          }, [
-            vue.createElementVNode("img", {
-              src: getImageUrl(item)
-            }, null, 8, _hoisted_2$m)
-          ]);
-        }), 128))
-      ]);
-    };
-  }
-});
-const _hoisted_1$t = { id: "lupa-search-results-badges" };
-const __default__$1 = {
-  components: {
-    CustomBadge: _sfc_main$z,
-    TextBadge: _sfc_main$y,
-    ImageBadge: _sfc_main$x
-  }
-};
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
-  __name: "SearchResultsBadgeWrapper",
-  props: {
-    position: {},
-    options: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const positionValue = vue.computed(() => {
-      var _a;
-      return (_a = props.position) != null ? _a : "card";
-    });
-    const anchorPosition = vue.computed(() => {
-      return props.options.anchor;
-    });
-    const badges = vue.computed(() => {
-      if (!props.options.elements) {
-        return [];
-      }
-      return props.options.elements.filter((e) => {
-        var _a;
-        return !e.display || e.display((_a = props.options.product) != null ? _a : {});
-      }).map((x) => {
-        var _a;
-        return __spreadProps(__spreadValues({}, x), {
-          value: ((_a = props.options.product) == null ? void 0 : _a[x.key]) || "badge",
-          product: props.options.product
-        });
-      });
-    });
-    const displayBadges = vue.computed(() => {
-      return positionValue.value === "card" ? badges.value.filter((b) => !b.position || b.position === "card") : badges.value.filter((b) => b.position === "image");
-    });
-    const getBadgeComponent = (type) => {
-      switch (type) {
-        case BadgeType.TEXT:
-          return "TextBadge";
-        case BadgeType.IMAGE:
-          return "ImageBadge";
-        case BadgeType.CUSTOM_HTML:
-          return "CustomBadge";
-        default:
-          return "CustomBadge";
-      }
-    };
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-        vue.createElementVNode("div", {
-          id: "lupa-badges",
-          class: vue.normalizeClass(anchorPosition.value)
-        }, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayBadges.value, (badge, index) => {
-            return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getBadgeComponent(badge.type)), {
-              key: index,
-              badge
-            }, null, 8, ["badge"]);
-          }), 128)),
-          positionValue.value === "card" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
-            key: 0,
-            options: _ctx.options
-          }, null, 8, ["options"])) : vue.createCommentVNode("", true)
-        ], 2)
-      ]);
-    };
-  }
-}));
 const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsProductImage",
   props: {
@@ -8959,7 +9044,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
   setup(__props, { emit }) {
     const props = __props;
     const dynamicDataStore = useDynamicDataStore();
-    const { dynamicDataIdMap, loading } = storeToRefs(dynamicDataStore);
+    const { dynamicDataIdMap, loadingIds, loading } = storeToRefs(dynamicDataStore);
     const elementComponent = vue.computed(() => {
       switch (props.element.type) {
         case DocumentElementType.IMAGE:
@@ -8985,9 +9070,6 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       }
       return "searchResultsProductTitle";
     });
-    const isLoadingDynamicData = vue.computed(() => {
-      return Boolean(props.element.dynamic && loading.value);
-    });
     const enhancedItem = vue.computed(() => {
       var _a, _b, _c, _d;
       if (!((_a = props.item) == null ? void 0 : _a.id)) {
@@ -9002,7 +9084,11 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     const handleProductEvent = (item) => {
       emit("productEvent", item);
     };
+    const isLoadingDynamicData = (id) => {
+      return Boolean(props.element.dynamic && id && loading.value && (loadingIds == null ? void 0 : loadingIds.value[id]));
+    };
     return (_ctx, _cache) => {
+      var _a;
       return displayElement.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(elementComponent.value), {
         key: 0,
         item: enhancedItem.value,
@@ -9010,7 +9096,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         labels: _ctx.labels,
         inStock: _ctx.inStock,
         link: _ctx.link,
-        class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value }),
+        class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData((_a = _ctx.item) == null ? void 0 : _a.id) }),
         onProductEvent: handleProductEvent
       }, null, 40, ["item", "options", "labels", "inStock", "link", "class"])) : vue.createCommentVNode("", true);
     };
@@ -9170,7 +9256,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         "data-cy": "lupa-search-result-product-card",
         class: ["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]
       }, customDocumentHtmlAttributes.value, { onClick: handleClick }), [
-        vue.createVNode(_sfc_main$w, { options: badgesOptions.value }, null, 8, ["options"]),
+        vue.createVNode(_sfc_main$_, { options: badgesOptions.value }, null, 8, ["options"]),
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
         }, [
@@ -9190,7 +9276,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
                 link: link.value
               }, null, 8, ["item", "element", "labels", "inStock", "link"]);
             }), 128)),
-            vue.createVNode(_sfc_main$w, {
+            vue.createVNode(_sfc_main$_, {
               options: badgesOptions.value,
               position: "image",
               class: "lupa-image-badges"
@@ -9537,7 +9623,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const searchResultStore = useSearchResultStore();
     const paramStore = useParamsStore();
-    useOptionsStore();
+    const optionStore = useOptionsStore();
     const {
       hasResults,
       currentQueryText,
@@ -9621,7 +9707,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     };
     const goToFirstPage = () => {
       paramStore.appendParams({
-        params: [{ name: QUERY_PARAMS.PAGE, value: "1" }]
+        params: [{ name: optionStore.getQueryParamName(QUERY_PARAMS.PAGE), value: "1" }]
       });
     };
     return (_ctx, _cache) => {
@@ -9632,17 +9718,17 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
           class: "lupa-loader"
         })) : vue.createCommentVNode("", true),
         vue.unref(hasResults) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          showTopFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
+          showTopFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
             key: 0,
             options: (_a = _ctx.options.filters) != null ? _a : {}
           }, null, 8, ["options"])) : vue.createCommentVNode("", true),
-          showMobileFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
+          showMobileFilters.value ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
             key: 1,
             class: "lupa-toolbar-mobile",
             options: _ctx.options,
             "pagination-location": "top"
           }, null, 8, ["options"])) : vue.createCommentVNode("", true),
-          currentFilterOptions.value ? (vue.openBlock(), vue.createBlock(_sfc_main$V, {
+          currentFilterOptions.value ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 2,
             class: vue.normalizeClass(currentFiltersClass.value),
             "data-cy": "lupa-search-result-filters-mobile-toolbar",
@@ -9656,7 +9742,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
           sdkOptions: _ctx.options.options
         }, null, 8, ["options", "sdkOptions"]),
         vue.unref(hasResults) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          vue.createVNode(_sfc_main$C, {
+          vue.createVNode(_sfc_main$w, {
             class: "lupa-toolbar-top",
             options: _ctx.options,
             "pagination-location": "top"
@@ -9686,7 +9772,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
               onClick: goToFirstPage
             }, vue.toDisplayString(_ctx.options.labels.backToFirstPage), 1)) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$C, {
+          vue.createVNode(_sfc_main$w, {
             class: "lupa-toolbar-bottom",
             options: _ctx.options,
             "pagination-location": "bottom"
@@ -9765,7 +9851,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
               onClick: handleNavigationBack
             }, vue.toDisplayString(backTitle.value), 9, _hoisted_3$5)
           ])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$C, {
+          vue.createVNode(_sfc_main$w, {
             class: "lupa-toolbar-mobile",
             "pagination-location": "top",
             options: _ctx.options
@@ -9827,7 +9913,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     const handlePopState = () => {
       var _a;
       const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url);
-      paramStore.add(parseParams(searchParams));
+      paramStore.add(parseParams(optionStore.getQueryParamName, searchParams));
     };
     vue.onMounted(() => __async(this, null, function* () {
       var _a, _b;
@@ -9927,7 +10013,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       var _a;
       const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url, params);
       const publicQuery = createPublicQuery(
-        parseParams(searchParams),
+        parseParams(optionStore.getQueryParamName, searchParams),
         props.options.sort,
         defaultSearchResultPageSize.value
       );
@@ -9947,10 +10033,10 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         }
       }
       const params = new URLSearchParams(window.location.search);
-      if (!params.has(QUERY_PARAMS.QUERY) && !props.initialData) {
+      if (!params.has(optionStore.getQueryParamName(QUERY_PARAMS.QUERY)) && !props.initialData) {
         handleUrlChange(params);
       }
-      paramStore.add(parseParams(params));
+      paramStore.add(parseParams(optionStore.getQueryParamName, params));
       paramStore.setDefaultLimit(defaultSearchResultPageSize.value);
     };
     vue.watch(searchString, () => handleParamsChange());
@@ -9984,7 +10070,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         );
         optionStore.setSearchResultOptions({ options: props.options });
         searchResultStore.add(__spreadValues({}, initialData));
-        paramStore.add(parseParams(searchParams), props.options.ssr);
+        paramStore.add(parseParams(optionStore.getQueryParamName, searchParams), props.options.ssr);
         paramStore.setDefaultLimit(defaultSearchResultPageSize.value);
         handleResults({ queryKey: props.options.queryKey, results: initialData });
       }
@@ -9997,8 +10083,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["lupa-search-result-wrapper", { "lupa-search-wrapper-no-results": !vue.unref(hasResults) }])
       }, [
         _ctx.isContainer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createVNode(_sfc_main$Z, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
-          vue.createVNode(_sfc_main$X, {
+          vue.createVNode(_sfc_main$T, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
+          vue.createVNode(_sfc_main$R, {
             "show-summary": true,
             options: _ctx.options,
             "is-product-list": (_a = _ctx.isProductList) != null ? _a : false
@@ -10008,24 +10094,24 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
           key: 1,
           options: _ctx.options
         }, null, 8, ["options"])) : vue.createCommentVNode("", true),
-        _ctx.options.filters ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+        _ctx.options.filters ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
           key: 2,
           options: _ctx.options.filters
         }, null, 8, ["options"])) : vue.createCommentVNode("", true),
-        vue.unref(currentQueryText) || _ctx.isProductList ? (vue.openBlock(), vue.createBlock(_sfc_main$J, {
+        vue.unref(currentQueryText) || _ctx.isProductList ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
           key: 3,
           breadcrumbs: _ctx.options.breadcrumbs
         }, null, 8, ["breadcrumbs"])) : vue.createCommentVNode("", true),
         isTitleResultTopPosition.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
-          showFilterSidebar.value ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          showFilterSidebar.value ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
             key: 0,
             options: (_b = _ctx.options.filters) != null ? _b : {},
             ref_key: "searchResultsFilters",
             ref: searchResultsFilters
           }, null, 8, ["options"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_3$4, [
-            vue.createVNode(_sfc_main$Z, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
-            vue.createVNode(_sfc_main$X, {
+            vue.createVNode(_sfc_main$T, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
+            vue.createVNode(_sfc_main$R, {
               options: _ctx.options,
               "is-product-list": (_c = _ctx.isProductList) != null ? _c : false
             }, null, 8, ["options", "is-product-list"]),
@@ -10040,13 +10126,13 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["options", "ssr"])
           ])
         ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 5 }, [
-          vue.createVNode(_sfc_main$Z, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
-          vue.createVNode(_sfc_main$X, {
+          vue.createVNode(_sfc_main$T, { labels: didYouMeanLabels.value }, null, 8, ["labels"]),
+          vue.createVNode(_sfc_main$R, {
             options: _ctx.options,
             "is-product-list": (_d = _ctx.isProductList) != null ? _d : false
           }, null, 8, ["options", "is-product-list"]),
           vue.createElementVNode("div", _hoisted_4$3, [
-            showFilterSidebar.value ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+            showFilterSidebar.value ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
               key: 0,
               options: (_e = _ctx.options.filters) != null ? _e : {},
               ref_key: "searchResultsFilters",
@@ -15676,7 +15762,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
           onClick: vue.withModifiers(innerClick, ["stop"])
         }, [
           vue.createElementVNode("div", _hoisted_2$7, [
-            vue.createVNode(_sfc_main$_, {
+            vue.createVNode(_sfc_main$U, {
               options: fullSearchBoxOptions.value,
               "is-search-container": true,
               ref_key: "searchBox",
@@ -17154,7 +17240,7 @@ exports.DocumentElementType = DocumentElementType;
 exports.LupaSearch = LupaSearch;
 exports.ProductList = _sfc_main$a;
 exports.Recommendations = _sfc_main$8;
-exports.SearchBox = _sfc_main$_;
+exports.SearchBox = _sfc_main$U;
 exports.SearchBoxPanelType = SearchBoxPanelType;
 exports.SearchContainer = _sfc_main$9;
 exports.SearchResults = _sfc_main$c;