@getlupa/client 1.9.4 → 1.10.0

package/dist/lupaSearch.mjs

@@ -6890,6 +6890,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,
@@ -6904,7 +6909,8 @@ const useOptionsStore = defineStore("options", () => {
     setSearchBoxOptions,
     setTrackingOptions,
     setSearchResultOptions,
-    setInitialFilters
+    setInitialFilters,
+    getQueryParamName
   };
 });
 var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
@@ -7157,9 +7163,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$1);
+  const keys = reverseKeyValue({
+    QUERY: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.QUERY) : QUERY_PARAMS$1.QUERY,
+    LIMIT: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.LIMIT) : QUERY_PARAMS$1.LIMIT,
+    PAGE: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.PAGE) : QUERY_PARAMS$1.PAGE,
+    SORT: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.SORT) : QUERY_PARAMS$1.SORT
+  });
   for (const key of regularKeys) {
     const rawKey = keys[key] || key;
     params[rawKey] = parseParam(key, searchParams);
@@ -7201,16 +7212,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 __spreadValues2(__spreadValues2({
+  const r = __spreadValues2(__spreadValues2({
     [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)) {
@@ -7231,10 +7243,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$1.QUERY) : QUERY_PARAMS$1.QUERY,
+      LIMIT: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.LIMIT) : QUERY_PARAMS$1.LIMIT,
+      PAGE: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.PAGE) : QUERY_PARAMS$1.PAGE,
+      SORT: getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.SORT) : QUERY_PARAMS$1.SORT
+    };
     return [
-      ...Object.values(QUERY_PARAMS$1),
+      ...Object.values(params),
       ...Array.from(url.searchParams.keys()).filter((k) => isFacetKey(k))
     ];
   }
@@ -7265,12 +7283,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$1.QUERY}=${encodeParam(searchText)}`;
+  const queryParam = `?${getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.QUERY) : QUERY_PARAMS$1.QUERY}=${encodeParam(searchText)}`;
   return `${link}${queryParam}${facetParam}`;
 };
 const getRelativePath = (link) => {
@@ -7299,8 +7317,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 {
@@ -7325,15 +7343,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$1.PAGE]
+    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.PAGE) : QUERY_PARAMS$1.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(
@@ -7343,10 +7361,10 @@ const toggleHierarchyFilter = (appendParams, facetAction, currentFilters, remove
   );
   appendParams({
     params: [getFacetParam(facetAction.key, newParams, FACET_PARAMS_TYPE.HIERARCHY)],
-    paramsToRemove: [QUERY_PARAMS$1.PAGE]
+    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.PAGE) : QUERY_PARAMS$1.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
@@ -7355,7 +7373,7 @@ const toggleRangeFilter = (appendParams, facetAction, currentFilters) => {
   facetValue = currentFilter === facetValue ? "" : facetValue;
   appendParams({
     params: [getFacetParam(facetAction.key, facetValue, FACET_PARAMS_TYPE.RANGE)],
-    paramsToRemove: [QUERY_PARAMS$1.PAGE],
+    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS$1.PAGE) : QUERY_PARAMS$1.PAGE],
     encode: false
   });
 };
@@ -7484,7 +7502,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
     });
@@ -7502,7 +7520,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 = ({
@@ -7510,13 +7528,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 = ({
@@ -7558,13 +7576,22 @@ const useParamsStore = defineStore("params", () => {
         })
       ] : [];
       appendParams({
-        params: [{ name: QUERY_PARAMS$1.QUERY, value: searchText }, ...facetParam],
+        params: [
+          { name: optionsStore.getQueryParamName(QUERY_PARAMS$1.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 = ({
@@ -7578,14 +7605,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) => {
@@ -8320,8 +8347,9 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
 const useDynamicDataStore = defineStore("dynamicData", () => {
   const loading = ref(false);
   const dynamicDataIdMap = ref({});
+  const loadingIds = ref({});
   const optionsStore = useOptionsStore();
-  const loadedIds = computed(() => Object.keys(dynamicDataIdMap.value));
+  computed(() => Object.keys(dynamicDataIdMap.value));
   const searchResultOptions = computed(() => optionsStore.searchResultOptions);
   const searchBoxOptions = computed(() => optionsStore.searchBoxOptions);
   const dynamicSearchResultData = computed(() => {
@@ -8361,11 +8389,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) => __spreadProps2(__spreadValues2({}, a), { [c2]: true }), {});
     loading.value = true;
     try {
       const dynamicData = dynamicSearchResultData.value || dynamicSearchBoxData.value;
@@ -8375,15 +8404,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) => __spreadProps2(__spreadValues2({}, a), { [c2.id]: c2 }),
+        (a, c2) => __spreadProps2(__spreadValues2({}, a), { [`${c2.id}`]: c2 }),
         seed
       );
       dynamicDataIdMap.value = __spreadValues2(__spreadValues2({}, 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;
@@ -8901,7 +8931,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
   setup(__props) {
     const props = __props;
     const dynamicDataStore = useDynamicDataStore();
-    const { loading, dynamicDataIdMap } = storeToRefs(dynamicDataStore);
+    const { loading, loadingIds, dynamicDataIdMap } = storeToRefs(dynamicDataStore);
     const elementComponent = computed(() => {
       switch (props.element.type) {
         case DocumentElementType.IMAGE:
@@ -8926,9 +8956,6 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
     const displayElement = computed(() => {
       return props.element.display ? props.element.display(props.item) : true;
     });
-    const isLoadingDynamicData = computed(() => {
-      return Boolean(props.element.dynamic && loading.value);
-    });
     const enhancedItem = computed(() => {
       var _a, _b, _c, _d;
       if (!((_a = props.item) == null ? void 0 : _a.id)) {
@@ -8937,13 +8964,17 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
       const enhancementData = (_d = (_c = dynamicDataIdMap.value) == null ? void 0 : _c[(_b = props.item) == null ? void 0 : _b.id]) != null ? _d : {};
       return __spreadValues2(__spreadValues2({}, props.item), enhancementData);
     });
+    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 ? (openBlock(), createBlock(resolveDynamicComponent(elementComponent.value), {
         key: 0,
         item: enhancedItem.value,
         options: _ctx.element,
         labels: _ctx.labels,
-        class: normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value }),
+        class: normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData((_a = _ctx.item) == null ? void 0 : _a.id) }),
         inStock: _ctx.isInStock
       }, null, 8, ["item", "options", "labels", "class", "inStock"])) : createCommentVNode("", true);
     };
@@ -9526,6 +9557,11 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
         ref: panelContainer
       }, [
         displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$Y, [
+          labels.value.closePanel ? (openBlock(), createElementBlock("a", {
+            key: 0,
+            class: "lupa-search-box-close-panel",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+          }, toDisplayString(labels.value.closePanel), 1)) : createCommentVNode("", true),
           createBaseVNode("div", {
             class: "lupa-main-panel",
             style: normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
@@ -9550,9 +9586,9 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
                   debounce: _ctx.options.debounce,
                   inputValue: getInput(panel),
                   labels: labels.value,
-                  onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
-                  onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
-                  onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
+                  onFetched: _cache[1] || (_cache[1] = (data) => _ctx.$emit("fetched", data)),
+                  onItemSelect: _cache[2] || (_cache[2] = (item) => _ctx.$emit("itemSelect", item)),
+                  onProductClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("product-click"))
                 }, createSlots({ _: 2 }, [
                   _ctx.$slots.productCard ? {
                     name: "productCard",
@@ -9566,14 +9602,14 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             }), 128))
           ], 4),
           !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1h, {
-            key: 0,
+            key: 1,
             labels: labels.value
           }, null, 8, ["labels"])) : createCommentVNode("", true),
           unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1k, {
-            key: 1,
+            key: 2,
             labels: labels.value,
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
-            onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
+            onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
         ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
           createVNode(_sfc_main$1i, {
@@ -9684,6 +9720,10 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       opened.value = false;
       suggestedValue.value = defaultSuggestedValue;
     };
+    const close = () => {
+      opened.value = false;
+      suggestedValue.value = defaultSuggestedValue;
+    };
     const handleKeyDown = (e) => {
       var _a2, _b;
       if (!opened.value) {
@@ -9865,7 +9905,8 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             onFetched: handleItemsFetch,
             onItemSelect: handleItemSelect,
             onGoToResults: handleSearch,
-            onProductClick: handleProductClick
+            onProductClick: handleProductClick,
+            onClose: close
           }, createSlots({ _: 2 }, [
             _ctx.$slots.productCard ? {
               name: "productCard",
@@ -10162,6 +10203,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const isOpen = ref(false);
     const paramsStore = useParamsStore();
+    const optionStore = useOptionsStore();
     const searchResultStore = useSearchResultStore();
     const { filters, displayFilters, currentFilterCount } = storeToRefs(searchResultStore);
     const currentFilters = computed(() => filters.value);
@@ -10179,6 +10221,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             // TODO: Fix any
             paramsStore.appendParams,
             { type: "terms", value: filter.value, key: filter.key },
+            optionStore.getQueryParamName,
             currentFilters.value
           );
           break;
@@ -10186,13 +10229,17 @@ const _sfc_main$V = /* @__PURE__ */ 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$1.PAGE, `${FACET_PARAMS_TYPE.RANGE}${filter.key}`]
+            paramsToRemove: [
+              optionStore.getQueryParamName(QUERY_PARAMS$1.PAGE),
+              `${FACET_PARAMS_TYPE.RANGE}${filter.key}`
+            ]
           });
           break;
       }
@@ -12194,13 +12241,28 @@ const _sfc_main$M = /* @__PURE__ */ 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) {
@@ -12567,7 +12629,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const handlePageChange = (page) => {
       if (page > 0) {
         paramStore.appendParams({
-          params: [{ name: QUERY_PARAMS$1.PAGE, value: page.toString() }]
+          params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS$1.PAGE), value: page.toString() }]
         });
         if (scrollToResultsOptions.value.enabled) {
           scrollToSearchResults(
@@ -12637,12 +12699,13 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const paramsStore = useParamsStore();
+    const optionsStore = useOptionsStore();
     const select = ref(null);
     const handleSelect = (e) => {
       const value = e.target.value;
       paramsStore.appendParams({
-        params: [{ name: QUERY_PARAMS$1.LIMIT, value }],
-        paramsToRemove: [QUERY_PARAMS$1.PAGE]
+        params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS$1.LIMIT), value }],
+        paramsToRemove: [optionsStore.getQueryParamName(QUERY_PARAMS$1.PAGE)]
       });
     };
     return (_ctx, _cache) => {
@@ -12683,6 +12746,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const paramStore = useParamsStore();
+    const optionStore = useOptionsStore();
     const { sort } = storeToRefs(paramStore);
     const selectedKey = ref("");
     const previousKey = ref("");
@@ -12716,8 +12780,8 @@ const _sfc_main$D = /* @__PURE__ */ 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$1.SORT, value }],
-        paramsToRemove: [QUERY_PARAMS$1.PAGE]
+        params: [{ name: optionStore.getQueryParamName(QUERY_PARAMS$1.SORT), value }],
+        paramsToRemove: [optionStore.getQueryParamName(QUERY_PARAMS$1.PAGE)]
       });
       previousKey.value = selectedKey.value;
     };
@@ -13575,7 +13639,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
   setup(__props, { emit: emit2 }) {
     const props = __props;
     const dynamicDataStore = useDynamicDataStore();
-    const { dynamicDataIdMap, loading } = storeToRefs(dynamicDataStore);
+    const { dynamicDataIdMap, loadingIds, loading } = storeToRefs(dynamicDataStore);
     const elementComponent = computed(() => {
       switch (props.element.type) {
         case DocumentElementType.IMAGE:
@@ -13601,9 +13665,6 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
       }
       return "searchResultsProductTitle";
     });
-    const isLoadingDynamicData = computed(() => {
-      return Boolean(props.element.dynamic && loading.value);
-    });
     const enhancedItem = computed(() => {
       var _a, _b, _c, _d;
       if (!((_a = props.item) == null ? void 0 : _a.id)) {
@@ -13618,7 +13679,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     const handleProductEvent = (item) => {
       emit2("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 ? (openBlock(), createBlock(resolveDynamicComponent(elementComponent.value), {
         key: 0,
         item: enhancedItem.value,
@@ -13626,7 +13691,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
         labels: _ctx.labels,
         inStock: _ctx.inStock,
         link: _ctx.link,
-        class: normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value }),
+        class: normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData((_a = _ctx.item) == null ? void 0 : _a.id) }),
         onProductEvent: handleProductEvent
       }, null, 40, ["item", "options", "labels", "inStock", "link", "class"])) : createCommentVNode("", true);
     };
@@ -14153,7 +14218,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const searchResultStore = useSearchResultStore();
     const paramStore = useParamsStore();
-    useOptionsStore();
+    const optionStore = useOptionsStore();
     const {
       hasResults,
       currentQueryText,
@@ -14237,7 +14302,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
     const goToFirstPage = () => {
       paramStore.appendParams({
-        params: [{ name: QUERY_PARAMS$1.PAGE, value: "1" }]
+        params: [{ name: optionStore.getQueryParamName(QUERY_PARAMS$1.PAGE), value: "1" }]
       });
     };
     return (_ctx, _cache) => {
@@ -14443,7 +14508,7 @@ const _sfc_main$c = /* @__PURE__ */ 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));
     };
     onMounted(() => __async(this, null, function* () {
       var _a, _b;
@@ -14543,7 +14608,7 @@ const _sfc_main$c = /* @__PURE__ */ 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
       );
@@ -14563,10 +14628,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         }
       }
       const params = new URLSearchParams(window.location.search);
-      if (!params.has(QUERY_PARAMS$1.QUERY) && !props.initialData) {
+      if (!params.has(optionStore.getQueryParamName(QUERY_PARAMS$1.QUERY)) && !props.initialData) {
         handleUrlChange(params);
       }
-      paramStore.add(parseParams(params));
+      paramStore.add(parseParams(optionStore.getQueryParamName, params));
       paramStore.setDefaultLimit(defaultSearchResultPageSize.value);
     };
     watch(searchString, () => handleParamsChange());
@@ -14600,7 +14665,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         );
         optionStore.setSearchResultOptions({ options: props.options });
         searchResultStore.add(__spreadValues2({}, 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 });
       }