@getlupa/vue 0.7.3 → 0.7.5

package/dist/lupaSearch.js

@@ -1928,21 +1928,21 @@ const sendUaAnalyticsEvent = (data, options) => {
   );
 };
 const sendGa4AnalyticsEvent = (data, options) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   if (!window || !window.dataLayer) {
     console.error("dataLayer object not found.");
     return;
   }
   const sendItemTitle = data.searchQuery !== ((_a = data.analytics) == null ? void 0 : _a.label);
   const title = sendItemTitle ? (_b = data.analytics) == null ? void 0 : _b.label : void 0;
-  const params = {
+  const params = __spreadValues({
     search_text: data.searchQuery,
     item_title: title,
     item_id: data.itemId,
     ecommerce: parseEcommerceData(data, (_c = data.analytics) == null ? void 0 : _c.listLabel)
-  };
+  }, (_e = (_d = data.analytics) == null ? void 0 : _d.additionalParams) != null ? _e : {});
   window.dataLayer.push(__spreadValues({
-    event: (_e = (_d = data.analytics) == null ? void 0 : _d.type) != null ? _e : options.parentEventName
+    event: (_g = (_f = data.analytics) == null ? void 0 : _f.type) != null ? _g : options.parentEventName
   }, params));
 };
 const processDebugEvent = (data) => {
@@ -2785,6 +2785,10 @@ const useParamsStore = defineStore("params", () => {
   const searchString = vue.ref("");
   const optionsStore = useOptionsStore();
   const redirectionStore = useRedirectionStore();
+  const sortParams = vue.ref({
+    selectedSortKey: "",
+    previousSortKey: ""
+  });
   const query = vue.computed(() => params.value[QUERY_PARAMS_PARSED.QUERY]);
   const page = vue.computed(() => {
     const page2 = Number(params.value[QUERY_PARAMS_PARSED.PAGE]) || 1;
@@ -2919,6 +2923,12 @@ const useParamsStore = defineStore("params", () => {
     }
     searchResultsLink.value = newSearchResultsLink;
   };
+  const setSortSettings = ({ selectedSortKey, previousSortKey }) => {
+    sortParams.value = {
+      selectedSortKey,
+      previousSortKey
+    };
+  };
   return {
     params,
     defaultLimit,
@@ -2929,6 +2939,7 @@ const useParamsStore = defineStore("params", () => {
     limit,
     sort,
     filters,
+    sortParams,
     add,
     removeAllFilters,
     removeParameters,
@@ -2936,7 +2947,8 @@ const useParamsStore = defineStore("params", () => {
     goToResults,
     appendParams,
     setDefaultLimit,
-    setSearchResultsLink
+    setSearchResultsLink,
+    setSortSettings
   };
 });
 const flattenFacet = (key, facets, suggestion, inputValue) => {
@@ -4245,61 +4257,6 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
     };
   }
 }));
-const getSearchTrackingData = (searchText, type) => {
-  return {
-    searchQuery: searchText,
-    analytics: {
-      type,
-      label: searchText
-    }
-  };
-};
-const useTrackingStore = defineStore("tracking", () => {
-  const optionsStore = useOptionsStore();
-  const trackSearch = ({
-    queryKey,
-    query,
-    type = "search_query"
-  }) => {
-    var _a, _b;
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
-    if (hasFilters) {
-      const data2 = getSearchTrackingData(query.searchText, "search_filters");
-      track(queryKey, data2, options);
-      return;
-    }
-    const data = getSearchTrackingData(query.searchText, type);
-    track(queryKey, data, options);
-  };
-  const trackResults = ({
-    queryKey,
-    results
-  }) => {
-    var _a;
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    if (results.total > 0) {
-      return;
-    }
-    const data = getSearchTrackingData(results.searchText, "search_zero_results");
-    track(queryKey, data, options);
-  };
-  const trackEvent = ({ queryKey, data }) => {
-    var _a, _b, _c, _d, _e;
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
-    const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
-    const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
-    track(
-      queryKey,
-      __spreadProps(__spreadValues({}, data), {
-        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
-      }),
-      options
-    );
-  };
-  return { trackSearch, trackResults, trackEvent };
-});
 const _hoisted_1$_ = ["href"];
 const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$x = { class: "lupa-search-box-product-details-section" };
@@ -4319,11 +4276,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   emits: ["product-click"],
   setup(__props, { emit }) {
     const props = __props;
-    const historyStore = useHistoryStore();
-    const trackingStore = useTrackingStore();
-    const optionsStore = useOptionsStore();
     const isInStock = vue.ref(true);
-    const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const link = vue.computed(() => {
       var _a, _b;
       return generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", props.item);
@@ -4338,54 +4291,16 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
         (e) => e.type !== DocumentElementType.IMAGE && e.type !== DocumentElementType.ADDTOCART
       )) != null ? _b : [];
     });
-    const id = vue.computed(() => {
-      if (props.panelOptions.idKey) {
-        return props.item[props.panelOptions.idKey];
-      }
-      return "";
-    });
-    const title = vue.computed(() => {
-      if (!props.panelOptions.titleKey) {
-        return "";
-      }
-      const title2 = props.item[props.panelOptions.titleKey] || "";
-      historyStore.add({
-        item: title2
-      });
-      return title2;
-    });
     const addToCartElement = vue.computed(() => {
       var _a;
       return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
     });
     const handleClick = (event) => {
-      var _a;
-      if (props.panelOptions.titleKey) {
-        historyStore.add({
-          item: props.item[props.panelOptions.titleKey] || ""
-        });
-      }
-      if (!props.panelOptions.idKey) {
-        return;
-      }
-      trackingStore.trackEvent({
-        queryKey: props.panelOptions.queryKey,
-        data: {
-          itemId: id.value,
-          searchQuery: props.inputValue,
-          type: "itemClick",
-          analytics: {
-            type: "autocomplete_product_click",
-            label: (_a = title.value) != null ? _a : link.value,
-            items: [props.item]
-          }
-        }
+      emit("product-click", {
+        item: props.item,
+        eventType: "itemClick",
+        event
       });
-      if (!link.value) {
-        return;
-      }
-      emit("product-click");
-      handleRoutingEvent(link.value, event, boxRoutingBehavior.value === "event");
     };
     vue.onMounted(() => {
       checkIfIsInStock();
@@ -4438,6 +4353,61 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const getSearchTrackingData = (searchText, type) => {
+  return {
+    searchQuery: searchText,
+    analytics: {
+      type,
+      label: searchText
+    }
+  };
+};
+const useTrackingStore = defineStore("tracking", () => {
+  const optionsStore = useOptionsStore();
+  const trackSearch = ({
+    queryKey,
+    query,
+    type = "search_query"
+  }) => {
+    var _a, _b;
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
+    if (hasFilters) {
+      const data2 = getSearchTrackingData(query.searchText, "search_filters");
+      track(queryKey, data2, options);
+      return;
+    }
+    const data = getSearchTrackingData(query.searchText, type);
+    track(queryKey, data, options);
+  };
+  const trackResults = ({
+    queryKey,
+    results
+  }) => {
+    var _a;
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    if (results.total > 0) {
+      return;
+    }
+    const data = getSearchTrackingData(results.searchText, "search_zero_results");
+    track(queryKey, data, options);
+  };
+  const trackEvent = ({ queryKey, data }) => {
+    var _a, _b, _c, _d, _e;
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
+    const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
+    const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
+    track(
+      queryKey,
+      __spreadProps(__spreadValues({}, data), {
+        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
+      }),
+      options
+    );
+  };
+  return { trackSearch, trackResults, trackEvent };
+});
 const _hoisted_1$Z = { id: "lupa-search-box-products" };
 const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProducts",
@@ -4447,9 +4417,14 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     panelOptions: {},
     labels: {}
   },
-  setup(__props) {
+  emits: ["product-click"],
+  setup(__props, { emit }) {
     const props = __props;
     const searchBoxStore = useSearchBoxStore();
+    const historyStore = useHistoryStore();
+    const trackingStore = useTrackingStore();
+    const optionsStore = useOptionsStore();
+    const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const { highlightedItem } = storeToRefs(searchBoxStore);
     const highlightedIndex = vue.computed(() => {
       var _a, _b, _c;
@@ -4458,6 +4433,42 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
       }
       return (_c = (_b = highlightedItem.value) == null ? void 0 : _b.index) != null ? _c : -1;
     });
+    const handleProductClick = ({
+      item,
+      eventType,
+      event
+    }) => {
+      var _a, _b;
+      const link = generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", item);
+      const title = props.panelOptions.titleKey ? item[props.panelOptions.titleKey] || "" : "";
+      const id = props.panelOptions.idKey ? item[props.panelOptions.idKey] : "";
+      if (props.panelOptions.titleKey) {
+        historyStore.add({
+          item: item[props.panelOptions.titleKey] || ""
+        });
+      }
+      if (!props.panelOptions.idKey) {
+        return;
+      }
+      trackingStore.trackEvent({
+        queryKey: props.panelOptions.queryKey,
+        data: {
+          itemId: id,
+          searchQuery: props.inputValue,
+          type: eventType || "itemClick",
+          analytics: {
+            type: "autocomplete_product_click",
+            label: title != null ? title : link,
+            items: [item]
+          }
+        }
+      });
+      if (!link) {
+        return;
+      }
+      emit("product-click");
+      handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
+    };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
         _ctx.$slots.productCard ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.items, (item, index) => {
@@ -4468,7 +4479,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
             labels: _ctx.labels,
             highlighted: index === highlightedIndex.value,
             inputValue: _ctx.inputValue,
-            onProductClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("product-click"))
+            itemClicked: handleProductClick
           });
         }), 128)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index) => {
           return vue.openBlock(), vue.createBlock(_sfc_main$12, {
@@ -4478,7 +4489,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
             labels: _ctx.labels,
             highlighted: index === highlightedIndex.value,
             inputValue: _ctx.inputValue,
-            onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
+            onProductClick: handleProductClick
           }, null, 8, ["item", "panelOptions", "labels", "highlighted", "inputValue"]);
         }), 128))
       ]);
@@ -7830,6 +7841,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       if (!value) {
         return;
       }
+      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 }],
@@ -9536,7 +9548,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       return (_a = props.initialFilters) != null ? _a : {};
     });
     const { currentQueryText, hasResults, currentFilterCount } = storeToRefs(searchResultStore);
-    const { searchString } = storeToRefs(paramStore);
+    const { searchString, sortParams } = storeToRefs(paramStore);
     const { defaultSearchResultPageSize } = storeToRefs(optionStore);
     const searchResultsFilters = vue.ref(null);
     const mounted = vue.ref(false);
@@ -9573,6 +9585,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       window.removeEventListener("popstate", handlePopState);
     });
     const trackItemListView = (title, items = []) => {
+      var _a, _b;
       trackingStore.trackEvent({
         queryKey: props.options.queryKey,
         data: {
@@ -9580,7 +9593,11 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             type: "view_item_list",
             label: title,
             listLabel: title,
-            items
+            items,
+            additionalParams: {
+              previousSortKey: (_a = sortParams.value) == null ? void 0 : _a.previousSortKey,
+              newSortKey: (_b = sortParams.value) == null ? void 0 : _b.selectedSortKey
+            }
           },
           options: { allowEmptySearchQuery: true }
         }

package/dist/lupaSearch.mjs

@@ -1926,21 +1926,21 @@ const sendUaAnalyticsEvent = (data, options) => {
   );
 };
 const sendGa4AnalyticsEvent = (data, options) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   if (!window || !window.dataLayer) {
     console.error("dataLayer object not found.");
     return;
   }
   const sendItemTitle = data.searchQuery !== ((_a = data.analytics) == null ? void 0 : _a.label);
   const title = sendItemTitle ? (_b = data.analytics) == null ? void 0 : _b.label : void 0;
-  const params = {
+  const params = __spreadValues({
     search_text: data.searchQuery,
     item_title: title,
     item_id: data.itemId,
     ecommerce: parseEcommerceData(data, (_c = data.analytics) == null ? void 0 : _c.listLabel)
-  };
+  }, (_e = (_d = data.analytics) == null ? void 0 : _d.additionalParams) != null ? _e : {});
   window.dataLayer.push(__spreadValues({
-    event: (_e = (_d = data.analytics) == null ? void 0 : _d.type) != null ? _e : options.parentEventName
+    event: (_g = (_f = data.analytics) == null ? void 0 : _f.type) != null ? _g : options.parentEventName
   }, params));
 };
 const processDebugEvent = (data) => {
@@ -2783,6 +2783,10 @@ const useParamsStore = defineStore("params", () => {
   const searchString = ref("");
   const optionsStore = useOptionsStore();
   const redirectionStore = useRedirectionStore();
+  const sortParams = ref({
+    selectedSortKey: "",
+    previousSortKey: ""
+  });
   const query = computed(() => params.value[QUERY_PARAMS_PARSED.QUERY]);
   const page = computed(() => {
     const page2 = Number(params.value[QUERY_PARAMS_PARSED.PAGE]) || 1;
@@ -2917,6 +2921,12 @@ const useParamsStore = defineStore("params", () => {
     }
     searchResultsLink.value = newSearchResultsLink;
   };
+  const setSortSettings = ({ selectedSortKey, previousSortKey }) => {
+    sortParams.value = {
+      selectedSortKey,
+      previousSortKey
+    };
+  };
   return {
     params,
     defaultLimit,
@@ -2927,6 +2937,7 @@ const useParamsStore = defineStore("params", () => {
     limit,
     sort,
     filters,
+    sortParams,
     add,
     removeAllFilters,
     removeParameters,
@@ -2934,7 +2945,8 @@ const useParamsStore = defineStore("params", () => {
     goToResults,
     appendParams,
     setDefaultLimit,
-    setSearchResultsLink
+    setSearchResultsLink,
+    setSortSettings
   };
 });
 const flattenFacet = (key, facets, suggestion, inputValue) => {
@@ -4243,61 +4255,6 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
     };
   }
 }));
-const getSearchTrackingData = (searchText, type) => {
-  return {
-    searchQuery: searchText,
-    analytics: {
-      type,
-      label: searchText
-    }
-  };
-};
-const useTrackingStore = defineStore("tracking", () => {
-  const optionsStore = useOptionsStore();
-  const trackSearch = ({
-    queryKey,
-    query,
-    type = "search_query"
-  }) => {
-    var _a, _b;
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
-    if (hasFilters) {
-      const data2 = getSearchTrackingData(query.searchText, "search_filters");
-      track(queryKey, data2, options);
-      return;
-    }
-    const data = getSearchTrackingData(query.searchText, type);
-    track(queryKey, data, options);
-  };
-  const trackResults = ({
-    queryKey,
-    results
-  }) => {
-    var _a;
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    if (results.total > 0) {
-      return;
-    }
-    const data = getSearchTrackingData(results.searchText, "search_zero_results");
-    track(queryKey, data, options);
-  };
-  const trackEvent = ({ queryKey, data }) => {
-    var _a, _b, _c, _d, _e;
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
-    const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
-    const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
-    track(
-      queryKey,
-      __spreadProps(__spreadValues({}, data), {
-        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
-      }),
-      options
-    );
-  };
-  return { trackSearch, trackResults, trackEvent };
-});
 const _hoisted_1$_ = ["href"];
 const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$x = { class: "lupa-search-box-product-details-section" };
@@ -4317,11 +4274,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   emits: ["product-click"],
   setup(__props, { emit }) {
     const props = __props;
-    const historyStore = useHistoryStore();
-    const trackingStore = useTrackingStore();
-    const optionsStore = useOptionsStore();
     const isInStock = ref(true);
-    const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const link = computed(() => {
       var _a, _b;
       return generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", props.item);
@@ -4336,54 +4289,16 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
         (e) => e.type !== DocumentElementType.IMAGE && e.type !== DocumentElementType.ADDTOCART
       )) != null ? _b : [];
     });
-    const id = computed(() => {
-      if (props.panelOptions.idKey) {
-        return props.item[props.panelOptions.idKey];
-      }
-      return "";
-    });
-    const title = computed(() => {
-      if (!props.panelOptions.titleKey) {
-        return "";
-      }
-      const title2 = props.item[props.panelOptions.titleKey] || "";
-      historyStore.add({
-        item: title2
-      });
-      return title2;
-    });
     const addToCartElement = computed(() => {
       var _a;
       return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
     });
     const handleClick = (event) => {
-      var _a;
-      if (props.panelOptions.titleKey) {
-        historyStore.add({
-          item: props.item[props.panelOptions.titleKey] || ""
-        });
-      }
-      if (!props.panelOptions.idKey) {
-        return;
-      }
-      trackingStore.trackEvent({
-        queryKey: props.panelOptions.queryKey,
-        data: {
-          itemId: id.value,
-          searchQuery: props.inputValue,
-          type: "itemClick",
-          analytics: {
-            type: "autocomplete_product_click",
-            label: (_a = title.value) != null ? _a : link.value,
-            items: [props.item]
-          }
-        }
+      emit("product-click", {
+        item: props.item,
+        eventType: "itemClick",
+        event
       });
-      if (!link.value) {
-        return;
-      }
-      emit("product-click");
-      handleRoutingEvent(link.value, event, boxRoutingBehavior.value === "event");
     };
     onMounted(() => {
       checkIfIsInStock();
@@ -4436,6 +4351,61 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const getSearchTrackingData = (searchText, type) => {
+  return {
+    searchQuery: searchText,
+    analytics: {
+      type,
+      label: searchText
+    }
+  };
+};
+const useTrackingStore = defineStore("tracking", () => {
+  const optionsStore = useOptionsStore();
+  const trackSearch = ({
+    queryKey,
+    query,
+    type = "search_query"
+  }) => {
+    var _a, _b;
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
+    if (hasFilters) {
+      const data2 = getSearchTrackingData(query.searchText, "search_filters");
+      track(queryKey, data2, options);
+      return;
+    }
+    const data = getSearchTrackingData(query.searchText, type);
+    track(queryKey, data, options);
+  };
+  const trackResults = ({
+    queryKey,
+    results
+  }) => {
+    var _a;
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    if (results.total > 0) {
+      return;
+    }
+    const data = getSearchTrackingData(results.searchText, "search_zero_results");
+    track(queryKey, data, options);
+  };
+  const trackEvent = ({ queryKey, data }) => {
+    var _a, _b, _c, _d, _e;
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
+    const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
+    const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
+    track(
+      queryKey,
+      __spreadProps(__spreadValues({}, data), {
+        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
+      }),
+      options
+    );
+  };
+  return { trackSearch, trackResults, trackEvent };
+});
 const _hoisted_1$Z = { id: "lupa-search-box-products" };
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProducts",
@@ -4445,9 +4415,14 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     panelOptions: {},
     labels: {}
   },
-  setup(__props) {
+  emits: ["product-click"],
+  setup(__props, { emit }) {
     const props = __props;
     const searchBoxStore = useSearchBoxStore();
+    const historyStore = useHistoryStore();
+    const trackingStore = useTrackingStore();
+    const optionsStore = useOptionsStore();
+    const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const { highlightedItem } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a, _b, _c;
@@ -4456,6 +4431,42 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
       }
       return (_c = (_b = highlightedItem.value) == null ? void 0 : _b.index) != null ? _c : -1;
     });
+    const handleProductClick = ({
+      item,
+      eventType,
+      event
+    }) => {
+      var _a, _b;
+      const link = generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", item);
+      const title = props.panelOptions.titleKey ? item[props.panelOptions.titleKey] || "" : "";
+      const id = props.panelOptions.idKey ? item[props.panelOptions.idKey] : "";
+      if (props.panelOptions.titleKey) {
+        historyStore.add({
+          item: item[props.panelOptions.titleKey] || ""
+        });
+      }
+      if (!props.panelOptions.idKey) {
+        return;
+      }
+      trackingStore.trackEvent({
+        queryKey: props.panelOptions.queryKey,
+        data: {
+          itemId: id,
+          searchQuery: props.inputValue,
+          type: eventType || "itemClick",
+          analytics: {
+            type: "autocomplete_product_click",
+            label: title != null ? title : link,
+            items: [item]
+          }
+        }
+      });
+      if (!link) {
+        return;
+      }
+      emit("product-click");
+      handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Z, [
         _ctx.$slots.productCard ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.items, (item, index) => {
@@ -4466,7 +4477,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             labels: _ctx.labels,
             highlighted: index === highlightedIndex.value,
             inputValue: _ctx.inputValue,
-            onProductClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("product-click"))
+            itemClicked: handleProductClick
           });
         }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
           return openBlock(), createBlock(_sfc_main$12, {
@@ -4476,7 +4487,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             labels: _ctx.labels,
             highlighted: index === highlightedIndex.value,
             inputValue: _ctx.inputValue,
-            onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
+            onProductClick: handleProductClick
           }, null, 8, ["item", "panelOptions", "labels", "highlighted", "inputValue"]);
         }), 128))
       ]);
@@ -7828,6 +7839,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       if (!value) {
         return;
       }
+      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 }],
@@ -9534,7 +9546,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return (_a = props.initialFilters) != null ? _a : {};
     });
     const { currentQueryText, hasResults, currentFilterCount } = storeToRefs(searchResultStore);
-    const { searchString } = storeToRefs(paramStore);
+    const { searchString, sortParams } = storeToRefs(paramStore);
     const { defaultSearchResultPageSize } = storeToRefs(optionStore);
     const searchResultsFilters = ref(null);
     const mounted = ref(false);
@@ -9571,6 +9583,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       window.removeEventListener("popstate", handlePopState);
     });
     const trackItemListView = (title, items = []) => {
+      var _a, _b;
       trackingStore.trackEvent({
         queryKey: props.options.queryKey,
         data: {
@@ -9578,7 +9591,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             type: "view_item_list",
             label: title,
             listLabel: title,
-            items
+            items,
+            additionalParams: {
+              previousSortKey: (_a = sortParams.value) == null ? void 0 : _a.previousSortKey,
+              newSortKey: (_b = sortParams.value) == null ? void 0 : _b.selectedSortKey
+            }
           },
           options: { allowEmptySearchQuery: true }
         }

package/dist/src/components/search-box/products/SearchBoxProducts.vue.d.ts

@@ -19,7 +19,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<SearchBoxOptionLabels>;
         required: false;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "product-click"[], "product-click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: __PropType<Document[]>;
         required: true;
@@ -36,5 +36,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<SearchBoxOptionLabels>;
         required: false;
     };
-}>>, {}, {}>;
+}>> & {
+    "onProduct-click"?: (...args: any[]) => any;
+}, {}, {}>;
 export default _sfc_main;

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

@@ -1,7 +1,7 @@
 import { type Ref } from 'vue';
 import type { QueryParams } from '../types/search-results/QueryParams';
 import type { InputSuggestionFacet } from '../types/search-box/Common';
-import { SsrOptions } from '..';
+import { SortCallbackContext, SsrOptions } from '..';
 export declare const useParamsStore: import("pinia").StoreDefinition<"params", import("pinia")._UnwrapAll<Pick<{
     params: Ref<QueryParams>;
     defaultLimit: Ref<number>;
@@ -12,6 +12,10 @@ export declare const useParamsStore: import("pinia").StoreDefinition<"params", i
     limit: import("vue").ComputedRef<number>;
     sort: import("vue").ComputedRef<string>;
     filters: import("vue").ComputedRef<import("@getlupa/client-sdk/Types").FilterGroup>;
+    sortParams: Ref<{
+        selectedSortKey: string;
+        previousSortKey: string;
+    }>;
     add: (newParams: QueryParams, ssr?: SsrOptions) => {
         params: QueryParams;
     };
@@ -42,7 +46,8 @@ export declare const useParamsStore: import("pinia").StoreDefinition<"params", i
     };
     setDefaultLimit: (newDefaultLimit: number) => number;
     setSearchResultsLink: (newSearchResultsLink: string) => void;
-}, "params" | "searchResultsLink" | "defaultLimit" | "searchString">>, Pick<{
+    setSortSettings: ({ selectedSortKey, previousSortKey }: SortCallbackContext) => void;
+}, "params" | "searchResultsLink" | "defaultLimit" | "searchString" | "sortParams">>, Pick<{
     params: Ref<QueryParams>;
     defaultLimit: Ref<number>;
     searchResultsLink: Ref<string>;
@@ -52,6 +57,10 @@ export declare const useParamsStore: import("pinia").StoreDefinition<"params", i
     limit: import("vue").ComputedRef<number>;
     sort: import("vue").ComputedRef<string>;
     filters: import("vue").ComputedRef<import("@getlupa/client-sdk/Types").FilterGroup>;
+    sortParams: Ref<{
+        selectedSortKey: string;
+        previousSortKey: string;
+    }>;
     add: (newParams: QueryParams, ssr?: SsrOptions) => {
         params: QueryParams;
     };
@@ -82,6 +91,7 @@ export declare const useParamsStore: import("pinia").StoreDefinition<"params", i
     };
     setDefaultLimit: (newDefaultLimit: number) => number;
     setSearchResultsLink: (newSearchResultsLink: string) => void;
+    setSortSettings: ({ selectedSortKey, previousSortKey }: SortCallbackContext) => void;
 }, "sort" | "filters" | "query" | "page" | "limit">, Pick<{
     params: Ref<QueryParams>;
     defaultLimit: Ref<number>;
@@ -92,6 +102,10 @@ export declare const useParamsStore: import("pinia").StoreDefinition<"params", i
     limit: import("vue").ComputedRef<number>;
     sort: import("vue").ComputedRef<string>;
     filters: import("vue").ComputedRef<import("@getlupa/client-sdk/Types").FilterGroup>;
+    sortParams: Ref<{
+        selectedSortKey: string;
+        previousSortKey: string;
+    }>;
     add: (newParams: QueryParams, ssr?: SsrOptions) => {
         params: QueryParams;
     };
@@ -122,4 +136,5 @@ export declare const useParamsStore: import("pinia").StoreDefinition<"params", i
     };
     setDefaultLimit: (newDefaultLimit: number) => number;
     setSearchResultsLink: (newSearchResultsLink: string) => void;
-}, "add" | "removeAllFilters" | "removeParameters" | "handleNoResultsFlag" | "goToResults" | "appendParams" | "setDefaultLimit" | "setSearchResultsLink">>;
+    setSortSettings: ({ selectedSortKey, previousSortKey }: SortCallbackContext) => void;
+}, "add" | "removeAllFilters" | "removeParameters" | "handleNoResultsFlag" | "goToResults" | "appendParams" | "setDefaultLimit" | "setSearchResultsLink" | "setSortSettings">>;

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

@@ -37,6 +37,7 @@ export type TrackableEventData = {
         listLabel?: string;
         items?: Record<string, unknown>[];
         itemId?: string;
+        additionalParams?: Record<string, unknown>;
     };
     options?: {
         allowEmptySearchQuery: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.7.3",
-  "main": "dist/lupaSearch.js",
+  "version": "0.7.5",
+  "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",
   "scripts": {