@getlupa/client 1.6.3 → 1.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lupaSearch.iife.js +159 -130
- package/dist/lupaSearch.js +159 -130
- package/dist/lupaSearch.mjs +159 -130
- package/dist/lupaSearch.umd.js +159 -130
- package/dist/style.css +1 -1
- package/package.json +2 -2
package/dist/lupaSearch.iife.js
CHANGED
|
@@ -6572,21 +6572,21 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
6572
6572
|
);
|
|
6573
6573
|
};
|
|
6574
6574
|
const sendGa4AnalyticsEvent = (data, options) => {
|
|
6575
|
-
var _a, _b, _c, _d, _e;
|
|
6575
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
6576
6576
|
if (!window || !window.dataLayer) {
|
|
6577
6577
|
console.error("dataLayer object not found.");
|
|
6578
6578
|
return;
|
|
6579
6579
|
}
|
|
6580
6580
|
const sendItemTitle = data.searchQuery !== ((_a = data.analytics) == null ? void 0 : _a.label);
|
|
6581
6581
|
const title = sendItemTitle ? (_b = data.analytics) == null ? void 0 : _b.label : void 0;
|
|
6582
|
-
const params = {
|
|
6582
|
+
const params = __spreadValues2({
|
|
6583
6583
|
search_text: data.searchQuery,
|
|
6584
6584
|
item_title: title,
|
|
6585
6585
|
item_id: data.itemId,
|
|
6586
6586
|
ecommerce: parseEcommerceData(data, (_c = data.analytics) == null ? void 0 : _c.listLabel)
|
|
6587
|
-
};
|
|
6587
|
+
}, (_e = (_d = data.analytics) == null ? void 0 : _d.additionalParams) != null ? _e : {});
|
|
6588
6588
|
window.dataLayer.push(__spreadValues2({
|
|
6589
|
-
event: (
|
|
6589
|
+
event: (_g = (_f = data.analytics) == null ? void 0 : _f.type) != null ? _g : options.parentEventName
|
|
6590
6590
|
}, params));
|
|
6591
6591
|
};
|
|
6592
6592
|
const processDebugEvent = (data) => {
|
|
@@ -7429,6 +7429,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7429
7429
|
const searchString = ref("");
|
|
7430
7430
|
const optionsStore = useOptionsStore();
|
|
7431
7431
|
const redirectionStore = useRedirectionStore();
|
|
7432
|
+
const sortParams = ref({
|
|
7433
|
+
selectedSortKey: "",
|
|
7434
|
+
previousSortKey: ""
|
|
7435
|
+
});
|
|
7432
7436
|
const query = computed(() => params.value[QUERY_PARAMS_PARSED.QUERY]);
|
|
7433
7437
|
const page = computed(() => {
|
|
7434
7438
|
const page2 = Number(params.value[QUERY_PARAMS_PARSED.PAGE]) || 1;
|
|
@@ -7563,6 +7567,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7563
7567
|
}
|
|
7564
7568
|
searchResultsLink.value = newSearchResultsLink;
|
|
7565
7569
|
};
|
|
7570
|
+
const setSortSettings = ({ selectedSortKey, previousSortKey }) => {
|
|
7571
|
+
sortParams.value = {
|
|
7572
|
+
selectedSortKey,
|
|
7573
|
+
previousSortKey
|
|
7574
|
+
};
|
|
7575
|
+
};
|
|
7566
7576
|
return {
|
|
7567
7577
|
params,
|
|
7568
7578
|
defaultLimit,
|
|
@@ -7573,6 +7583,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7573
7583
|
limit,
|
|
7574
7584
|
sort,
|
|
7575
7585
|
filters,
|
|
7586
|
+
sortParams,
|
|
7576
7587
|
add: add2,
|
|
7577
7588
|
removeAllFilters,
|
|
7578
7589
|
removeParameters,
|
|
@@ -7580,7 +7591,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7580
7591
|
goToResults,
|
|
7581
7592
|
appendParams,
|
|
7582
7593
|
setDefaultLimit,
|
|
7583
|
-
setSearchResultsLink
|
|
7594
|
+
setSearchResultsLink,
|
|
7595
|
+
setSortSettings
|
|
7584
7596
|
};
|
|
7585
7597
|
});
|
|
7586
7598
|
const flattenFacet = (key, facets, suggestion, inputValue) => {
|
|
@@ -7625,6 +7637,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7625
7637
|
const suggestionResults = ref({});
|
|
7626
7638
|
const highlightedIndex = ref(-1);
|
|
7627
7639
|
const inputValue = ref("");
|
|
7640
|
+
const resultInputValue = ref("");
|
|
7628
7641
|
const historyStore = useHistoryStore();
|
|
7629
7642
|
const resultsVisible = computed(() => {
|
|
7630
7643
|
var _a;
|
|
@@ -7637,13 +7650,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7637
7650
|
return {
|
|
7638
7651
|
queryKey: p2.queryKey,
|
|
7639
7652
|
count: (_b = (_a = suggestionResults.value[p2.queryKey]) == null ? void 0 : _a.length) != null ? _b : 0,
|
|
7640
|
-
panel: p2
|
|
7653
|
+
panel: p2,
|
|
7654
|
+
input: resultInputValue.value
|
|
7641
7655
|
};
|
|
7642
7656
|
}
|
|
7643
7657
|
return {
|
|
7644
7658
|
queryKey: p2.queryKey,
|
|
7645
7659
|
count: (_e = (_d = (_c = docResults.value[p2.queryKey]) == null ? void 0 : _c.items) == null ? void 0 : _d.length) != null ? _e : 0,
|
|
7646
|
-
panel: p2
|
|
7660
|
+
panel: p2,
|
|
7661
|
+
input: resultInputValue.value
|
|
7647
7662
|
};
|
|
7648
7663
|
})
|
|
7649
7664
|
);
|
|
@@ -7703,6 +7718,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7703
7718
|
[queryKey]: flattenSuggestions(result.items, (_a = publicQuery.searchText) != null ? _a : "")
|
|
7704
7719
|
});
|
|
7705
7720
|
inputValue.value = publicQuery.searchText;
|
|
7721
|
+
resultInputValue.value = publicQuery.searchText;
|
|
7706
7722
|
emitSearchResultsCallback();
|
|
7707
7723
|
return {
|
|
7708
7724
|
suggestions: result.items
|
|
@@ -7790,7 +7806,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7790
7806
|
const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
|
|
7791
7807
|
const _hoisted_2$P = { class: "lupa-input-clear" };
|
|
7792
7808
|
const _hoisted_3$B = { id: "lupa-search-box-input" };
|
|
7793
|
-
const _hoisted_4$
|
|
7809
|
+
const _hoisted_4$r = ["value"];
|
|
7794
7810
|
const _hoisted_5$f = ["placeholder"];
|
|
7795
7811
|
const _hoisted_6$9 = {
|
|
7796
7812
|
key: 0,
|
|
@@ -7885,7 +7901,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7885
7901
|
class: "lupa-hint",
|
|
7886
7902
|
value: showHint.value ? suggestedValue.value.item.suggestion : "",
|
|
7887
7903
|
disabled: ""
|
|
7888
|
-
}, null, 8, _hoisted_4$
|
|
7904
|
+
}, null, 8, _hoisted_4$r),
|
|
7889
7905
|
withDirectives(createBaseVNode("input", mergeProps({
|
|
7890
7906
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
|
|
7891
7907
|
}, inputAttributes.value, {
|
|
@@ -8064,7 +8080,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8064
8080
|
class: "lupa-suggestion-facet",
|
|
8065
8081
|
"data-cy": "lupa-suggestion-facet"
|
|
8066
8082
|
};
|
|
8067
|
-
const _hoisted_4$
|
|
8083
|
+
const _hoisted_4$q = {
|
|
8068
8084
|
class: "lupa-suggestion-facet-label",
|
|
8069
8085
|
"data-cy": "lupa-suggestion-facet-label"
|
|
8070
8086
|
};
|
|
@@ -8110,7 +8126,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8110
8126
|
innerHTML: _ctx.suggestion.displayHighlight
|
|
8111
8127
|
}, null, 8, _hoisted_1$18)) : (openBlock(), createElementBlock("div", _hoisted_2$N, toDisplayString(_ctx.suggestion.display), 1)),
|
|
8112
8128
|
_ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$A, [
|
|
8113
|
-
createBaseVNode("span", _hoisted_4$
|
|
8129
|
+
createBaseVNode("span", _hoisted_4$q, toDisplayString(facetLabel.value), 1),
|
|
8114
8130
|
createBaseVNode("span", _hoisted_5$e, toDisplayString(_ctx.suggestion.facet.title), 1)
|
|
8115
8131
|
])) : createCommentVNode("", true)
|
|
8116
8132
|
]);
|
|
@@ -8518,7 +8534,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8518
8534
|
const _hoisted_1$11 = ["innerHTML"];
|
|
8519
8535
|
const _hoisted_2$K = { key: 0 };
|
|
8520
8536
|
const _hoisted_3$z = { key: 1 };
|
|
8521
|
-
const _hoisted_4$
|
|
8537
|
+
const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
|
|
8522
8538
|
const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
|
|
8523
8539
|
const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
8524
8540
|
__name: "SearchBoxProductCustom",
|
|
@@ -8551,7 +8567,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8551
8567
|
class: [className.value, "lupa-search-box-product-custom"]
|
|
8552
8568
|
}, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
|
|
8553
8569
|
!label.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$z, [
|
|
8554
|
-
createBaseVNode("div", _hoisted_4$
|
|
8570
|
+
createBaseVNode("div", _hoisted_4$p, toDisplayString(label.value), 1),
|
|
8555
8571
|
createBaseVNode("div", _hoisted_5$d, toDisplayString(text.value), 1)
|
|
8556
8572
|
]))
|
|
8557
8573
|
], 16));
|
|
@@ -8889,65 +8905,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8889
8905
|
};
|
|
8890
8906
|
}
|
|
8891
8907
|
}));
|
|
8892
|
-
const getSearchTrackingData = (searchText, type) => {
|
|
8893
|
-
return {
|
|
8894
|
-
searchQuery: searchText,
|
|
8895
|
-
analytics: {
|
|
8896
|
-
type,
|
|
8897
|
-
label: searchText
|
|
8898
|
-
}
|
|
8899
|
-
};
|
|
8900
|
-
};
|
|
8901
|
-
const useTrackingStore = defineStore("tracking", () => {
|
|
8902
|
-
const optionsStore = useOptionsStore();
|
|
8903
|
-
const trackSearch = ({
|
|
8904
|
-
queryKey,
|
|
8905
|
-
query,
|
|
8906
|
-
type = "search_query"
|
|
8907
|
-
}) => {
|
|
8908
|
-
var _a, _b;
|
|
8909
|
-
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
8910
|
-
const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
|
|
8911
|
-
if (hasFilters) {
|
|
8912
|
-
const data2 = getSearchTrackingData(query.searchText, "search_filters");
|
|
8913
|
-
track(queryKey, data2, options);
|
|
8914
|
-
return;
|
|
8915
|
-
}
|
|
8916
|
-
const data = getSearchTrackingData(query.searchText, type);
|
|
8917
|
-
track(queryKey, data, options);
|
|
8918
|
-
};
|
|
8919
|
-
const trackResults = ({
|
|
8920
|
-
queryKey,
|
|
8921
|
-
results
|
|
8922
|
-
}) => {
|
|
8923
|
-
var _a;
|
|
8924
|
-
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
8925
|
-
if (results.total > 0) {
|
|
8926
|
-
return;
|
|
8927
|
-
}
|
|
8928
|
-
const data = getSearchTrackingData(results.searchText, "search_zero_results");
|
|
8929
|
-
track(queryKey, data, options);
|
|
8930
|
-
};
|
|
8931
|
-
const trackEvent = ({ queryKey, data }) => {
|
|
8932
|
-
var _a, _b, _c, _d, _e;
|
|
8933
|
-
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
8934
|
-
const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
|
|
8935
|
-
const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
|
|
8936
|
-
const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
|
|
8937
|
-
track(
|
|
8938
|
-
queryKey,
|
|
8939
|
-
__spreadProps2(__spreadValues2({}, data), {
|
|
8940
|
-
analytics: data.analytics ? __spreadProps2(__spreadValues2({}, data.analytics), { items: mappedItems }) : void 0
|
|
8941
|
-
}),
|
|
8942
|
-
options
|
|
8943
|
-
);
|
|
8944
|
-
};
|
|
8945
|
-
return { trackSearch, trackResults, trackEvent };
|
|
8946
|
-
});
|
|
8947
8908
|
const _hoisted_1$_ = ["href"];
|
|
8948
8909
|
const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
|
|
8949
8910
|
const _hoisted_3$x = { class: "lupa-search-box-product-details-section" };
|
|
8950
|
-
const _hoisted_4$
|
|
8911
|
+
const _hoisted_4$o = {
|
|
8951
8912
|
key: 0,
|
|
8952
8913
|
class: "lupa-search-box-product-add-to-cart-section"
|
|
8953
8914
|
};
|
|
@@ -8963,11 +8924,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8963
8924
|
emits: ["product-click"],
|
|
8964
8925
|
setup(__props, { emit: emit2 }) {
|
|
8965
8926
|
const props = __props;
|
|
8966
|
-
const historyStore = useHistoryStore();
|
|
8967
|
-
const trackingStore = useTrackingStore();
|
|
8968
|
-
const optionsStore = useOptionsStore();
|
|
8969
8927
|
const isInStock = ref(true);
|
|
8970
|
-
const { boxRoutingBehavior } = storeToRefs(optionsStore);
|
|
8971
8928
|
const link = computed(() => {
|
|
8972
8929
|
var _a, _b;
|
|
8973
8930
|
return generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", props.item);
|
|
@@ -8982,54 +8939,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8982
8939
|
(e) => e.type !== DocumentElementType.IMAGE && e.type !== DocumentElementType.ADDTOCART
|
|
8983
8940
|
)) != null ? _b : [];
|
|
8984
8941
|
});
|
|
8985
|
-
const id = computed(() => {
|
|
8986
|
-
if (props.panelOptions.idKey) {
|
|
8987
|
-
return props.item[props.panelOptions.idKey];
|
|
8988
|
-
}
|
|
8989
|
-
return "";
|
|
8990
|
-
});
|
|
8991
|
-
const title = computed(() => {
|
|
8992
|
-
if (!props.panelOptions.titleKey) {
|
|
8993
|
-
return "";
|
|
8994
|
-
}
|
|
8995
|
-
const title2 = props.item[props.panelOptions.titleKey] || "";
|
|
8996
|
-
historyStore.add({
|
|
8997
|
-
item: title2
|
|
8998
|
-
});
|
|
8999
|
-
return title2;
|
|
9000
|
-
});
|
|
9001
8942
|
const addToCartElement = computed(() => {
|
|
9002
8943
|
var _a;
|
|
9003
8944
|
return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
|
|
9004
8945
|
});
|
|
9005
8946
|
const handleClick = (event) => {
|
|
9006
|
-
|
|
9007
|
-
|
|
9008
|
-
|
|
9009
|
-
|
|
9010
|
-
});
|
|
9011
|
-
}
|
|
9012
|
-
if (!props.panelOptions.idKey) {
|
|
9013
|
-
return;
|
|
9014
|
-
}
|
|
9015
|
-
trackingStore.trackEvent({
|
|
9016
|
-
queryKey: props.panelOptions.queryKey,
|
|
9017
|
-
data: {
|
|
9018
|
-
itemId: id.value,
|
|
9019
|
-
searchQuery: props.inputValue,
|
|
9020
|
-
type: "itemClick",
|
|
9021
|
-
analytics: {
|
|
9022
|
-
type: "autocomplete_product_click",
|
|
9023
|
-
label: (_a = title.value) != null ? _a : link.value,
|
|
9024
|
-
items: [props.item]
|
|
9025
|
-
}
|
|
9026
|
-
}
|
|
8947
|
+
emit2("product-click", {
|
|
8948
|
+
item: props.item,
|
|
8949
|
+
eventType: "itemClick",
|
|
8950
|
+
event
|
|
9027
8951
|
});
|
|
9028
|
-
if (!link.value) {
|
|
9029
|
-
return;
|
|
9030
|
-
}
|
|
9031
|
-
emit2("product-click");
|
|
9032
|
-
handleRoutingEvent(link.value, event, boxRoutingBehavior.value === "event");
|
|
9033
8952
|
};
|
|
9034
8953
|
onMounted(() => {
|
|
9035
8954
|
checkIfIsInStock();
|
|
@@ -9068,7 +8987,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9068
8987
|
}, null, 8, ["item", "element", "labels", "link"]);
|
|
9069
8988
|
}), 128))
|
|
9070
8989
|
]),
|
|
9071
|
-
addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$
|
|
8990
|
+
addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
|
|
9072
8991
|
createVNode(_sfc_main$13, {
|
|
9073
8992
|
class: "lupa-search-box-product-element",
|
|
9074
8993
|
item: _ctx.item,
|
|
@@ -9082,6 +9001,61 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9082
9001
|
};
|
|
9083
9002
|
}
|
|
9084
9003
|
});
|
|
9004
|
+
const getSearchTrackingData = (searchText, type) => {
|
|
9005
|
+
return {
|
|
9006
|
+
searchQuery: searchText,
|
|
9007
|
+
analytics: {
|
|
9008
|
+
type,
|
|
9009
|
+
label: searchText
|
|
9010
|
+
}
|
|
9011
|
+
};
|
|
9012
|
+
};
|
|
9013
|
+
const useTrackingStore = defineStore("tracking", () => {
|
|
9014
|
+
const optionsStore = useOptionsStore();
|
|
9015
|
+
const trackSearch = ({
|
|
9016
|
+
queryKey,
|
|
9017
|
+
query,
|
|
9018
|
+
type = "search_query"
|
|
9019
|
+
}) => {
|
|
9020
|
+
var _a, _b;
|
|
9021
|
+
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
9022
|
+
const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
|
|
9023
|
+
if (hasFilters) {
|
|
9024
|
+
const data2 = getSearchTrackingData(query.searchText, "search_filters");
|
|
9025
|
+
track(queryKey, data2, options);
|
|
9026
|
+
return;
|
|
9027
|
+
}
|
|
9028
|
+
const data = getSearchTrackingData(query.searchText, type);
|
|
9029
|
+
track(queryKey, data, options);
|
|
9030
|
+
};
|
|
9031
|
+
const trackResults = ({
|
|
9032
|
+
queryKey,
|
|
9033
|
+
results
|
|
9034
|
+
}) => {
|
|
9035
|
+
var _a;
|
|
9036
|
+
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
9037
|
+
if (results.total > 0) {
|
|
9038
|
+
return;
|
|
9039
|
+
}
|
|
9040
|
+
const data = getSearchTrackingData(results.searchText, "search_zero_results");
|
|
9041
|
+
track(queryKey, data, options);
|
|
9042
|
+
};
|
|
9043
|
+
const trackEvent = ({ queryKey, data }) => {
|
|
9044
|
+
var _a, _b, _c, _d, _e;
|
|
9045
|
+
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
9046
|
+
const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
|
|
9047
|
+
const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
|
|
9048
|
+
const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
|
|
9049
|
+
track(
|
|
9050
|
+
queryKey,
|
|
9051
|
+
__spreadProps2(__spreadValues2({}, data), {
|
|
9052
|
+
analytics: data.analytics ? __spreadProps2(__spreadValues2({}, data.analytics), { items: mappedItems }) : void 0
|
|
9053
|
+
}),
|
|
9054
|
+
options
|
|
9055
|
+
);
|
|
9056
|
+
};
|
|
9057
|
+
return { trackSearch, trackResults, trackEvent };
|
|
9058
|
+
});
|
|
9085
9059
|
const _hoisted_1$Z = { id: "lupa-search-box-products" };
|
|
9086
9060
|
const _sfc_main$11 = /* @__PURE__ */ defineComponent({
|
|
9087
9061
|
__name: "SearchBoxProducts",
|
|
@@ -9091,9 +9065,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9091
9065
|
panelOptions: {},
|
|
9092
9066
|
labels: {}
|
|
9093
9067
|
},
|
|
9094
|
-
|
|
9068
|
+
emits: ["product-click"],
|
|
9069
|
+
setup(__props, { emit: emit2 }) {
|
|
9095
9070
|
const props = __props;
|
|
9096
9071
|
const searchBoxStore = useSearchBoxStore();
|
|
9072
|
+
const historyStore = useHistoryStore();
|
|
9073
|
+
const trackingStore = useTrackingStore();
|
|
9074
|
+
const optionsStore = useOptionsStore();
|
|
9075
|
+
const { boxRoutingBehavior } = storeToRefs(optionsStore);
|
|
9097
9076
|
const { highlightedItem } = storeToRefs(searchBoxStore);
|
|
9098
9077
|
const highlightedIndex = computed(() => {
|
|
9099
9078
|
var _a, _b, _c;
|
|
@@ -9102,6 +9081,42 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9102
9081
|
}
|
|
9103
9082
|
return (_c = (_b = highlightedItem.value) == null ? void 0 : _b.index) != null ? _c : -1;
|
|
9104
9083
|
});
|
|
9084
|
+
const handleProductClick = ({
|
|
9085
|
+
item,
|
|
9086
|
+
eventType,
|
|
9087
|
+
event
|
|
9088
|
+
}) => {
|
|
9089
|
+
var _a, _b;
|
|
9090
|
+
const link = generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", item);
|
|
9091
|
+
const title = props.panelOptions.titleKey ? item[props.panelOptions.titleKey] || "" : "";
|
|
9092
|
+
const id = props.panelOptions.idKey ? item[props.panelOptions.idKey] : "";
|
|
9093
|
+
if (props.panelOptions.titleKey) {
|
|
9094
|
+
historyStore.add({
|
|
9095
|
+
item: item[props.panelOptions.titleKey] || ""
|
|
9096
|
+
});
|
|
9097
|
+
}
|
|
9098
|
+
if (!props.panelOptions.idKey) {
|
|
9099
|
+
return;
|
|
9100
|
+
}
|
|
9101
|
+
trackingStore.trackEvent({
|
|
9102
|
+
queryKey: props.panelOptions.queryKey,
|
|
9103
|
+
data: {
|
|
9104
|
+
itemId: id,
|
|
9105
|
+
searchQuery: props.inputValue,
|
|
9106
|
+
type: eventType || "itemClick",
|
|
9107
|
+
analytics: {
|
|
9108
|
+
type: "autocomplete_product_click",
|
|
9109
|
+
label: title != null ? title : link,
|
|
9110
|
+
items: [item]
|
|
9111
|
+
}
|
|
9112
|
+
}
|
|
9113
|
+
});
|
|
9114
|
+
if (!link) {
|
|
9115
|
+
return;
|
|
9116
|
+
}
|
|
9117
|
+
emit2("product-click");
|
|
9118
|
+
handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
|
|
9119
|
+
};
|
|
9105
9120
|
return (_ctx, _cache) => {
|
|
9106
9121
|
return openBlock(), createElementBlock("div", _hoisted_1$Z, [
|
|
9107
9122
|
_ctx.$slots.productCard ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.items, (item, index) => {
|
|
@@ -9112,7 +9127,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9112
9127
|
labels: _ctx.labels,
|
|
9113
9128
|
highlighted: index === highlightedIndex.value,
|
|
9114
9129
|
inputValue: _ctx.inputValue,
|
|
9115
|
-
|
|
9130
|
+
itemClicked: handleProductClick
|
|
9116
9131
|
});
|
|
9117
9132
|
}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
|
|
9118
9133
|
return openBlock(), createBlock(_sfc_main$12, {
|
|
@@ -9122,7 +9137,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9122
9137
|
labels: _ctx.labels,
|
|
9123
9138
|
highlighted: index === highlightedIndex.value,
|
|
9124
9139
|
inputValue: _ctx.inputValue,
|
|
9125
|
-
onProductClick:
|
|
9140
|
+
onProductClick: handleProductClick
|
|
9126
9141
|
}, null, 8, ["item", "panelOptions", "labels", "highlighted", "inputValue"]);
|
|
9127
9142
|
}), 128))
|
|
9128
9143
|
]);
|
|
@@ -9205,6 +9220,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9205
9220
|
};
|
|
9206
9221
|
const _hoisted_2$H = ["data-cy"];
|
|
9207
9222
|
const _hoisted_3$w = {
|
|
9223
|
+
key: 0,
|
|
9224
|
+
class: "lupa-panel-title"
|
|
9225
|
+
};
|
|
9226
|
+
const _hoisted_4$n = {
|
|
9208
9227
|
key: 1,
|
|
9209
9228
|
id: "lupa-search-box-panel"
|
|
9210
9229
|
};
|
|
@@ -9242,16 +9261,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9242
9261
|
const sdkOptions = computed(() => props.options.options);
|
|
9243
9262
|
const searchBoxStore = useSearchBoxStore();
|
|
9244
9263
|
const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
|
|
9245
|
-
const displayResults = computed(
|
|
9246
|
-
|
|
9247
|
-
|
|
9248
|
-
|
|
9249
|
-
}
|
|
9250
|
-
);
|
|
9264
|
+
const displayResults = computed(() => {
|
|
9265
|
+
var _a;
|
|
9266
|
+
return ((_a = props.inputValue) == null ? void 0 : _a.length) >= props.options.minInputLength;
|
|
9267
|
+
});
|
|
9251
9268
|
const displayHistory = computed(
|
|
9252
9269
|
() => {
|
|
9253
9270
|
var _a;
|
|
9254
|
-
return Boolean(props.options.history) && ((_a = props.inputValue) == null ? void 0 : _a.length) < 1;
|
|
9271
|
+
return Boolean(props.options.history) && ((_a = props.inputValue) == null ? void 0 : _a.length) < 1 && props.options.minInputLength > 0;
|
|
9255
9272
|
}
|
|
9256
9273
|
);
|
|
9257
9274
|
const displayPanels = computed(
|
|
@@ -9328,6 +9345,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9328
9345
|
const expandOnSinglePanel = computed(() => {
|
|
9329
9346
|
return numberOfVisiblePanels.value === 1 && props.options.expandOnSinglePanel;
|
|
9330
9347
|
});
|
|
9348
|
+
const showTopResultsPanelTitle = (queryKey) => {
|
|
9349
|
+
const panel = panelItemCounts.value.find((v) => v.queryKey === queryKey);
|
|
9350
|
+
return (panel == null ? void 0 : panel.count) > 0 && (panel == null ? void 0 : panel.input.length) < 1;
|
|
9351
|
+
};
|
|
9331
9352
|
return (_ctx, _cache) => {
|
|
9332
9353
|
var _a;
|
|
9333
9354
|
return openBlock(), createElementBlock("div", {
|
|
@@ -9341,6 +9362,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9341
9362
|
"data-cy": "lupa-main-panel"
|
|
9342
9363
|
}, [
|
|
9343
9364
|
(openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
|
|
9365
|
+
var _a2, _b;
|
|
9344
9366
|
return openBlock(), createElementBlock("div", {
|
|
9345
9367
|
key: index,
|
|
9346
9368
|
class: normalizeClass([
|
|
@@ -9349,8 +9371,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9349
9371
|
]),
|
|
9350
9372
|
"data-cy": "lupa-panel-" + panel.type + "-index"
|
|
9351
9373
|
}, [
|
|
9374
|
+
((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$w, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
|
|
9352
9375
|
panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
|
|
9353
|
-
key:
|
|
9376
|
+
key: 1,
|
|
9354
9377
|
panel,
|
|
9355
9378
|
options: sdkOptions.value,
|
|
9356
9379
|
debounce: _ctx.options.debounce,
|
|
@@ -9381,7 +9404,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9381
9404
|
showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
|
|
9382
9405
|
onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
|
|
9383
9406
|
}, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
|
|
9384
|
-
])) : displayHistory.value ? (openBlock(), createElementBlock("div",
|
|
9407
|
+
])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
|
|
9385
9408
|
createVNode(_sfc_main$1h, {
|
|
9386
9409
|
options: _ctx.options.history,
|
|
9387
9410
|
history: history.value,
|
|
@@ -12458,6 +12481,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
12458
12481
|
if (!value) {
|
|
12459
12482
|
return;
|
|
12460
12483
|
}
|
|
12484
|
+
paramStore.setSortSettings({ selectedSortKey: value, previousSortKey: previousKey.value });
|
|
12461
12485
|
(_c = (_b = props.callbacks) == null ? void 0 : _b.onSortChange) == null ? void 0 : _c.call(_b, { selectedSortKey: value, previousSortKey: previousKey.value });
|
|
12462
12486
|
paramStore.appendParams({
|
|
12463
12487
|
params: [{ name: QUERY_PARAMS$1.SORT, value }],
|
|
@@ -14164,7 +14188,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
14164
14188
|
return (_a = props.initialFilters) != null ? _a : {};
|
|
14165
14189
|
});
|
|
14166
14190
|
const { currentQueryText, hasResults, currentFilterCount } = storeToRefs(searchResultStore);
|
|
14167
|
-
const { searchString } = storeToRefs(paramStore);
|
|
14191
|
+
const { searchString, sortParams } = storeToRefs(paramStore);
|
|
14168
14192
|
const { defaultSearchResultPageSize } = storeToRefs(optionStore);
|
|
14169
14193
|
const searchResultsFilters = ref(null);
|
|
14170
14194
|
const mounted = ref(false);
|
|
@@ -14201,6 +14225,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
14201
14225
|
window.removeEventListener("popstate", handlePopState);
|
|
14202
14226
|
});
|
|
14203
14227
|
const trackItemListView = (title, items = []) => {
|
|
14228
|
+
var _a, _b;
|
|
14204
14229
|
trackingStore.trackEvent({
|
|
14205
14230
|
queryKey: props.options.queryKey,
|
|
14206
14231
|
data: {
|
|
@@ -14208,7 +14233,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
14208
14233
|
type: "view_item_list",
|
|
14209
14234
|
label: title,
|
|
14210
14235
|
listLabel: title,
|
|
14211
|
-
items
|
|
14236
|
+
items,
|
|
14237
|
+
additionalParams: {
|
|
14238
|
+
previousSortKey: (_a = sortParams.value) == null ? void 0 : _a.previousSortKey,
|
|
14239
|
+
newSortKey: (_b = sortParams.value) == null ? void 0 : _b.selectedSortKey
|
|
14240
|
+
}
|
|
14212
14241
|
},
|
|
14213
14242
|
options: { allowEmptySearchQuery: true }
|
|
14214
14243
|
}
|