@getlupa/client 1.9.4 → 1.10.0

package/dist/lupaSearch.umd.js

@@ -6894,6 +6894,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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,
@@ -6908,7 +6913,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       setSearchBoxOptions,
       setTrackingOptions,
       setSearchResultOptions,
-      setInitialFilters
+      setInitialFilters,
+      getQueryParamName
     };
   });
   var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
@@ -7161,9 +7167,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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);
@@ -7205,16 +7216,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     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)) {
@@ -7235,10 +7247,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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))
       ];
     }
@@ -7269,12 +7287,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     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) => {
@@ -7303,8 +7321,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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 {
@@ -7329,15 +7347,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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(
@@ -7347,10 +7365,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     );
     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
@@ -7359,7 +7377,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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
     });
   };
@@ -7488,7 +7506,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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
       });
@@ -7506,7 +7524,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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 = ({
@@ -7514,13 +7532,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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 = ({
@@ -7562,13 +7580,22 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           })
         ] : [];
         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 = ({
@@ -7582,14 +7609,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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) => {
@@ -8324,8 +8351,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   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(() => {
@@ -8365,11 +8393,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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;
@@ -8379,15 +8408,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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;
@@ -8905,7 +8935,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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:
@@ -8930,9 +8960,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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)) {
@@ -8941,13 +8968,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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);
       };
@@ -9530,6 +9561,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           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" } : {}),
@@ -9554,9 +9590,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
                     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",
@@ -9570,14 +9606,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               }), 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, {
@@ -9688,6 +9724,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         opened.value = false;
         suggestedValue.value = defaultSuggestedValue;
       };
+      const close = () => {
+        opened.value = false;
+        suggestedValue.value = defaultSuggestedValue;
+      };
       const handleKeyDown = (e) => {
         var _a2, _b;
         if (!opened.value) {
@@ -9869,7 +9909,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               onFetched: handleItemsFetch,
               onItemSelect: handleItemSelect,
               onGoToResults: handleSearch,
-              onProductClick: handleProductClick
+              onProductClick: handleProductClick,
+              onClose: close
             }, createSlots({ _: 2 }, [
               _ctx.$slots.productCard ? {
                 name: "productCard",
@@ -10166,6 +10207,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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);
@@ -10183,6 +10225,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               // TODO: Fix any
               paramsStore.appendParams,
               { type: "terms", value: filter.value, key: filter.key },
+              optionStore.getQueryParamName,
               currentFilters.value
             );
             break;
@@ -10190,13 +10233,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             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;
         }
@@ -12198,13 +12245,28 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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) {
@@ -12571,7 +12633,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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(
@@ -12641,12 +12703,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     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) => {
@@ -12687,6 +12750,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     setup(__props) {
       const props = __props;
       const paramStore = useParamsStore();
+      const optionStore = useOptionsStore();
       const { sort } = storeToRefs(paramStore);
       const selectedKey = ref("");
       const previousKey = ref("");
@@ -12720,8 +12784,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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;
       };
@@ -13579,7 +13643,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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:
@@ -13605,9 +13669,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
         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)) {
@@ -13622,7 +13683,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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,
@@ -13630,7 +13695,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           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);
       };
@@ -14157,7 +14222,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const props = __props;
       const searchResultStore = useSearchResultStore();
       const paramStore = useParamsStore();
-      useOptionsStore();
+      const optionStore = useOptionsStore();
       const {
         hasResults,
         currentQueryText,
@@ -14241,7 +14306,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       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) => {
@@ -14447,7 +14512,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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;
@@ -14547,7 +14612,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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
         );
@@ -14567,10 +14632,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           }
         }
         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());
@@ -14604,7 +14669,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           );
           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 });
         }