@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.umd.js
CHANGED
|
@@ -6574,21 +6574,21 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
6574
6574
|
);
|
|
6575
6575
|
};
|
|
6576
6576
|
const sendGa4AnalyticsEvent = (data, options) => {
|
|
6577
|
-
var _a, _b, _c, _d, _e;
|
|
6577
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
6578
6578
|
if (!window || !window.dataLayer) {
|
|
6579
6579
|
console.error("dataLayer object not found.");
|
|
6580
6580
|
return;
|
|
6581
6581
|
}
|
|
6582
6582
|
const sendItemTitle = data.searchQuery !== ((_a = data.analytics) == null ? void 0 : _a.label);
|
|
6583
6583
|
const title = sendItemTitle ? (_b = data.analytics) == null ? void 0 : _b.label : void 0;
|
|
6584
|
-
const params = {
|
|
6584
|
+
const params = __spreadValues2({
|
|
6585
6585
|
search_text: data.searchQuery,
|
|
6586
6586
|
item_title: title,
|
|
6587
6587
|
item_id: data.itemId,
|
|
6588
6588
|
ecommerce: parseEcommerceData(data, (_c = data.analytics) == null ? void 0 : _c.listLabel)
|
|
6589
|
-
};
|
|
6589
|
+
}, (_e = (_d = data.analytics) == null ? void 0 : _d.additionalParams) != null ? _e : {});
|
|
6590
6590
|
window.dataLayer.push(__spreadValues2({
|
|
6591
|
-
event: (
|
|
6591
|
+
event: (_g = (_f = data.analytics) == null ? void 0 : _f.type) != null ? _g : options.parentEventName
|
|
6592
6592
|
}, params));
|
|
6593
6593
|
};
|
|
6594
6594
|
const processDebugEvent = (data) => {
|
|
@@ -7431,6 +7431,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7431
7431
|
const searchString = ref("");
|
|
7432
7432
|
const optionsStore = useOptionsStore();
|
|
7433
7433
|
const redirectionStore = useRedirectionStore();
|
|
7434
|
+
const sortParams = ref({
|
|
7435
|
+
selectedSortKey: "",
|
|
7436
|
+
previousSortKey: ""
|
|
7437
|
+
});
|
|
7434
7438
|
const query = computed(() => params.value[QUERY_PARAMS_PARSED.QUERY]);
|
|
7435
7439
|
const page = computed(() => {
|
|
7436
7440
|
const page2 = Number(params.value[QUERY_PARAMS_PARSED.PAGE]) || 1;
|
|
@@ -7565,6 +7569,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7565
7569
|
}
|
|
7566
7570
|
searchResultsLink.value = newSearchResultsLink;
|
|
7567
7571
|
};
|
|
7572
|
+
const setSortSettings = ({ selectedSortKey, previousSortKey }) => {
|
|
7573
|
+
sortParams.value = {
|
|
7574
|
+
selectedSortKey,
|
|
7575
|
+
previousSortKey
|
|
7576
|
+
};
|
|
7577
|
+
};
|
|
7568
7578
|
return {
|
|
7569
7579
|
params,
|
|
7570
7580
|
defaultLimit,
|
|
@@ -7575,6 +7585,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7575
7585
|
limit,
|
|
7576
7586
|
sort,
|
|
7577
7587
|
filters,
|
|
7588
|
+
sortParams,
|
|
7578
7589
|
add: add2,
|
|
7579
7590
|
removeAllFilters,
|
|
7580
7591
|
removeParameters,
|
|
@@ -7582,7 +7593,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7582
7593
|
goToResults,
|
|
7583
7594
|
appendParams,
|
|
7584
7595
|
setDefaultLimit,
|
|
7585
|
-
setSearchResultsLink
|
|
7596
|
+
setSearchResultsLink,
|
|
7597
|
+
setSortSettings
|
|
7586
7598
|
};
|
|
7587
7599
|
});
|
|
7588
7600
|
const flattenFacet = (key, facets, suggestion, inputValue) => {
|
|
@@ -7627,6 +7639,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7627
7639
|
const suggestionResults = ref({});
|
|
7628
7640
|
const highlightedIndex = ref(-1);
|
|
7629
7641
|
const inputValue = ref("");
|
|
7642
|
+
const resultInputValue = ref("");
|
|
7630
7643
|
const historyStore = useHistoryStore();
|
|
7631
7644
|
const resultsVisible = computed(() => {
|
|
7632
7645
|
var _a;
|
|
@@ -7639,13 +7652,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7639
7652
|
return {
|
|
7640
7653
|
queryKey: p2.queryKey,
|
|
7641
7654
|
count: (_b = (_a = suggestionResults.value[p2.queryKey]) == null ? void 0 : _a.length) != null ? _b : 0,
|
|
7642
|
-
panel: p2
|
|
7655
|
+
panel: p2,
|
|
7656
|
+
input: resultInputValue.value
|
|
7643
7657
|
};
|
|
7644
7658
|
}
|
|
7645
7659
|
return {
|
|
7646
7660
|
queryKey: p2.queryKey,
|
|
7647
7661
|
count: (_e = (_d = (_c = docResults.value[p2.queryKey]) == null ? void 0 : _c.items) == null ? void 0 : _d.length) != null ? _e : 0,
|
|
7648
|
-
panel: p2
|
|
7662
|
+
panel: p2,
|
|
7663
|
+
input: resultInputValue.value
|
|
7649
7664
|
};
|
|
7650
7665
|
})
|
|
7651
7666
|
);
|
|
@@ -7705,6 +7720,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7705
7720
|
[queryKey]: flattenSuggestions(result.items, (_a = publicQuery.searchText) != null ? _a : "")
|
|
7706
7721
|
});
|
|
7707
7722
|
inputValue.value = publicQuery.searchText;
|
|
7723
|
+
resultInputValue.value = publicQuery.searchText;
|
|
7708
7724
|
emitSearchResultsCallback();
|
|
7709
7725
|
return {
|
|
7710
7726
|
suggestions: result.items
|
|
@@ -7792,7 +7808,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7792
7808
|
const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
|
|
7793
7809
|
const _hoisted_2$P = { class: "lupa-input-clear" };
|
|
7794
7810
|
const _hoisted_3$B = { id: "lupa-search-box-input" };
|
|
7795
|
-
const _hoisted_4$
|
|
7811
|
+
const _hoisted_4$r = ["value"];
|
|
7796
7812
|
const _hoisted_5$f = ["placeholder"];
|
|
7797
7813
|
const _hoisted_6$9 = {
|
|
7798
7814
|
key: 0,
|
|
@@ -7887,7 +7903,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
7887
7903
|
class: "lupa-hint",
|
|
7888
7904
|
value: showHint.value ? suggestedValue.value.item.suggestion : "",
|
|
7889
7905
|
disabled: ""
|
|
7890
|
-
}, null, 8, _hoisted_4$
|
|
7906
|
+
}, null, 8, _hoisted_4$r),
|
|
7891
7907
|
withDirectives(createBaseVNode("input", mergeProps({
|
|
7892
7908
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
|
|
7893
7909
|
}, inputAttributes.value, {
|
|
@@ -8066,7 +8082,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8066
8082
|
class: "lupa-suggestion-facet",
|
|
8067
8083
|
"data-cy": "lupa-suggestion-facet"
|
|
8068
8084
|
};
|
|
8069
|
-
const _hoisted_4$
|
|
8085
|
+
const _hoisted_4$q = {
|
|
8070
8086
|
class: "lupa-suggestion-facet-label",
|
|
8071
8087
|
"data-cy": "lupa-suggestion-facet-label"
|
|
8072
8088
|
};
|
|
@@ -8112,7 +8128,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8112
8128
|
innerHTML: _ctx.suggestion.displayHighlight
|
|
8113
8129
|
}, null, 8, _hoisted_1$18)) : (openBlock(), createElementBlock("div", _hoisted_2$N, toDisplayString(_ctx.suggestion.display), 1)),
|
|
8114
8130
|
_ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$A, [
|
|
8115
|
-
createBaseVNode("span", _hoisted_4$
|
|
8131
|
+
createBaseVNode("span", _hoisted_4$q, toDisplayString(facetLabel.value), 1),
|
|
8116
8132
|
createBaseVNode("span", _hoisted_5$e, toDisplayString(_ctx.suggestion.facet.title), 1)
|
|
8117
8133
|
])) : createCommentVNode("", true)
|
|
8118
8134
|
]);
|
|
@@ -8520,7 +8536,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8520
8536
|
const _hoisted_1$11 = ["innerHTML"];
|
|
8521
8537
|
const _hoisted_2$K = { key: 0 };
|
|
8522
8538
|
const _hoisted_3$z = { key: 1 };
|
|
8523
|
-
const _hoisted_4$
|
|
8539
|
+
const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
|
|
8524
8540
|
const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
|
|
8525
8541
|
const _sfc_main$16 = /* @__PURE__ */ defineComponent({
|
|
8526
8542
|
__name: "SearchBoxProductCustom",
|
|
@@ -8553,7 +8569,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8553
8569
|
class: [className.value, "lupa-search-box-product-custom"]
|
|
8554
8570
|
}, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
|
|
8555
8571
|
!label.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$z, [
|
|
8556
|
-
createBaseVNode("div", _hoisted_4$
|
|
8572
|
+
createBaseVNode("div", _hoisted_4$p, toDisplayString(label.value), 1),
|
|
8557
8573
|
createBaseVNode("div", _hoisted_5$d, toDisplayString(text.value), 1)
|
|
8558
8574
|
]))
|
|
8559
8575
|
], 16));
|
|
@@ -8891,65 +8907,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8891
8907
|
};
|
|
8892
8908
|
}
|
|
8893
8909
|
}));
|
|
8894
|
-
const getSearchTrackingData = (searchText, type) => {
|
|
8895
|
-
return {
|
|
8896
|
-
searchQuery: searchText,
|
|
8897
|
-
analytics: {
|
|
8898
|
-
type,
|
|
8899
|
-
label: searchText
|
|
8900
|
-
}
|
|
8901
|
-
};
|
|
8902
|
-
};
|
|
8903
|
-
const useTrackingStore = defineStore("tracking", () => {
|
|
8904
|
-
const optionsStore = useOptionsStore();
|
|
8905
|
-
const trackSearch = ({
|
|
8906
|
-
queryKey,
|
|
8907
|
-
query,
|
|
8908
|
-
type = "search_query"
|
|
8909
|
-
}) => {
|
|
8910
|
-
var _a, _b;
|
|
8911
|
-
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
8912
|
-
const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
|
|
8913
|
-
if (hasFilters) {
|
|
8914
|
-
const data2 = getSearchTrackingData(query.searchText, "search_filters");
|
|
8915
|
-
track(queryKey, data2, options);
|
|
8916
|
-
return;
|
|
8917
|
-
}
|
|
8918
|
-
const data = getSearchTrackingData(query.searchText, type);
|
|
8919
|
-
track(queryKey, data, options);
|
|
8920
|
-
};
|
|
8921
|
-
const trackResults = ({
|
|
8922
|
-
queryKey,
|
|
8923
|
-
results
|
|
8924
|
-
}) => {
|
|
8925
|
-
var _a;
|
|
8926
|
-
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
8927
|
-
if (results.total > 0) {
|
|
8928
|
-
return;
|
|
8929
|
-
}
|
|
8930
|
-
const data = getSearchTrackingData(results.searchText, "search_zero_results");
|
|
8931
|
-
track(queryKey, data, options);
|
|
8932
|
-
};
|
|
8933
|
-
const trackEvent = ({ queryKey, data }) => {
|
|
8934
|
-
var _a, _b, _c, _d, _e;
|
|
8935
|
-
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
8936
|
-
const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
|
|
8937
|
-
const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
|
|
8938
|
-
const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
|
|
8939
|
-
track(
|
|
8940
|
-
queryKey,
|
|
8941
|
-
__spreadProps2(__spreadValues2({}, data), {
|
|
8942
|
-
analytics: data.analytics ? __spreadProps2(__spreadValues2({}, data.analytics), { items: mappedItems }) : void 0
|
|
8943
|
-
}),
|
|
8944
|
-
options
|
|
8945
|
-
);
|
|
8946
|
-
};
|
|
8947
|
-
return { trackSearch, trackResults, trackEvent };
|
|
8948
|
-
});
|
|
8949
8910
|
const _hoisted_1$_ = ["href"];
|
|
8950
8911
|
const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
|
|
8951
8912
|
const _hoisted_3$x = { class: "lupa-search-box-product-details-section" };
|
|
8952
|
-
const _hoisted_4$
|
|
8913
|
+
const _hoisted_4$o = {
|
|
8953
8914
|
key: 0,
|
|
8954
8915
|
class: "lupa-search-box-product-add-to-cart-section"
|
|
8955
8916
|
};
|
|
@@ -8965,11 +8926,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8965
8926
|
emits: ["product-click"],
|
|
8966
8927
|
setup(__props, { emit: emit2 }) {
|
|
8967
8928
|
const props = __props;
|
|
8968
|
-
const historyStore = useHistoryStore();
|
|
8969
|
-
const trackingStore = useTrackingStore();
|
|
8970
|
-
const optionsStore = useOptionsStore();
|
|
8971
8929
|
const isInStock = ref(true);
|
|
8972
|
-
const { boxRoutingBehavior } = storeToRefs(optionsStore);
|
|
8973
8930
|
const link = computed(() => {
|
|
8974
8931
|
var _a, _b;
|
|
8975
8932
|
return generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", props.item);
|
|
@@ -8984,54 +8941,16 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
8984
8941
|
(e) => e.type !== DocumentElementType.IMAGE && e.type !== DocumentElementType.ADDTOCART
|
|
8985
8942
|
)) != null ? _b : [];
|
|
8986
8943
|
});
|
|
8987
|
-
const id = computed(() => {
|
|
8988
|
-
if (props.panelOptions.idKey) {
|
|
8989
|
-
return props.item[props.panelOptions.idKey];
|
|
8990
|
-
}
|
|
8991
|
-
return "";
|
|
8992
|
-
});
|
|
8993
|
-
const title = computed(() => {
|
|
8994
|
-
if (!props.panelOptions.titleKey) {
|
|
8995
|
-
return "";
|
|
8996
|
-
}
|
|
8997
|
-
const title2 = props.item[props.panelOptions.titleKey] || "";
|
|
8998
|
-
historyStore.add({
|
|
8999
|
-
item: title2
|
|
9000
|
-
});
|
|
9001
|
-
return title2;
|
|
9002
|
-
});
|
|
9003
8944
|
const addToCartElement = computed(() => {
|
|
9004
8945
|
var _a;
|
|
9005
8946
|
return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
|
|
9006
8947
|
});
|
|
9007
8948
|
const handleClick = (event) => {
|
|
9008
|
-
|
|
9009
|
-
|
|
9010
|
-
|
|
9011
|
-
|
|
9012
|
-
});
|
|
9013
|
-
}
|
|
9014
|
-
if (!props.panelOptions.idKey) {
|
|
9015
|
-
return;
|
|
9016
|
-
}
|
|
9017
|
-
trackingStore.trackEvent({
|
|
9018
|
-
queryKey: props.panelOptions.queryKey,
|
|
9019
|
-
data: {
|
|
9020
|
-
itemId: id.value,
|
|
9021
|
-
searchQuery: props.inputValue,
|
|
9022
|
-
type: "itemClick",
|
|
9023
|
-
analytics: {
|
|
9024
|
-
type: "autocomplete_product_click",
|
|
9025
|
-
label: (_a = title.value) != null ? _a : link.value,
|
|
9026
|
-
items: [props.item]
|
|
9027
|
-
}
|
|
9028
|
-
}
|
|
8949
|
+
emit2("product-click", {
|
|
8950
|
+
item: props.item,
|
|
8951
|
+
eventType: "itemClick",
|
|
8952
|
+
event
|
|
9029
8953
|
});
|
|
9030
|
-
if (!link.value) {
|
|
9031
|
-
return;
|
|
9032
|
-
}
|
|
9033
|
-
emit2("product-click");
|
|
9034
|
-
handleRoutingEvent(link.value, event, boxRoutingBehavior.value === "event");
|
|
9035
8954
|
};
|
|
9036
8955
|
onMounted(() => {
|
|
9037
8956
|
checkIfIsInStock();
|
|
@@ -9070,7 +8989,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9070
8989
|
}, null, 8, ["item", "element", "labels", "link"]);
|
|
9071
8990
|
}), 128))
|
|
9072
8991
|
]),
|
|
9073
|
-
addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$
|
|
8992
|
+
addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
|
|
9074
8993
|
createVNode(_sfc_main$13, {
|
|
9075
8994
|
class: "lupa-search-box-product-element",
|
|
9076
8995
|
item: _ctx.item,
|
|
@@ -9084,6 +9003,61 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9084
9003
|
};
|
|
9085
9004
|
}
|
|
9086
9005
|
});
|
|
9006
|
+
const getSearchTrackingData = (searchText, type) => {
|
|
9007
|
+
return {
|
|
9008
|
+
searchQuery: searchText,
|
|
9009
|
+
analytics: {
|
|
9010
|
+
type,
|
|
9011
|
+
label: searchText
|
|
9012
|
+
}
|
|
9013
|
+
};
|
|
9014
|
+
};
|
|
9015
|
+
const useTrackingStore = defineStore("tracking", () => {
|
|
9016
|
+
const optionsStore = useOptionsStore();
|
|
9017
|
+
const trackSearch = ({
|
|
9018
|
+
queryKey,
|
|
9019
|
+
query,
|
|
9020
|
+
type = "search_query"
|
|
9021
|
+
}) => {
|
|
9022
|
+
var _a, _b;
|
|
9023
|
+
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
9024
|
+
const hasFilters = Object.keys((_b = query.filters) != null ? _b : {}).length > 0;
|
|
9025
|
+
if (hasFilters) {
|
|
9026
|
+
const data2 = getSearchTrackingData(query.searchText, "search_filters");
|
|
9027
|
+
track(queryKey, data2, options);
|
|
9028
|
+
return;
|
|
9029
|
+
}
|
|
9030
|
+
const data = getSearchTrackingData(query.searchText, type);
|
|
9031
|
+
track(queryKey, data, options);
|
|
9032
|
+
};
|
|
9033
|
+
const trackResults = ({
|
|
9034
|
+
queryKey,
|
|
9035
|
+
results
|
|
9036
|
+
}) => {
|
|
9037
|
+
var _a;
|
|
9038
|
+
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
9039
|
+
if (results.total > 0) {
|
|
9040
|
+
return;
|
|
9041
|
+
}
|
|
9042
|
+
const data = getSearchTrackingData(results.searchText, "search_zero_results");
|
|
9043
|
+
track(queryKey, data, options);
|
|
9044
|
+
};
|
|
9045
|
+
const trackEvent = ({ queryKey, data }) => {
|
|
9046
|
+
var _a, _b, _c, _d, _e;
|
|
9047
|
+
const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
|
|
9048
|
+
const trackingOptions = (_b = optionsStore.trackingOptions) != null ? _b : {};
|
|
9049
|
+
const items = (_d = (_c = data.analytics) == null ? void 0 : _c.items) != null ? _d : [];
|
|
9050
|
+
const mappedItems = ((_e = trackingOptions.analytics) == null ? void 0 : _e.itemMap) ? items.map(trackingOptions.analytics.itemMap) : items;
|
|
9051
|
+
track(
|
|
9052
|
+
queryKey,
|
|
9053
|
+
__spreadProps2(__spreadValues2({}, data), {
|
|
9054
|
+
analytics: data.analytics ? __spreadProps2(__spreadValues2({}, data.analytics), { items: mappedItems }) : void 0
|
|
9055
|
+
}),
|
|
9056
|
+
options
|
|
9057
|
+
);
|
|
9058
|
+
};
|
|
9059
|
+
return { trackSearch, trackResults, trackEvent };
|
|
9060
|
+
});
|
|
9087
9061
|
const _hoisted_1$Z = { id: "lupa-search-box-products" };
|
|
9088
9062
|
const _sfc_main$11 = /* @__PURE__ */ defineComponent({
|
|
9089
9063
|
__name: "SearchBoxProducts",
|
|
@@ -9093,9 +9067,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9093
9067
|
panelOptions: {},
|
|
9094
9068
|
labels: {}
|
|
9095
9069
|
},
|
|
9096
|
-
|
|
9070
|
+
emits: ["product-click"],
|
|
9071
|
+
setup(__props, { emit: emit2 }) {
|
|
9097
9072
|
const props = __props;
|
|
9098
9073
|
const searchBoxStore = useSearchBoxStore();
|
|
9074
|
+
const historyStore = useHistoryStore();
|
|
9075
|
+
const trackingStore = useTrackingStore();
|
|
9076
|
+
const optionsStore = useOptionsStore();
|
|
9077
|
+
const { boxRoutingBehavior } = storeToRefs(optionsStore);
|
|
9099
9078
|
const { highlightedItem } = storeToRefs(searchBoxStore);
|
|
9100
9079
|
const highlightedIndex = computed(() => {
|
|
9101
9080
|
var _a, _b, _c;
|
|
@@ -9104,6 +9083,42 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9104
9083
|
}
|
|
9105
9084
|
return (_c = (_b = highlightedItem.value) == null ? void 0 : _b.index) != null ? _c : -1;
|
|
9106
9085
|
});
|
|
9086
|
+
const handleProductClick = ({
|
|
9087
|
+
item,
|
|
9088
|
+
eventType,
|
|
9089
|
+
event
|
|
9090
|
+
}) => {
|
|
9091
|
+
var _a, _b;
|
|
9092
|
+
const link = generateLink((_b = (_a = props.panelOptions.links) == null ? void 0 : _a.details) != null ? _b : "", item);
|
|
9093
|
+
const title = props.panelOptions.titleKey ? item[props.panelOptions.titleKey] || "" : "";
|
|
9094
|
+
const id = props.panelOptions.idKey ? item[props.panelOptions.idKey] : "";
|
|
9095
|
+
if (props.panelOptions.titleKey) {
|
|
9096
|
+
historyStore.add({
|
|
9097
|
+
item: item[props.panelOptions.titleKey] || ""
|
|
9098
|
+
});
|
|
9099
|
+
}
|
|
9100
|
+
if (!props.panelOptions.idKey) {
|
|
9101
|
+
return;
|
|
9102
|
+
}
|
|
9103
|
+
trackingStore.trackEvent({
|
|
9104
|
+
queryKey: props.panelOptions.queryKey,
|
|
9105
|
+
data: {
|
|
9106
|
+
itemId: id,
|
|
9107
|
+
searchQuery: props.inputValue,
|
|
9108
|
+
type: eventType || "itemClick",
|
|
9109
|
+
analytics: {
|
|
9110
|
+
type: "autocomplete_product_click",
|
|
9111
|
+
label: title != null ? title : link,
|
|
9112
|
+
items: [item]
|
|
9113
|
+
}
|
|
9114
|
+
}
|
|
9115
|
+
});
|
|
9116
|
+
if (!link) {
|
|
9117
|
+
return;
|
|
9118
|
+
}
|
|
9119
|
+
emit2("product-click");
|
|
9120
|
+
handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
|
|
9121
|
+
};
|
|
9107
9122
|
return (_ctx, _cache) => {
|
|
9108
9123
|
return openBlock(), createElementBlock("div", _hoisted_1$Z, [
|
|
9109
9124
|
_ctx.$slots.productCard ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.items, (item, index) => {
|
|
@@ -9114,7 +9129,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9114
9129
|
labels: _ctx.labels,
|
|
9115
9130
|
highlighted: index === highlightedIndex.value,
|
|
9116
9131
|
inputValue: _ctx.inputValue,
|
|
9117
|
-
|
|
9132
|
+
itemClicked: handleProductClick
|
|
9118
9133
|
});
|
|
9119
9134
|
}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
|
|
9120
9135
|
return openBlock(), createBlock(_sfc_main$12, {
|
|
@@ -9124,7 +9139,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9124
9139
|
labels: _ctx.labels,
|
|
9125
9140
|
highlighted: index === highlightedIndex.value,
|
|
9126
9141
|
inputValue: _ctx.inputValue,
|
|
9127
|
-
onProductClick:
|
|
9142
|
+
onProductClick: handleProductClick
|
|
9128
9143
|
}, null, 8, ["item", "panelOptions", "labels", "highlighted", "inputValue"]);
|
|
9129
9144
|
}), 128))
|
|
9130
9145
|
]);
|
|
@@ -9207,6 +9222,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9207
9222
|
};
|
|
9208
9223
|
const _hoisted_2$H = ["data-cy"];
|
|
9209
9224
|
const _hoisted_3$w = {
|
|
9225
|
+
key: 0,
|
|
9226
|
+
class: "lupa-panel-title"
|
|
9227
|
+
};
|
|
9228
|
+
const _hoisted_4$n = {
|
|
9210
9229
|
key: 1,
|
|
9211
9230
|
id: "lupa-search-box-panel"
|
|
9212
9231
|
};
|
|
@@ -9244,16 +9263,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9244
9263
|
const sdkOptions = computed(() => props.options.options);
|
|
9245
9264
|
const searchBoxStore = useSearchBoxStore();
|
|
9246
9265
|
const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
|
|
9247
|
-
const displayResults = computed(
|
|
9248
|
-
|
|
9249
|
-
|
|
9250
|
-
|
|
9251
|
-
}
|
|
9252
|
-
);
|
|
9266
|
+
const displayResults = computed(() => {
|
|
9267
|
+
var _a;
|
|
9268
|
+
return ((_a = props.inputValue) == null ? void 0 : _a.length) >= props.options.minInputLength;
|
|
9269
|
+
});
|
|
9253
9270
|
const displayHistory = computed(
|
|
9254
9271
|
() => {
|
|
9255
9272
|
var _a;
|
|
9256
|
-
return Boolean(props.options.history) && ((_a = props.inputValue) == null ? void 0 : _a.length) < 1;
|
|
9273
|
+
return Boolean(props.options.history) && ((_a = props.inputValue) == null ? void 0 : _a.length) < 1 && props.options.minInputLength > 0;
|
|
9257
9274
|
}
|
|
9258
9275
|
);
|
|
9259
9276
|
const displayPanels = computed(
|
|
@@ -9330,6 +9347,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9330
9347
|
const expandOnSinglePanel = computed(() => {
|
|
9331
9348
|
return numberOfVisiblePanels.value === 1 && props.options.expandOnSinglePanel;
|
|
9332
9349
|
});
|
|
9350
|
+
const showTopResultsPanelTitle = (queryKey) => {
|
|
9351
|
+
const panel = panelItemCounts.value.find((v) => v.queryKey === queryKey);
|
|
9352
|
+
return (panel == null ? void 0 : panel.count) > 0 && (panel == null ? void 0 : panel.input.length) < 1;
|
|
9353
|
+
};
|
|
9333
9354
|
return (_ctx, _cache) => {
|
|
9334
9355
|
var _a;
|
|
9335
9356
|
return openBlock(), createElementBlock("div", {
|
|
@@ -9343,6 +9364,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9343
9364
|
"data-cy": "lupa-main-panel"
|
|
9344
9365
|
}, [
|
|
9345
9366
|
(openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
|
|
9367
|
+
var _a2, _b;
|
|
9346
9368
|
return openBlock(), createElementBlock("div", {
|
|
9347
9369
|
key: index,
|
|
9348
9370
|
class: normalizeClass([
|
|
@@ -9351,8 +9373,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9351
9373
|
]),
|
|
9352
9374
|
"data-cy": "lupa-panel-" + panel.type + "-index"
|
|
9353
9375
|
}, [
|
|
9376
|
+
((_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),
|
|
9354
9377
|
panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
|
|
9355
|
-
key:
|
|
9378
|
+
key: 1,
|
|
9356
9379
|
panel,
|
|
9357
9380
|
options: sdkOptions.value,
|
|
9358
9381
|
debounce: _ctx.options.debounce,
|
|
@@ -9383,7 +9406,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
9383
9406
|
showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
|
|
9384
9407
|
onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
|
|
9385
9408
|
}, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
|
|
9386
|
-
])) : displayHistory.value ? (openBlock(), createElementBlock("div",
|
|
9409
|
+
])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
|
|
9387
9410
|
createVNode(_sfc_main$1h, {
|
|
9388
9411
|
options: _ctx.options.history,
|
|
9389
9412
|
history: history.value,
|
|
@@ -12460,6 +12483,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
12460
12483
|
if (!value) {
|
|
12461
12484
|
return;
|
|
12462
12485
|
}
|
|
12486
|
+
paramStore.setSortSettings({ selectedSortKey: value, previousSortKey: previousKey.value });
|
|
12463
12487
|
(_c = (_b = props.callbacks) == null ? void 0 : _b.onSortChange) == null ? void 0 : _c.call(_b, { selectedSortKey: value, previousSortKey: previousKey.value });
|
|
12464
12488
|
paramStore.appendParams({
|
|
12465
12489
|
params: [{ name: QUERY_PARAMS$1.SORT, value }],
|
|
@@ -14166,7 +14190,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
14166
14190
|
return (_a = props.initialFilters) != null ? _a : {};
|
|
14167
14191
|
});
|
|
14168
14192
|
const { currentQueryText, hasResults, currentFilterCount } = storeToRefs(searchResultStore);
|
|
14169
|
-
const { searchString } = storeToRefs(paramStore);
|
|
14193
|
+
const { searchString, sortParams } = storeToRefs(paramStore);
|
|
14170
14194
|
const { defaultSearchResultPageSize } = storeToRefs(optionStore);
|
|
14171
14195
|
const searchResultsFilters = ref(null);
|
|
14172
14196
|
const mounted = ref(false);
|
|
@@ -14203,6 +14227,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
14203
14227
|
window.removeEventListener("popstate", handlePopState);
|
|
14204
14228
|
});
|
|
14205
14229
|
const trackItemListView = (title, items = []) => {
|
|
14230
|
+
var _a, _b;
|
|
14206
14231
|
trackingStore.trackEvent({
|
|
14207
14232
|
queryKey: props.options.queryKey,
|
|
14208
14233
|
data: {
|
|
@@ -14210,7 +14235,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
14210
14235
|
type: "view_item_list",
|
|
14211
14236
|
label: title,
|
|
14212
14237
|
listLabel: title,
|
|
14213
|
-
items
|
|
14238
|
+
items,
|
|
14239
|
+
additionalParams: {
|
|
14240
|
+
previousSortKey: (_a = sortParams.value) == null ? void 0 : _a.previousSortKey,
|
|
14241
|
+
newSortKey: (_b = sortParams.value) == null ? void 0 : _b.selectedSortKey
|
|
14242
|
+
}
|
|
14214
14243
|
},
|
|
14215
14244
|
options: { allowEmptySearchQuery: true }
|
|
14216
14245
|
}
|