@getlupa/vue 0.9.6 → 0.10.0

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) => {
@@ -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;
@@ -4259,7 +4289,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 +4314,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,13 +4322,17 @@ 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) => {
+      var _a;
       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 }),
+        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);
     };
@@ -5312,11 +5343,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
   );
@@ -5546,6 +5577,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 +5595,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 +5603,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;
       }
@@ -7578,13 +7615,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) {
@@ -7951,7 +8003,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(
@@ -8021,12 +8073,13 @@ 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) => {
@@ -8067,6 +8120,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,8 +8154,8 @@ 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;
     };
@@ -8959,7 +9013,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 +9039,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 +9053,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 +9065,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);
     };
@@ -9537,7 +9592,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 +9676,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) => {
@@ -9827,7 +9882,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 +9982,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 +10002,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 +10039,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 });
       }

package/dist/lupaSearch.mjs

@@ -2246,6 +2246,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,
@@ -2260,7 +2265,8 @@ const useOptionsStore = defineStore("options", () => {
     setSearchBoxOptions,
     setTrackingOptions,
     setSearchResultOptions,
-    setInitialFilters
+    setInitialFilters,
+    getQueryParamName
   };
 });
 var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
@@ -2513,9 +2519,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);
@@ -2557,16 +2568,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)) {
@@ -2587,10 +2599,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))
     ];
   }
@@ -2621,12 +2639,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) => {
@@ -2655,8 +2673,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 {
@@ -2681,15 +2699,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(
@@ -2699,10 +2717,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
@@ -2711,7 +2729,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
   });
 };
@@ -2840,7 +2858,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
     });
@@ -2858,7 +2876,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 = ({
@@ -2866,13 +2884,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 = ({
@@ -2914,13 +2932,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 = ({
@@ -2934,14 +2961,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) => {
@@ -3676,8 +3703,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(() => {
@@ -3717,11 +3745,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;
@@ -3731,15 +3760,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;
@@ -4257,7 +4287,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
   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:
@@ -4282,9 +4312,6 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
     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)) {
@@ -4293,13 +4320,17 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
       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) => {
+      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);
     };
@@ -5310,11 +5341,11 @@ const getSearchParams = (url, params, baseUrl) => {
   }
   return searchParams;
 };
-const getInitialSearchResults = (options, defaultData) => __async(void 0, null, function* () {
+const getInitialSearchResults = (options, getQueryParamName, defaultData) => __async(void 0, 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
   );
@@ -5544,6 +5575,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);
@@ -5561,6 +5593,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;
@@ -5568,13 +5601,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.PAGE, `${FACET_PARAMS_TYPE.RANGE}${filter.key}`]
+            paramsToRemove: [
+              optionStore.getQueryParamName(QUERY_PARAMS.PAGE),
+              `${FACET_PARAMS_TYPE.RANGE}${filter.key}`
+            ]
           });
           break;
       }
@@ -7576,13 +7613,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) {
@@ -7949,7 +8001,7 @@ const _sfc_main$F = /* @__PURE__ */ 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(
@@ -8019,12 +8071,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.LIMIT, value }],
-        paramsToRemove: [QUERY_PARAMS.PAGE]
+        params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.LIMIT), value }],
+        paramsToRemove: [optionsStore.getQueryParamName(QUERY_PARAMS.PAGE)]
       });
     };
     return (_ctx, _cache) => {
@@ -8065,6 +8118,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("");
@@ -8098,8 +8152,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.SORT, value }],
-        paramsToRemove: [QUERY_PARAMS.PAGE]
+        params: [{ name: optionStore.getQueryParamName(QUERY_PARAMS.SORT), value }],
+        paramsToRemove: [optionStore.getQueryParamName(QUERY_PARAMS.PAGE)]
       });
       previousKey.value = selectedKey.value;
     };
@@ -8957,7 +9011,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     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:
@@ -8983,9 +9037,6 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       }
       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)) {
@@ -9000,7 +9051,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     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 ? (openBlock(), createBlock(resolveDynamicComponent(elementComponent.value), {
         key: 0,
         item: enhancedItem.value,
@@ -9008,7 +9063,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         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);
     };
@@ -9535,7 +9590,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const searchResultStore = useSearchResultStore();
     const paramStore = useParamsStore();
-    useOptionsStore();
+    const optionStore = useOptionsStore();
     const {
       hasResults,
       currentQueryText,
@@ -9619,7 +9674,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
     const goToFirstPage = () => {
       paramStore.appendParams({
-        params: [{ name: QUERY_PARAMS.PAGE, value: "1" }]
+        params: [{ name: optionStore.getQueryParamName(QUERY_PARAMS.PAGE), value: "1" }]
       });
     };
     return (_ctx, _cache) => {
@@ -9825,7 +9880,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;
@@ -9925,7 +9980,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
       );
@@ -9945,10 +10000,10 @@ const _sfc_main$c = /* @__PURE__ */ 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);
     };
     watch(searchString, () => handleParamsChange());
@@ -9982,7 +10037,7 @@ const _sfc_main$c = /* @__PURE__ */ 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 });
       }

package/dist/src/constants/queryParams.const.d.ts

@@ -1,9 +1,5 @@
-export declare const QUERY_PARAMS: {
-    QUERY: string;
-    PAGE: string;
-    LIMIT: string;
-    SORT: string;
-};
+import { LupaQueryParamName, LupaQueryParamValue } from '../types/General';
+export declare const QUERY_PARAMS: Record<LupaQueryParamName, LupaQueryParamValue>;
 export declare const QUERY_PARAMS_PARSED: {
     QUERY: string;
     PAGE: string;

package/dist/src/stores/dynamicData.d.ts

@@ -3,13 +3,15 @@ import type { SearchQueryResult } from '@getlupa/client-sdk/Types';
 export declare const useDynamicDataStore: import("pinia").StoreDefinition<"dynamicData", import("pinia")._UnwrapAll<Pick<{
     dynamicDataIdMap: Ref<Record<string, Document>>;
     loading: Ref<boolean>;
+    loadingIds: Ref<Record<string, boolean>>;
     enhanceSearchResultsWithDynamicData: ({ result, mode }: {
         result?: SearchQueryResult;
         mode?: 'searchBox' | 'searchResults';
     }) => Promise<{}>;
-}, "dynamicDataIdMap" | "loading">>, Pick<{
+}, "dynamicDataIdMap" | "loading" | "loadingIds">>, Pick<{
     dynamicDataIdMap: Ref<Record<string, Document>>;
     loading: Ref<boolean>;
+    loadingIds: Ref<Record<string, boolean>>;
     enhanceSearchResultsWithDynamicData: ({ result, mode }: {
         result?: SearchQueryResult;
         mode?: 'searchBox' | 'searchResults';
@@ -17,6 +19,7 @@ export declare const useDynamicDataStore: import("pinia").StoreDefinition<"dynam
 }, never>, Pick<{
     dynamicDataIdMap: Ref<Record<string, Document>>;
     loading: Ref<boolean>;
+    loadingIds: Ref<Record<string, boolean>>;
     enhanceSearchResultsWithDynamicData: ({ result, mode }: {
         result?: SearchQueryResult;
         mode?: 'searchBox' | 'searchResults';

package/dist/src/stores/options.d.ts

@@ -1,7 +1,7 @@
 import { type Ref } from 'vue';
 import type { SearchBoxOptions } from '../types/search-box/SearchBoxOptions';
 import type { SearchResultsOptions } from '../types/search-results/SearchResultsOptions';
-import type { TrackingOptions } from '../types/General';
+import type { LupaQueryParamValue, TrackingOptions } from '../types/General';
 import type { FilterGroup } from '@getlupa/client-sdk/Types';
 export declare const useOptionsStore: import("pinia").StoreDefinition<"options", import("pinia")._UnwrapAll<Pick<{
     searchBoxOptions: Ref<SearchBoxOptions>;
@@ -26,6 +26,7 @@ export declare const useOptionsStore: import("pinia").StoreDefinition<"options",
     setInitialFilters: ({ initialFilters }: {
         initialFilters: FilterGroup;
     }) => void;
+    getQueryParamName: (param: LupaQueryParamValue) => string;
 }, "searchBoxOptions" | "searchResultOptions" | "trackingOptions">>, Pick<{
     searchBoxOptions: Ref<SearchBoxOptions>;
     searchResultOptions: Ref<SearchResultsOptions>;
@@ -49,6 +50,7 @@ export declare const useOptionsStore: import("pinia").StoreDefinition<"options",
     setInitialFilters: ({ initialFilters }: {
         initialFilters: FilterGroup;
     }) => void;
+    getQueryParamName: (param: LupaQueryParamValue) => string;
 }, "initialFilters" | "envOptions" | "classMap" | "boxRoutingBehavior" | "searchResultsRoutingBehavior" | "defaultSearchResultPageSize" | "currentResolutionPageSizes">, Pick<{
     searchBoxOptions: Ref<SearchBoxOptions>;
     searchResultOptions: Ref<SearchResultsOptions>;
@@ -72,4 +74,5 @@ export declare const useOptionsStore: import("pinia").StoreDefinition<"options",
     setInitialFilters: ({ initialFilters }: {
         initialFilters: FilterGroup;
     }) => void;
-}, "setSearchBoxOptions" | "setTrackingOptions" | "setSearchResultOptions" | "setInitialFilters">>;
+    getQueryParamName: (param: LupaQueryParamValue) => string;
+}, "setSearchBoxOptions" | "setTrackingOptions" | "setSearchResultOptions" | "setInitialFilters" | "getQueryParamName">>;

package/dist/src/stores/screen.d.ts

@@ -1,20 +1,20 @@
 export declare const useScreenStore: import("pinia").StoreDefinition<"screen", import("pinia")._UnwrapAll<Pick<{
     screenWidth: import("vue").Ref<number>;
-    currentScreenWidth: import("vue").ComputedRef<"xs" | "sm" | "md" | "l" | "xl">;
+    currentScreenWidth: import("vue").ComputedRef<"l" | "xs" | "sm" | "md" | "xl">;
     isMobileWidth: import("vue").ComputedRef<boolean>;
     setScreenWidth: ({ width }: {
         width: number;
     }) => void;
 }, "screenWidth">>, Pick<{
     screenWidth: import("vue").Ref<number>;
-    currentScreenWidth: import("vue").ComputedRef<"xs" | "sm" | "md" | "l" | "xl">;
+    currentScreenWidth: import("vue").ComputedRef<"l" | "xs" | "sm" | "md" | "xl">;
     isMobileWidth: import("vue").ComputedRef<boolean>;
     setScreenWidth: ({ width }: {
         width: number;
     }) => void;
 }, "currentScreenWidth" | "isMobileWidth">, Pick<{
     screenWidth: import("vue").Ref<number>;
-    currentScreenWidth: import("vue").ComputedRef<"xs" | "sm" | "md" | "l" | "xl">;
+    currentScreenWidth: import("vue").ComputedRef<"l" | "xs" | "sm" | "md" | "xl">;
     isMobileWidth: import("vue").ComputedRef<boolean>;
     setScreenWidth: ({ width }: {
         width: number;

package/dist/src/types/General.d.ts

@@ -19,3 +19,5 @@ export type TrackingOptions = {
 export type Environment = SdkEnvironment;
 export type SortDirection = 'asc' | 'desc';
 export type ScreenSize = 'xs' | 'sm' | 'md' | 'l' | 'xl';
+export type LupaQueryParamName = 'QUERY' | 'PAGE' | 'LIMIT' | 'SORT';
+export type LupaQueryParamValue = 'q' | 'p' | 'l' | 's';

package/dist/src/types/search-box/SearchBoxOptions.d.ts

@@ -1,5 +1,5 @@
 import { SearchQueryResult } from '@getlupa/client-sdk/Types';
-import type { SdkOptions } from '../General';
+import type { LupaQueryParamValue, SdkOptions } from '../General';
 import type { RoutingBehavior } from '../search-results/RoutingBehavior';
 import type { DynamicData } from '../search-results/SearchResultsOptions';
 import type { SearchBoxHistory } from './SearchBoxHistory';
@@ -14,6 +14,7 @@ export type SearchBoxOptions = SearchBoxPanelOptions & {
     dynamicData?: DynamicData;
     callbacks?: SearchBoxEventCallbacks;
     redirections?: RedirectionOptions;
+    queryParameterNames?: Record<LupaQueryParamValue, string>;
 };
 export type SearchBoxOptionLabels = {
     placeholder: string;

package/dist/src/utils/filter.toggle.utils.d.ts

@@ -1,6 +1,7 @@
 import type { HierarchyFacetAction, RangeFacetAction, TermFacetAction } from '../types/search-results/FacetAction';
 import type { FilterType } from '../types/search-results/Filters';
 import type { FilterGroup } from '@getlupa/client-sdk/Types';
+import { LupaQueryParamValue } from '../types/General';
 type AppendParams = ({ params, paramsToRemove, encode }: {
     params: {
         name: string;
@@ -14,9 +15,9 @@ export declare const getFacetParam: (key: string, value: string[] | string, type
     name: string;
     value: string[] | string;
 };
-export declare const toggleTermFilter: (appendParams: AppendParams, facetAction: TermFacetAction, currentFilters?: FilterGroup) => void;
-export declare const toggleHierarchyFilter: (appendParams: AppendParams, facetAction: HierarchyFacetAction, currentFilters?: FilterGroup, removeAllLevels?: boolean) => void;
-export declare const toggleRangeFilter: (appendParams: AppendParams, facetAction: RangeFacetAction, currentFilters?: FilterGroup) => void;
+export declare const toggleTermFilter: (appendParams: AppendParams, facetAction: TermFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup) => void;
+export declare const toggleHierarchyFilter: (appendParams: AppendParams, facetAction: HierarchyFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup, removeAllLevels?: boolean) => void;
+export declare const toggleRangeFilter: (appendParams: AppendParams, facetAction: RangeFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup) => void;
 export declare const toggleTermParam: (params?: string[], param?: string) => string[];
 export declare const toggleLastPram: (params?: string[], param?: string) => string[];
 export declare const toggleHierarchyParam: (params?: string[], param?: string, removeAllLevels?: boolean) => string[];

package/dist/src/utils/link.utils.d.ts

@@ -1,6 +1,7 @@
 import type { InputSuggestionFacet } from '../types/search-box/Common';
+import { LupaQueryParamValue } from '../types/General';
 export declare const generateLink: (linkPattern: string, document: Record<string, unknown>) => string;
-export declare const generateResultLink: (link: string, searchText?: string, facet?: InputSuggestionFacet) => string;
+export declare const generateResultLink: (link: string, getQueryParamName?: (param: LupaQueryParamValue) => string, searchText?: string, facet?: InputSuggestionFacet) => string;
 export declare const getPathName: (resultPageLink: string) => string;
 export declare const getRelativePath: (link: string) => string;
 export declare const linksMatch: (link1?: string, link2?: string) => boolean;

package/dist/src/utils/params.utils.d.ts

@@ -1,9 +1,10 @@
 import type { QueryParams } from '../types/search-results/QueryParams';
-export declare const parseParams: (searchParams?: URLSearchParams) => QueryParams;
+import { LupaQueryParamValue } from '../types/General';
+export declare const parseParams: (getQueryParamName?: (param: LupaQueryParamValue) => string, searchParams?: URLSearchParams) => QueryParams;
 export declare const appendParam: (url: URL, { name, value }: {
     name: string;
     value: string | string[];
 }, encode?: boolean) => void;
-export declare const getRemovableParams: (url: URL, paramsToRemove?: 'all' | string[]) => string[] | undefined;
+export declare const getRemovableParams: (url: URL, getQueryParamName?: (param: LupaQueryParamValue) => string, paramsToRemove?: 'all' | string[]) => string[] | undefined;
 export declare const removeParams: (url: URL, params?: string[]) => void;
 export declare const encodeParam: (param: string) => string;

package/dist/src/utils/routing.utils.d.ts

@@ -1,6 +1,7 @@
 import type { InputSuggestionFacet } from '../types/search-box/Common';
 import type { RoutingBehavior, SsrOptions } from '..';
+import { LupaQueryParamValue } from '../types/General';
 export declare const emitRoutingEvent: (url: string) => void;
 export declare const handleRoutingEvent: (link: string, event?: Event, hasEventRouting?: boolean) => void;
-export declare const redirectToResultsPage: (link: string, searchText: string, facet?: InputSuggestionFacet, routingBehavior?: RoutingBehavior) => void;
+export declare const redirectToResultsPage: (link: string, searchText: string, getQueryParamName: (param: LupaQueryParamValue) => string, facet?: InputSuggestionFacet, routingBehavior?: RoutingBehavior) => void;
 export declare const getPageUrl: (pathnameOverride?: string, ssr?: SsrOptions) => URL;

package/dist/src/utils/ssr.utils.d.ts

@@ -1,7 +1,8 @@
 import { SearchResultsOptions } from '..';
 import { FilterGroup } from '@getlupa/client-sdk/Types';
+import { LupaQueryParamValue } from '../types/General';
 export declare const getSearchParams: (url?: string, params?: URLSearchParams, baseUrl?: string) => URLSearchParams;
-export declare const getInitialSearchResults: (options: SearchResultsOptions, defaultData?: {
+export declare const getInitialSearchResults: (options: SearchResultsOptions, getQueryParamName: (param: LupaQueryParamValue) => string, defaultData?: {
     filters?: FilterGroup;
     pageSize?: number;
 }) => Promise<import("@getlupa/client-sdk/Types").SearchQueryResult | import("@getlupa/client-sdk/Types").SdkError>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.9.6",
+  "version": "0.10.0",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",