@useinsider/guido 3.16.0-beta.8933e24 → 3.16.0-beta.925fbc8
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/composables/useRecommendation.js +20 -19
- package/dist/config/migrator/index.js +8 -9
- package/dist/config/migrator/itemsBlockMigrator.js +1 -1
- package/dist/config/migrator/recommendation/compositionMapper.js +20 -20
- package/dist/config/migrator/recommendation/extractors.js +24 -29
- package/dist/config/migrator/recommendation/htmlBuilder.js +130 -116
- package/dist/config/migrator/recommendationMigrator.js +15 -18
- package/dist/enums/recommendation.js +17 -17
- package/dist/extensions/Blocks/Items/enums/productEnums.js +45 -45
- package/dist/extensions/Blocks/Recommendation/constants/blockIds.js +1 -1
- package/dist/extensions/Blocks/Recommendation/constants/controlIds.js +1 -1
- package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +22 -23
- package/dist/extensions/Blocks/Recommendation/constants/selectors.js +26 -29
- package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +152 -203
- package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js +37 -26
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +21 -21
- package/dist/extensions/Blocks/Recommendation/extension.js +29 -31
- package/dist/extensions/Blocks/Recommendation/settingsPanel.js +4 -23
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +13 -12
- package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +3 -3
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +107 -85
- package/dist/extensions/Blocks/Recommendation/utils/productIds.js +6 -0
- package/dist/src/config/migrator/recommendation/extractors.d.ts +0 -8
- package/dist/src/extensions/Blocks/Recommendation/constants/blockIds.d.ts +1 -2
- package/dist/src/extensions/Blocks/Recommendation/constants/controlIds.d.ts +0 -7
- package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts +0 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +0 -4
- package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +0 -7
- package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +0 -1
- package/dist/src/extensions/Blocks/Recommendation/utils/productIds.d.ts +6 -0
- package/dist/static/styles/customEditorStyle.css.js +1 -3
- package/package.json +1 -1
- package/dist/config/migrator/recommendationTitleMigrator.js +0 -112
- package/dist/extensions/Blocks/Recommendation/controls/title/index.js +0 -44
- package/dist/extensions/Blocks/Recommendation/templates/titleRows.js +0 -33
- package/dist/src/config/migrator/recommendationTitleMigrator.d.ts +0 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/title/index.d.ts +0 -86
- package/dist/src/extensions/Blocks/Recommendation/templates/titleRows.d.ts +0 -13
|
@@ -3,20 +3,21 @@ import { MinDeviceViewport as C, DefaultPadding as b } from "../enums/recommenda
|
|
|
3
3
|
import { useRecommendationExtensionStore as l } from "../extensions/Blocks/Recommendation/store/recommendation.js";
|
|
4
4
|
import { generateCompleteFilterQuery as h } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
|
|
5
5
|
import { getPartnerRecommendationParams as y } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
|
|
6
|
-
import {
|
|
7
|
-
|
|
6
|
+
import { sanitizeProductIds as x } from "../extensions/Blocks/Recommendation/utils/productIds.js";
|
|
7
|
+
import { useConfigStore as P } from "../stores/config.js";
|
|
8
|
+
const B = () => ({
|
|
8
9
|
calculateCardWidth: ({
|
|
9
10
|
mobileLeftPadding: a,
|
|
10
11
|
mobileRightPadding: s,
|
|
11
12
|
cardsInRow: c,
|
|
12
|
-
unresponsive:
|
|
13
|
+
unresponsive: n
|
|
13
14
|
}) => {
|
|
14
|
-
const r =
|
|
15
|
+
const r = n ? c : 1, e = a + s + (r - 1) * b;
|
|
15
16
|
return (C - e) / r;
|
|
16
17
|
},
|
|
17
18
|
getRecommendationCampaignData: (a) => {
|
|
18
|
-
const s = l(), c = Number(a),
|
|
19
|
-
if (!
|
|
19
|
+
const s = l(), c = Number(a), n = s.blockStates[c];
|
|
20
|
+
if (!n)
|
|
20
21
|
return {
|
|
21
22
|
textTrimming: !1,
|
|
22
23
|
orientation: "vertical",
|
|
@@ -29,7 +30,7 @@ const k = () => ({
|
|
|
29
30
|
discountBeforeTextValue: "",
|
|
30
31
|
discountAfterTextValue: ""
|
|
31
32
|
};
|
|
32
|
-
const { recommendationConfigs: r } =
|
|
33
|
+
const { recommendationConfigs: r } = n, e = r.orientation === "grid" ? "vertical" : "horizontal";
|
|
33
34
|
return {
|
|
34
35
|
textTrimming: r.textTrimming,
|
|
35
36
|
orientation: e,
|
|
@@ -45,7 +46,7 @@ const k = () => ({
|
|
|
45
46
|
},
|
|
46
47
|
buildCampaignUrl: (a, s) => {
|
|
47
48
|
var m;
|
|
48
|
-
const c = l(),
|
|
49
|
+
const c = l(), n = P(), r = Number(a);
|
|
49
50
|
let e;
|
|
50
51
|
if (s)
|
|
51
52
|
e = s;
|
|
@@ -53,25 +54,25 @@ const k = () => ({
|
|
|
53
54
|
const i = c.blockStates[r];
|
|
54
55
|
if (!i)
|
|
55
56
|
return "";
|
|
56
|
-
const { recommendationConfigs:
|
|
57
|
+
const { recommendationConfigs: o } = i;
|
|
57
58
|
e = {
|
|
58
|
-
strategy:
|
|
59
|
-
language:
|
|
60
|
-
currencyCode:
|
|
61
|
-
size:
|
|
62
|
-
productIds:
|
|
63
|
-
filters:
|
|
64
|
-
shuffleProducts:
|
|
59
|
+
strategy: o.strategy,
|
|
60
|
+
language: o.language,
|
|
61
|
+
currencyCode: o.currencySettings.value,
|
|
62
|
+
size: o.size,
|
|
63
|
+
productIds: o.productIds,
|
|
64
|
+
filters: o.filters,
|
|
65
|
+
shuffleProducts: o.shuffleProducts
|
|
65
66
|
};
|
|
66
67
|
}
|
|
67
68
|
const f = ((m = I().find((i) => i.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
|
|
68
|
-
t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName",
|
|
69
|
+
t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", n.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", n.variationId), e.strategy === "manualMerchandising" ? t.set("productId", x(e.productIds)) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
|
|
69
70
|
const g = e.filters.filter((i) => i.isValid), d = h(g);
|
|
70
|
-
d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(y(
|
|
71
|
+
d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(y(n.partnerName, e.strategy)).forEach(([i, o]) => t.set(i, o));
|
|
71
72
|
const p = decodeURIComponent(t.toString()), u = `${R.RECOMMENDATION_API_URL}/v2/${f}?${p}`;
|
|
72
73
|
return c.recommendationCampaignUrls[a] = u, u;
|
|
73
74
|
}
|
|
74
75
|
});
|
|
75
76
|
export {
|
|
76
|
-
|
|
77
|
+
B as useRecommendation
|
|
77
78
|
};
|
|
@@ -2,15 +2,14 @@ import { migrateCheckbox as t } from "./checkboxMigrator.js";
|
|
|
2
2
|
import { migrateCouponBlock as i } from "./couponBlockMigrator.js";
|
|
3
3
|
import { migrateItemsBlock as e } from "./itemsBlockMigrator.js";
|
|
4
4
|
import { migrateProductNameLink as a } from "./productNameLinkMigrator.js";
|
|
5
|
-
import { migrateRadioButton as
|
|
6
|
-
import { migrateRecommendation as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return m = t(m), m = n(m), m = await f(m), m = i(m), m = c(m, r), m = g(m), m = e(m), m = a(m), m = p(m), m;
|
|
5
|
+
import { migrateRadioButton as c } from "./radioButtonMigrator.js";
|
|
6
|
+
import { migrateRecommendation as g } from "./recommendationMigrator.js";
|
|
7
|
+
import { migrateSocialIcons as n } from "./socialIconMigrator.js";
|
|
8
|
+
import { migrateUnsubscribe as p } from "./unsubscribeMigrator.js";
|
|
9
|
+
const x = async (r, o = {}) => {
|
|
10
|
+
let m = r;
|
|
11
|
+
return m = t(m), m = c(m), m = await p(m), m = i(m), m = g(m, o), m = e(m), m = a(m), m = n(m), m;
|
|
13
12
|
};
|
|
14
13
|
export {
|
|
15
|
-
|
|
14
|
+
x as migrate
|
|
16
15
|
};
|
|
@@ -381,7 +381,7 @@ class H {
|
|
|
381
381
|
* Supports all block types by detecting prefix and using appropriate type:
|
|
382
382
|
*
|
|
383
383
|
* Examples:
|
|
384
|
-
* - {{ins_apr_img_1}} → https://
|
|
384
|
+
* - {{ins_apr_img_1}} → https://web-image.useinsider.com/.../img_1.jpeg (CART_ITEMS)
|
|
385
385
|
* - {{browsed_item_name_2}} → 'Set of Sprite Yoga Straps' (BROWSED_ITEMS)
|
|
386
386
|
* - {{purchased_item_formattedprice_5}} → '1,490.49' (PURCHASED_ITEMS)
|
|
387
387
|
*/
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
import { DEFAULT_COMPOSITION as p, DEFAULT_VISIBILITY as I } from "../../../extensions/Blocks/Recommendation/constants/defaultConfig.js";
|
|
2
|
-
import {
|
|
3
|
-
import { mapTextTheme as
|
|
4
|
-
const C = "__title__",
|
|
5
|
-
function
|
|
2
|
+
import { ATTR_CUSTOM_PREFIX as l, ATTR_PRODUCT_BUTTON as k, ATTR_PRODUCT_OMNIBUS_DISCOUNT as A, ATTR_PRODUCT_OMNIBUS_PRICE as x, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_NAME as h, ATTR_PRODUCT_IMAGE as y } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
|
|
3
|
+
import { mapTextTheme as E, mapButtonTheme as O, mapImageTheme as b } from "./themeMapper.js";
|
|
4
|
+
const C = "__title__", a = "product_attribute.";
|
|
5
|
+
function N(r) {
|
|
6
6
|
const t = r.variable ?? "";
|
|
7
7
|
switch (t) {
|
|
8
8
|
case "p_recommendation_title":
|
|
9
9
|
return { key: C, kind: "title" };
|
|
10
10
|
case "p_image":
|
|
11
|
-
return { key:
|
|
11
|
+
return { key: y, kind: "image" };
|
|
12
12
|
case "p_name":
|
|
13
|
-
return { key: E, kind: "text" };
|
|
14
|
-
case "p_price":
|
|
15
13
|
return { key: h, kind: "text" };
|
|
14
|
+
case "p_price":
|
|
15
|
+
return { key: R, kind: "text" };
|
|
16
16
|
case "p_original_price":
|
|
17
17
|
return { key: f, kind: "text" };
|
|
18
18
|
case "p_omnibus_price":
|
|
19
19
|
return { key: x, kind: "text" };
|
|
20
20
|
case "p_omnibus_discount":
|
|
21
|
-
return { key:
|
|
21
|
+
return { key: A, kind: "text" };
|
|
22
22
|
case "p_button":
|
|
23
|
-
return { key:
|
|
23
|
+
return { key: k, kind: "button" };
|
|
24
24
|
default:
|
|
25
25
|
if (r.variableType === "p_attribute" || t.startsWith("p_attribute_")) {
|
|
26
|
-
const o = r.value ?? "", s = o.startsWith(
|
|
26
|
+
const o = r.value ?? "", s = o.startsWith(a) ? o.slice(a.length) : o;
|
|
27
27
|
if (!s)
|
|
28
28
|
return null;
|
|
29
|
-
const e = o || `${
|
|
29
|
+
const e = o || `${a}${s}`;
|
|
30
30
|
return {
|
|
31
|
-
key: `${
|
|
31
|
+
key: `${l}${e}`,
|
|
32
32
|
kind: "custom",
|
|
33
33
|
customAttrName: s,
|
|
34
34
|
customAttrValue: e
|
|
@@ -41,7 +41,7 @@ function _(r) {
|
|
|
41
41
|
const t = p.indexOf(r);
|
|
42
42
|
return t === -1 ? Number.POSITIVE_INFINITY : t;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function S(r) {
|
|
45
45
|
const t = {
|
|
46
46
|
composition: [],
|
|
47
47
|
visibility: { ...I },
|
|
@@ -54,10 +54,10 @@ function V(r) {
|
|
|
54
54
|
return t.composition = [...p], t;
|
|
55
55
|
const o = [];
|
|
56
56
|
r.forEach((e, i) => {
|
|
57
|
-
const n =
|
|
57
|
+
const n = N(e);
|
|
58
58
|
if (n) {
|
|
59
59
|
if (n.kind === "title") {
|
|
60
|
-
t.titleVariable = e
|
|
60
|
+
t.titleVariable = e;
|
|
61
61
|
return;
|
|
62
62
|
}
|
|
63
63
|
o.push({
|
|
@@ -82,20 +82,20 @@ function V(r) {
|
|
|
82
82
|
const { key: i, kind: n, hidden: u, legacy: c, customAttrName: d, customAttrValue: m } = e;
|
|
83
83
|
switch (t.composition.push(i), t.visibility[i] = !u, n === "custom" && d && m && (t.customAttributes.includes(m) || t.customAttributes.push(m), t.customAttrValues[i] = m), n) {
|
|
84
84
|
case "image":
|
|
85
|
-
s[i] =
|
|
85
|
+
s[i] = b(c.theme);
|
|
86
86
|
break;
|
|
87
87
|
case "button":
|
|
88
|
-
s[i] =
|
|
88
|
+
s[i] = O(c.theme);
|
|
89
89
|
break;
|
|
90
90
|
case "text":
|
|
91
91
|
case "custom": {
|
|
92
|
-
const
|
|
93
|
-
s[i] =
|
|
92
|
+
const T = E(c.theme);
|
|
93
|
+
s[i] = T, T.textTrimming && (t.anyTextTrimming = !0);
|
|
94
94
|
break;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
}), t.perElementStyles = s, t;
|
|
98
98
|
}
|
|
99
99
|
export {
|
|
100
|
-
|
|
100
|
+
S as mapComposition
|
|
101
101
|
};
|
|
@@ -1,54 +1,49 @@
|
|
|
1
1
|
import { CURRENCY_ATTR as n, CSS_CLASS_SKIP_COMPILE as c } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
|
|
2
2
|
const a = "You May Also Like!";
|
|
3
|
-
function
|
|
4
|
-
var
|
|
5
|
-
const
|
|
6
|
-
if (!
|
|
3
|
+
function l(t) {
|
|
4
|
+
var o;
|
|
5
|
+
const r = t.querySelector(".ext-recommendation-title");
|
|
6
|
+
if (!r)
|
|
7
7
|
return a;
|
|
8
|
-
const
|
|
9
|
-
return
|
|
8
|
+
const e = (o = r.textContent) == null ? void 0 : o.trim();
|
|
9
|
+
return e && e.length > 0 ? e : a;
|
|
10
10
|
}
|
|
11
11
|
function m(t) {
|
|
12
|
-
const
|
|
13
|
-
return e ? !/display\s*:\s*none/i.test(e.getAttribute("style") ?? "") : !1;
|
|
14
|
-
}
|
|
15
|
-
function d(t) {
|
|
16
|
-
const e = [
|
|
12
|
+
const r = [
|
|
17
13
|
t,
|
|
18
14
|
...Array.from(t.querySelectorAll(".product-card, .ext-recommendation-card"))
|
|
19
15
|
];
|
|
20
|
-
let
|
|
21
|
-
return
|
|
22
|
-
const
|
|
23
|
-
if (
|
|
24
|
-
return
|
|
25
|
-
const u = (
|
|
26
|
-
return u && u[1] ? (
|
|
27
|
-
}),
|
|
16
|
+
let e = "";
|
|
17
|
+
return r.some((o) => {
|
|
18
|
+
const i = o.getAttribute("bgcolor");
|
|
19
|
+
if (i && i.trim())
|
|
20
|
+
return e = i.trim(), !0;
|
|
21
|
+
const u = (o.getAttribute("style") ?? "").match(/background-color\s*:\s*([^;]+)/i);
|
|
22
|
+
return u && u[1] ? (e = u[1].trim(), !0) : !1;
|
|
23
|
+
}), e;
|
|
28
24
|
}
|
|
29
25
|
function C(t) {
|
|
30
|
-
const
|
|
31
|
-
if (!
|
|
26
|
+
const r = t.getAttribute(n.CURRENCY);
|
|
27
|
+
if (!r)
|
|
32
28
|
return;
|
|
33
|
-
const
|
|
29
|
+
const e = t.getAttribute(n.SYMBOL);
|
|
34
30
|
return {
|
|
35
|
-
value:
|
|
31
|
+
value: r,
|
|
36
32
|
// An empty `currency-symbol` is omitted so `mapCurrency` falls back to
|
|
37
33
|
// the currency code as the symbol.
|
|
38
|
-
...
|
|
34
|
+
...e ? { symbol: e } : {},
|
|
39
35
|
alignment: t.getAttribute(n.ALIGNMENT) ?? "",
|
|
40
36
|
decimalCount: t.getAttribute(n.DECIMAL_COUNT) ?? "",
|
|
41
37
|
decimalSeparator: t.getAttribute(n.DECIMAL_SEPARATOR) ?? "",
|
|
42
38
|
thousandSeparator: t.getAttribute(n.THOUSAND_SEPARATOR) ?? ""
|
|
43
39
|
};
|
|
44
40
|
}
|
|
45
|
-
function
|
|
41
|
+
function d(t) {
|
|
46
42
|
return t.classList.contains(c);
|
|
47
43
|
}
|
|
48
44
|
export {
|
|
49
|
-
|
|
45
|
+
m as extractCardBgColor,
|
|
50
46
|
C as extractCurrencyFromBlock,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
g as isPartnerManagedBlock
|
|
47
|
+
l as extractTitleText,
|
|
48
|
+
d as isPartnerManagedBlock
|
|
54
49
|
};
|