@useinsider/guido 3.6.0-beta.7ac8612 → 3.6.0-beta.dc3a2aa
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/useHtmlValidator.js +102 -131
- package/dist/config/compiler/utils/recommendationCompilerUtils.js +27 -28
- package/dist/config/migrator/recommendation/extractors.js +22 -44
- package/dist/config/migrator/recommendation/htmlBuilder.js +169 -175
- package/dist/config/migrator/recommendationMigrator.js +31 -30
- package/dist/extensions/Blocks/Recommendation/constants/selectors.js +15 -21
- package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +24 -38
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +38 -39
- package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +35 -45
- package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +2 -3
- package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +52 -62
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +67 -74
- package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +6 -7
- package/dist/extensions/Blocks/Recommendation/extension.js +5 -6
- package/dist/extensions/Blocks/Recommendation/settingsPanel.js +2 -3
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +2 -3
- package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +6 -4
- package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +2 -3
- package/dist/extensions/Blocks/Recommendation/templates/index.js +4 -5
- package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js +19 -19
- package/dist/src/composables/useHtmlValidator.d.ts +0 -9
- package/dist/src/config/migrator/recommendation/extractors.d.ts +0 -15
- package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts +0 -8
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +0 -21
- package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +0 -7
- package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +0 -5
- package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +0 -6
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +0 -9
- package/package.json +1 -1
- package/dist/config/compiler/utils/recommendationIgnoreUtils.js +0 -15
- package/dist/src/config/compiler/utils/recommendationIgnoreUtils.d.ts +0 -17
- package/dist/src/config/compiler/utils/recommendationIgnoreUtils.test.d.ts +0 -1
- /package/dist/src/{composables/useHtmlValidator.test.d.ts → extensions/Blocks/Recommendation/utils/priceFormatter.test.d.ts} +0 -0
|
@@ -1,46 +1,47 @@
|
|
|
1
1
|
import { BlockId as f } from "../../enums/block.js";
|
|
2
|
-
import { useTemplateStore as
|
|
3
|
-
import { mapComposition as
|
|
4
|
-
import {
|
|
5
|
-
import { buildBlockHtml as
|
|
6
|
-
import { parseRecommendationId as
|
|
7
|
-
import { mapSettings as
|
|
8
|
-
const
|
|
9
|
-
function
|
|
10
|
-
var
|
|
11
|
-
const o =
|
|
2
|
+
import { useTemplateStore as u } from "../../stores/template.js";
|
|
3
|
+
import { mapComposition as b } from "./recommendation/compositionMapper.js";
|
|
4
|
+
import { extractTitleText as y, extractCardBgColor as C } from "./recommendation/extractors.js";
|
|
5
|
+
import { buildBlockHtml as v } from "./recommendation/htmlBuilder.js";
|
|
6
|
+
import { parseRecommendationId as w, parseLegacyConfig as R } from "./recommendation/parseLegacyConfig.js";
|
|
7
|
+
import { mapSettings as S } from "./recommendation/settingsMapper.js";
|
|
8
|
+
const h = 'td[esd-dev-product-config][class*="ins-recommendation-v3-block-"]:not(.recommendation-block-v2), td.product-block[esd-handler-name*="EmailRecommendationV3"][esd-dev-product-config]:not(.recommendation-block-v2)';
|
|
9
|
+
function x(i, t, c) {
|
|
10
|
+
var s;
|
|
11
|
+
const o = w(t);
|
|
12
12
|
if (o === null)
|
|
13
13
|
return console.warn(
|
|
14
14
|
"[RecommendationMigrator] Skipping block — missing/invalid `ins-recommendation-v3-campaign-id`"
|
|
15
15
|
), !1;
|
|
16
|
-
const r =
|
|
16
|
+
const r = R(t);
|
|
17
17
|
if (!r)
|
|
18
18
|
return console.warn(
|
|
19
19
|
`[RecommendationMigrator] Aborting block id=${o} — \`esd-dev-product-config\` missing or unable to be parsed`
|
|
20
20
|
), !1;
|
|
21
|
-
const n = c[String(o)]
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
const n = c[String(o)];
|
|
22
|
+
if (!n)
|
|
23
|
+
return console.warn(
|
|
24
|
+
`[RecommendationMigrator] Aborting block id=${o} — recommendationConfigs entry missing in Guido Config`
|
|
25
|
+
), !1;
|
|
26
|
+
const a = S(n, r, o), e = b((s = r.composition) == null ? void 0 : s.variables), d = y(t), l = C(t), g = {
|
|
24
27
|
...a,
|
|
25
28
|
composition: e.composition,
|
|
26
29
|
visibility: e.visibility,
|
|
27
30
|
textTrimming: e.anyTextTrimming
|
|
28
|
-
},
|
|
31
|
+
}, p = `
|
|
29
32
|
<table>
|
|
30
33
|
<tbody>
|
|
31
34
|
<tr>
|
|
32
35
|
<td class="esd-structure" align="left">
|
|
33
36
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
34
37
|
<tbody>
|
|
35
|
-
<tr>${
|
|
36
|
-
nodeConfig:
|
|
38
|
+
<tr>${v({
|
|
39
|
+
nodeConfig: g,
|
|
37
40
|
composition: e,
|
|
38
|
-
cardBg:
|
|
39
|
-
titleText:
|
|
41
|
+
cardBg: l,
|
|
42
|
+
titleText: d,
|
|
40
43
|
legacyId: t.getAttribute("id") ?? void 0,
|
|
41
|
-
legacyBgColor: t.getAttribute("bgcolor") ?? void 0
|
|
42
|
-
preserveInnerHtml: m ? t.innerHTML : void 0,
|
|
43
|
-
skipCompile: m
|
|
44
|
+
legacyBgColor: t.getAttribute("bgcolor") ?? void 0
|
|
44
45
|
})}</tr>
|
|
45
46
|
</tbody>
|
|
46
47
|
</table>
|
|
@@ -48,15 +49,15 @@ function B(i, t, c) {
|
|
|
48
49
|
</tr>
|
|
49
50
|
</tbody>
|
|
50
51
|
</table>
|
|
51
|
-
`,
|
|
52
|
-
return !
|
|
52
|
+
`, m = i.parseFromString(p, "text/html").querySelector("td.esd-structure");
|
|
53
|
+
return !m || !t.parentNode ? (console.warn(
|
|
53
54
|
`[RecommendationMigrator] Aborting block id=${o} — failed to construct new HTML element`
|
|
54
|
-
), !1) : (t.parentNode.replaceChild(
|
|
55
|
+
), !1) : (t.parentNode.replaceChild(m, t), !0);
|
|
55
56
|
}
|
|
56
|
-
function
|
|
57
|
-
const c = new DOMParser(), o = c.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(
|
|
57
|
+
function I(i, t = {}) {
|
|
58
|
+
const c = new DOMParser(), o = c.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(h));
|
|
58
59
|
try {
|
|
59
|
-
|
|
60
|
+
u().$patch((e) => {
|
|
60
61
|
e.migrations = {
|
|
61
62
|
...e.migrations,
|
|
62
63
|
[f.Recommendation]: r.length
|
|
@@ -69,12 +70,12 @@ function q(i, t = {}) {
|
|
|
69
70
|
let n = 0;
|
|
70
71
|
return r.forEach((a) => {
|
|
71
72
|
try {
|
|
72
|
-
|
|
73
|
+
x(c, a, t) && (n += 1);
|
|
73
74
|
} catch (e) {
|
|
74
75
|
console.error("[RecommendationMigrator] Unexpected error migrating block:", e);
|
|
75
76
|
}
|
|
76
77
|
}), n > 0 && console.info(`[RecommendationMigrator] Migrated ${n} legacy Recommendation block(s)`), o.documentElement.outerHTML;
|
|
77
78
|
}
|
|
78
79
|
export {
|
|
79
|
-
|
|
80
|
+
I as migrateRecommendation
|
|
80
81
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const T = ".recommendation-block-v2",
|
|
1
|
+
const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", n = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = "reco-v3-button", _ = {
|
|
2
2
|
CURRENCY: "currency",
|
|
3
3
|
SYMBOL: "currency-symbol",
|
|
4
4
|
ALIGNMENT: "currency-alignment",
|
|
5
5
|
THOUSAND_SEPARATOR: "currency-thousand-separator",
|
|
6
6
|
DECIMAL_SEPARATOR: "currency-decimal-separator",
|
|
7
7
|
DECIMAL_COUNT: "currency-decimal-count"
|
|
8
|
-
},
|
|
8
|
+
}, R = "productImage", e = "productName", O = "productPrice", s = "productOldPrice", i = "productOmnibusPrice", C = "productOmnibusDiscount", E = "productButton", A = "customAttr:", u = "data-custom-attributes", m = "product-attr", a = /* @__PURE__ */ new Set([
|
|
9
9
|
"name",
|
|
10
10
|
// productName
|
|
11
11
|
"price",
|
|
@@ -20,30 +20,24 @@ const T = ".recommendation-block-v2", n = ".ins-recommendation-product-container
|
|
|
20
20
|
// productOmnibusPrice
|
|
21
21
|
"omnibus_discount"
|
|
22
22
|
// productOmnibusDiscount
|
|
23
|
-
]), a = /* @__PURE__ */ new Set([
|
|
24
|
-
...c,
|
|
25
|
-
"currency",
|
|
26
|
-
"discount"
|
|
27
23
|
]);
|
|
28
24
|
export {
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
A as ATTR_CUSTOM_PREFIX,
|
|
26
|
+
u as ATTR_DATA_CUSTOM_ATTRIBUTES,
|
|
31
27
|
m as ATTR_PRODUCT_ATTR,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
E as ATTR_PRODUCT_BUTTON,
|
|
29
|
+
R as ATTR_PRODUCT_IMAGE,
|
|
30
|
+
e as ATTR_PRODUCT_NAME,
|
|
31
|
+
s as ATTR_PRODUCT_OLD_PRICE,
|
|
36
32
|
C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
i as ATTR_PRODUCT_OMNIBUS_PRICE,
|
|
34
|
+
O as ATTR_PRODUCT_PRICE,
|
|
39
35
|
T as BLOCK_ROOT_SELECTOR,
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
a as BUILT_IN_DEFAULT_ATTRIBUTES,
|
|
37
|
+
c as CONTAINER_SELECTOR,
|
|
42
38
|
r as CSS_CLASS_RECO_BUTTON,
|
|
43
|
-
|
|
44
|
-
e as CURRENCY_ATTR,
|
|
39
|
+
_ as CURRENCY_ATTR,
|
|
45
40
|
o as DESKTOP_CONTAINER_SELECTOR,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
a as RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES
|
|
41
|
+
n as MOBILE_CONTAINER_SELECTOR,
|
|
42
|
+
t as MOBILE_ROW_SELECTOR
|
|
49
43
|
};
|
|
@@ -3,7 +3,7 @@ var J = (p, _, t) => _ in p ? X(p, _, { enumerable: !0, configurable: !0, writab
|
|
|
3
3
|
var C = (p, _, t) => J(p, typeof _ != "symbol" ? _ + "" : _, t);
|
|
4
4
|
import { UIElementType as f, UEAttr as $, ModificationDescription as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
5
|
import { CommonControl as Q } from "../../../common-control.js";
|
|
6
|
-
import { ATTR_PRODUCT_IMAGE as
|
|
6
|
+
import { ATTR_PRODUCT_IMAGE as L, ATTR_PRODUCT_NAME as Z, ATTR_PRODUCT_PRICE as tt, ATTR_PRODUCT_OLD_PRICE as et, ATTR_PRODUCT_OMNIBUS_PRICE as rt, ATTR_PRODUCT_OMNIBUS_DISCOUNT as ot, ATTR_PRODUCT_BUTTON as D, ATTR_DATA_CUSTOM_ATTRIBUTES as k, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as st } from "../../constants/selectors.js";
|
|
7
7
|
import { DEFAULT_COMPOSITION as q, DEFAULT_VISIBILITY as P } from "../../constants/defaultConfig.js";
|
|
8
8
|
import { RecommendationConfigService as it } from "../../services/configService.js";
|
|
9
9
|
import { useRecommendationExtensionStore as nt } from "../../store/recommendation.js";
|
|
@@ -11,19 +11,19 @@ import { ATTRIBUTE_CELL_CLASS as lt, gridElementRenderer as at, DEFAULT_CELL_PAD
|
|
|
11
11
|
import { listElementRenderer as ut } from "../../templates/list/elementRenderer.js";
|
|
12
12
|
import { toDisplayName as dt, isDefaultAttribute as mt, buildElementRenderer as F } from "../../templates/utils.js";
|
|
13
13
|
import { getTableDisplayValue as ht } from "../../utils/tagName.js";
|
|
14
|
-
import {
|
|
15
|
-
const
|
|
14
|
+
import { getCurrentLayout as pt } from "../main/utils.js";
|
|
15
|
+
const _t = "ui-elements-recommendation-card-composition", S = ".recommendation-attribute-row", N = ".product-card-wrapper > tbody", w = ".product-info-cell > table > tbody", M = "data-card-composition", y = "data-attribute-type", I = "data-visibility", x = {
|
|
16
16
|
ADD_ATTRIBUTE: "addAttribute"
|
|
17
17
|
}, g = 5, v = "reorderIcon_", h = [
|
|
18
|
-
{ key:
|
|
18
|
+
{ key: L, label: "Product Image" },
|
|
19
19
|
{ key: Z, label: "Product Name" },
|
|
20
20
|
{ key: tt, label: "Product Price" },
|
|
21
21
|
{ key: et, label: "Product Original Price" },
|
|
22
22
|
{ key: rt, label: "Omnibus Price" },
|
|
23
23
|
{ key: ot, label: "Omnibus Discount" },
|
|
24
|
-
{ key:
|
|
25
|
-
],
|
|
26
|
-
class
|
|
24
|
+
{ key: D, label: "Product Button" }
|
|
25
|
+
], ft = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
|
|
26
|
+
class Nt extends Q {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments);
|
|
29
29
|
C(this, "store", nt());
|
|
@@ -36,7 +36,7 @@ class Dt extends Q {
|
|
|
36
36
|
C(this, "reorderInProgress", !1);
|
|
37
37
|
}
|
|
38
38
|
getId() {
|
|
39
|
-
return
|
|
39
|
+
return _t;
|
|
40
40
|
}
|
|
41
41
|
// ========================================================================
|
|
42
42
|
// Lifecycle
|
|
@@ -128,24 +128,10 @@ class Dt extends Q {
|
|
|
128
128
|
`;
|
|
129
129
|
}
|
|
130
130
|
onRender() {
|
|
131
|
-
this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges()
|
|
132
|
-
}
|
|
133
|
-
/**
|
|
134
|
-
* Card composition restructures the block (toggles/reorders/adds attribute
|
|
135
|
-
* cells), which would corrupt a partner-managed (`ins-skip-compile`) block's
|
|
136
|
-
* preserved markup. There is no native tab-disable API, so the whole control
|
|
137
|
-
* container is rendered inert (greyed + non-interactive) instead.
|
|
138
|
-
*/
|
|
139
|
-
_syncDisabledState() {
|
|
140
|
-
var e;
|
|
141
|
-
const t = (e = this.getContainer()) == null ? void 0 : e.querySelector("[data-card-composition-control]");
|
|
142
|
-
if (!t)
|
|
143
|
-
return;
|
|
144
|
-
const r = pt(this.currentNode);
|
|
145
|
-
t.style.pointerEvents = r ? "none" : "", t.style.opacity = r ? "0.5" : "";
|
|
131
|
+
this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges();
|
|
146
132
|
}
|
|
147
133
|
onTemplateNodeUpdated(t) {
|
|
148
|
-
super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState()
|
|
134
|
+
super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState());
|
|
149
135
|
}
|
|
150
136
|
onDestroy() {
|
|
151
137
|
super.onDestroy(), this.eventController && (this.eventController.abort(), this.eventController = null), this.unsubscribeStore && (this.unsubscribeStore(), this.unsubscribeStore = null);
|
|
@@ -182,7 +168,7 @@ class Dt extends Q {
|
|
|
182
168
|
_readCustomAttributesFromNode() {
|
|
183
169
|
if (!this.currentNode || !("getAttribute" in this.currentNode))
|
|
184
170
|
return [];
|
|
185
|
-
const t = this.currentNode.getAttribute(
|
|
171
|
+
const t = this.currentNode.getAttribute(k);
|
|
186
172
|
if (!t)
|
|
187
173
|
return [];
|
|
188
174
|
try {
|
|
@@ -238,7 +224,7 @@ class Dt extends Q {
|
|
|
238
224
|
const s = new Set(r);
|
|
239
225
|
let i = 0, n = 0;
|
|
240
226
|
const c = t.map((a) => {
|
|
241
|
-
if (
|
|
227
|
+
if (ft.has(a)) {
|
|
242
228
|
const l = h.find((u) => u.key === a);
|
|
243
229
|
return this._createBuiltInItemHtml(l, n++);
|
|
244
230
|
}
|
|
@@ -545,13 +531,13 @@ class Dt extends Q {
|
|
|
545
531
|
const i = it.getConfig(this.currentNode), c = `0 ${Math.floor(i.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
|
|
546
532
|
let u = 0;
|
|
547
533
|
s.forEach((d) => {
|
|
548
|
-
var
|
|
549
|
-
const b = d.querySelector(S), R = ((
|
|
550
|
-
if (
|
|
534
|
+
var U;
|
|
535
|
+
const b = d.querySelector(S), R = ((U = b == null ? void 0 : b.querySelectorAll(`.${lt}`)) == null ? void 0 : U.length) || 1, V = (100 / R).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), K = o.map((B) => {
|
|
536
|
+
if (B === e) {
|
|
551
537
|
const z = Array.from(
|
|
552
538
|
{ length: R },
|
|
553
|
-
(
|
|
554
|
-
const G = l > 0 ? (u +
|
|
539
|
+
(gt, H) => {
|
|
540
|
+
const G = l > 0 ? (u + H) % l : H, Y = this._resolveAttributeContent(t, r, G);
|
|
555
541
|
return this._getGridCellHtml(
|
|
556
542
|
t,
|
|
557
543
|
Y,
|
|
@@ -565,7 +551,7 @@ class Dt extends Q {
|
|
|
565
551
|
return `<tr class="recommendation-attribute-row" ${y}="${e}" ${I}="1">${z}</tr>`;
|
|
566
552
|
}
|
|
567
553
|
const O = d.querySelector(
|
|
568
|
-
`${S}[${y}="${
|
|
554
|
+
`${S}[${y}="${B}"]`
|
|
569
555
|
);
|
|
570
556
|
return O && "getOuterHTML" in O ? O.getOuterHTML() : "";
|
|
571
557
|
}).join("");
|
|
@@ -576,7 +562,7 @@ class Dt extends Q {
|
|
|
576
562
|
const s = this.currentNode.querySelectorAll(w);
|
|
577
563
|
if (!(s != null && s.length))
|
|
578
564
|
return;
|
|
579
|
-
const i = o.filter((c) => c !==
|
|
565
|
+
const i = o.filter((c) => c !== L && c !== D), n = this.api.getDocumentModifier();
|
|
580
566
|
s.forEach((c, a) => {
|
|
581
567
|
const l = i.map((u) => {
|
|
582
568
|
if (u === e) {
|
|
@@ -606,7 +592,7 @@ class Dt extends Q {
|
|
|
606
592
|
e.modifyHtml(s).setInnerHtml(i);
|
|
607
593
|
});
|
|
608
594
|
} else {
|
|
609
|
-
const o = t.filter((i) => i !==
|
|
595
|
+
const o = t.filter((i) => i !== L && i !== D), s = this.currentNode.querySelectorAll(w);
|
|
610
596
|
s == null || s.forEach((i) => {
|
|
611
597
|
const n = this._buildCompositionHtml(i, o);
|
|
612
598
|
e.modifyHtml(i).setInnerHtml(n);
|
|
@@ -625,7 +611,7 @@ class Dt extends Q {
|
|
|
625
611
|
* producing a flicker on the custom attribute dropdowns.
|
|
626
612
|
*/
|
|
627
613
|
_updateBothAttributes(t, r) {
|
|
628
|
-
this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(M, t.join(",")).setAttribute(
|
|
614
|
+
this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(M, t.join(",")).setAttribute(k, JSON.stringify(r)).apply(new A(this.api.translate("Update card composition")));
|
|
629
615
|
}
|
|
630
616
|
/**
|
|
631
617
|
* Reorders attribute rows within each product card based on composition order.
|
|
@@ -687,7 +673,7 @@ class Dt extends Q {
|
|
|
687
673
|
return -1;
|
|
688
674
|
}
|
|
689
675
|
_getCurrentLayout() {
|
|
690
|
-
return this.store.recommendationConfigs.orientation ||
|
|
676
|
+
return this.store.recommendationConfigs.orientation || pt(this.currentNode);
|
|
691
677
|
}
|
|
692
678
|
/**
|
|
693
679
|
* Extracts background color properties from existing card elements.
|
|
@@ -803,6 +789,6 @@ class Dt extends Q {
|
|
|
803
789
|
}
|
|
804
790
|
}
|
|
805
791
|
export {
|
|
806
|
-
|
|
807
|
-
|
|
792
|
+
_t as COMPOSITION_CONTROL_BLOCK_ID,
|
|
793
|
+
Nt as RecommendationCardCompositionControl
|
|
808
794
|
};
|
|
@@ -6,26 +6,26 @@ import { DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
|
|
|
6
6
|
import { RecommendationConfigService as h } from "../../services/configService.js";
|
|
7
7
|
import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
|
|
8
8
|
import { AlgorithmControl as N } from "./algorithm.js";
|
|
9
|
-
import { ALGORITHM_CONTROL_ID as
|
|
9
|
+
import { ALGORITHM_CONTROL_ID as Q } from "./algorithm.js";
|
|
10
10
|
import { CurrencyControl as R } from "./currency.js";
|
|
11
|
-
import { CURRENCY_CONTROL_ID as
|
|
11
|
+
import { CURRENCY_CONTROL_ID as Z } from "./currency.js";
|
|
12
12
|
import { FiltersControl as _ } from "./filters.js";
|
|
13
|
-
import { FILTERS_CONTROL_ID as
|
|
13
|
+
import { FILTERS_CONTROL_ID as et } from "./filters.js";
|
|
14
14
|
import { LayoutOrientationControl as b } from "./layoutOrientation.js";
|
|
15
|
-
import { LAYOUT_ORIENTATION_CONTROL_ID as
|
|
15
|
+
import { LAYOUT_ORIENTATION_CONTROL_ID as rt } from "./layoutOrientation.js";
|
|
16
16
|
import { LocaleControl as O } from "./locale.js";
|
|
17
|
-
import { LOCALE_CONTROL_ID as
|
|
17
|
+
import { LOCALE_CONTROL_ID as it } from "./locale.js";
|
|
18
18
|
import { ProductCountControl as I } from "./productCount.js";
|
|
19
|
-
import { PRODUCT_COUNT_CONTROL_ID as
|
|
19
|
+
import { PRODUCT_COUNT_CONTROL_ID as at } from "./productCount.js";
|
|
20
20
|
import { ProductLayoutControl as T } from "./productLayout.js";
|
|
21
|
-
import { PRODUCT_LAYOUT_CONTROL_ID as
|
|
21
|
+
import { PRODUCT_LAYOUT_CONTROL_ID as lt } from "./productLayout.js";
|
|
22
22
|
import { ShuffleControl as S } from "./shuffle.js";
|
|
23
|
-
import { SHUFFLE_CONTROL_ID as
|
|
24
|
-
import { setCurrencyAttributes as L, getBlockElement as P,
|
|
25
|
-
import { adjustProductsToSize as
|
|
23
|
+
import { SHUFFLE_CONTROL_ID as dt } from "./shuffle.js";
|
|
24
|
+
import { setCurrencyAttributes as L, getBlockElement as P, updateProductContentInPlace as D, regenerateProductRowsWithStyles as k } from "./utils.js";
|
|
25
|
+
import { adjustProductsToSize as mt, formatProductPrice as ft, getCardComposition as Ct, getCurrentLayout as pt, reapplySpacing as gt, regenerateMobileProductRows as yt, regenerateProductRows as Nt, updatePricesInPlace as Rt, updateSingleProductContent as _t } from "./utils.js";
|
|
26
26
|
import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
|
|
27
|
-
const
|
|
28
|
-
class
|
|
27
|
+
const E = "recommendation-id", v = "ui-elements-recommendation-block";
|
|
28
|
+
class K extends g {
|
|
29
29
|
constructor() {
|
|
30
30
|
super(...arguments);
|
|
31
31
|
s(this, "store", y());
|
|
@@ -59,14 +59,14 @@ class q extends g {
|
|
|
59
59
|
*/
|
|
60
60
|
s(this, "_debouncedRegenerateWithProducts", m(() => {
|
|
61
61
|
const t = this.store.recommendationProducts;
|
|
62
|
-
if (!this.currentNode || !this.api
|
|
62
|
+
if (!this.currentNode || !this.api)
|
|
63
63
|
return;
|
|
64
64
|
const e = this.api.getDocumentModifier();
|
|
65
|
-
|
|
65
|
+
D({
|
|
66
66
|
currentNode: this.currentNode,
|
|
67
67
|
documentModifier: e,
|
|
68
68
|
products: t
|
|
69
|
-
}) ||
|
|
69
|
+
}) || k({
|
|
70
70
|
currentNode: this.currentNode,
|
|
71
71
|
documentModifier: e,
|
|
72
72
|
products: t
|
|
@@ -74,7 +74,7 @@ class q extends g {
|
|
|
74
74
|
}, 100));
|
|
75
75
|
}
|
|
76
76
|
getId() {
|
|
77
|
-
return
|
|
77
|
+
return v;
|
|
78
78
|
}
|
|
79
79
|
getTemplate() {
|
|
80
80
|
return this.algorithmControl = new N(), this.localeControl = new O(), this.currencyControl = new R(), this.productCountControl = new I(), this.productLayoutControl = new T(), this.filtersControl = new _(), this.shuffleControl = new S(), this.layoutOrientationControl = new b(), [
|
|
@@ -290,7 +290,7 @@ class q extends g {
|
|
|
290
290
|
const e = P(t);
|
|
291
291
|
if (!e || !("getAttribute" in e))
|
|
292
292
|
return null;
|
|
293
|
-
const o = e.getAttribute(
|
|
293
|
+
const o = e.getAttribute(E);
|
|
294
294
|
if (!o)
|
|
295
295
|
return null;
|
|
296
296
|
const r = parseInt(o);
|
|
@@ -341,36 +341,35 @@ class q extends g {
|
|
|
341
341
|
}
|
|
342
342
|
}
|
|
343
343
|
export {
|
|
344
|
-
|
|
344
|
+
Q as ALGORITHM_CONTROL_ID,
|
|
345
345
|
N as AlgorithmControl,
|
|
346
|
-
|
|
347
|
-
|
|
346
|
+
v as CONTROL_BLOCK_ID,
|
|
347
|
+
Z as CURRENCY_CONTROL_ID,
|
|
348
348
|
R as CurrencyControl,
|
|
349
|
-
|
|
349
|
+
et as FILTERS_CONTROL_ID,
|
|
350
350
|
_ as FiltersControl,
|
|
351
|
-
|
|
352
|
-
|
|
351
|
+
rt as LAYOUT_ORIENTATION_CONTROL_ID,
|
|
352
|
+
it as LOCALE_CONTROL_ID,
|
|
353
353
|
b as LayoutOrientationControl,
|
|
354
354
|
O as LocaleControl,
|
|
355
|
-
|
|
356
|
-
|
|
355
|
+
at as PRODUCT_COUNT_CONTROL_ID,
|
|
356
|
+
lt as PRODUCT_LAYOUT_CONTROL_ID,
|
|
357
357
|
I as ProductCountControl,
|
|
358
358
|
T as ProductLayoutControl,
|
|
359
|
-
|
|
360
|
-
|
|
359
|
+
K as RecommendationBlockControl,
|
|
360
|
+
dt as SHUFFLE_CONTROL_ID,
|
|
361
361
|
S as ShuffleControl,
|
|
362
|
-
|
|
363
|
-
|
|
362
|
+
mt as adjustProductsToSize,
|
|
363
|
+
ft as formatProductPrice,
|
|
364
364
|
P as getBlockElement,
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
yt as
|
|
369
|
-
Nt as
|
|
370
|
-
|
|
371
|
-
E as regenerateProductRowsWithStyles,
|
|
365
|
+
Ct as getCardComposition,
|
|
366
|
+
pt as getCurrentLayout,
|
|
367
|
+
gt as reapplySpacing,
|
|
368
|
+
yt as regenerateMobileProductRows,
|
|
369
|
+
Nt as regenerateProductRows,
|
|
370
|
+
k as regenerateProductRowsWithStyles,
|
|
372
371
|
L as setCurrencyAttributes,
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
372
|
+
Rt as updatePricesInPlace,
|
|
373
|
+
D as updateProductContentInPlace,
|
|
374
|
+
_t as updateSingleProductContent
|
|
376
375
|
};
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var r = (o, e, t) =>
|
|
4
|
-
import {
|
|
5
|
-
import { CommonControl as
|
|
1
|
+
var p = Object.defineProperty;
|
|
2
|
+
var A = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
|
|
3
|
+
var r = (o, e, t) => A(o, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as N } from "../../../common-control.js";
|
|
6
6
|
import { ATTR_DATA_CUSTOM_ATTRIBUTES as L } from "../../constants/selectors.js";
|
|
7
|
-
import { LAYOUT_OPTIONS as
|
|
8
|
-
import { DEFAULT_COMPOSITION as
|
|
9
|
-
import { RecommendationConfigService as
|
|
10
|
-
import { useRecommendationExtensionStore as
|
|
11
|
-
import {
|
|
12
|
-
const
|
|
7
|
+
import { LAYOUT_OPTIONS as T, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
|
|
8
|
+
import { DEFAULT_COMPOSITION as _ } from "../../constants/defaultConfig.js";
|
|
9
|
+
import { RecommendationConfigService as s } from "../../services/configService.js";
|
|
10
|
+
import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
|
|
11
|
+
import { getCurrentLayout as C, getBlockElement as I, regenerateProductRowsWithStyles as S } from "./utils.js";
|
|
12
|
+
const U = "recommendation-layout-orientation-control", O = "recommendationInfoBannerTest", a = {
|
|
13
13
|
LAYOUT: "layout"
|
|
14
|
-
},
|
|
14
|
+
}, y = "data-card-composition", n = {
|
|
15
15
|
LAYOUT: "data-layout",
|
|
16
16
|
COLUMN_SPACING: "data-column-spacing",
|
|
17
17
|
ROW_SPACING: "data-row-spacing",
|
|
18
18
|
MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
|
|
19
19
|
MOBILE_ROW_SPACING: "data-mobile-row-spacing"
|
|
20
20
|
};
|
|
21
|
-
class
|
|
21
|
+
class Y extends N {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments);
|
|
24
|
-
r(this, "store",
|
|
24
|
+
r(this, "store", f());
|
|
25
25
|
r(this, "isChangingLayout", !1);
|
|
26
26
|
}
|
|
27
27
|
getId() {
|
|
28
|
-
return
|
|
28
|
+
return U;
|
|
29
29
|
}
|
|
30
30
|
getTemplate() {
|
|
31
31
|
return `
|
|
@@ -35,8 +35,8 @@ class V extends T {
|
|
|
35
35
|
${this._GuTwoColumns([
|
|
36
36
|
this._GuLabel({ text: this.api.translate("Layout Orientation") }),
|
|
37
37
|
this._GuRadioButton({
|
|
38
|
-
name:
|
|
39
|
-
buttons:
|
|
38
|
+
name: a.LAYOUT,
|
|
39
|
+
buttons: T
|
|
40
40
|
})
|
|
41
41
|
])}
|
|
42
42
|
</div>
|
|
@@ -46,29 +46,19 @@ class V extends T {
|
|
|
46
46
|
this._setInfoMessageValue(
|
|
47
47
|
O,
|
|
48
48
|
this.api.translate(
|
|
49
|
-
`Note that updating the Layout Orientation, Number of Products
|
|
50
|
-
Products in One Row
|
|
49
|
+
`Note that updating the Layout Orientation, Number of Products,
|
|
50
|
+
Products in One Row and Mobile Layout Optimization settings
|
|
51
|
+
resets the style of your Recommendation block.`
|
|
51
52
|
)
|
|
52
|
-
), this._setFormValues(), this.
|
|
53
|
+
), this._setFormValues(), this._listenToFormUpdates();
|
|
53
54
|
}
|
|
54
55
|
onTemplateNodeUpdated(t) {
|
|
55
|
-
super.onTemplateNodeUpdated(t), this._setFormValues()
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Layout orientation restructures the whole block, which is meaningless for
|
|
59
|
-
* partner-managed (`ins-skip-compile`) blocks — disable the control there.
|
|
60
|
-
*/
|
|
61
|
-
_syncDisabledState() {
|
|
62
|
-
this.api.setUIEAttribute(
|
|
63
|
-
s.LAYOUT,
|
|
64
|
-
p.RADIO_BUTTONS.disabled,
|
|
65
|
-
I(this.currentNode)
|
|
66
|
-
);
|
|
56
|
+
super.onTemplateNodeUpdated(t), this._setFormValues();
|
|
67
57
|
}
|
|
68
58
|
_setFormValues() {
|
|
69
|
-
const u =
|
|
59
|
+
const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
|
|
70
60
|
this.api.updateValues({
|
|
71
|
-
[
|
|
61
|
+
[a.LAYOUT]: u
|
|
72
62
|
});
|
|
73
63
|
}
|
|
74
64
|
/**
|
|
@@ -76,26 +66,26 @@ class V extends T {
|
|
|
76
66
|
* Updates node config, data attribute and regenerates product rows
|
|
77
67
|
*/
|
|
78
68
|
_onLayoutChange(t) {
|
|
79
|
-
if (this.isChangingLayout || !this.currentNode || (
|
|
69
|
+
if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
|
|
80
70
|
return;
|
|
81
|
-
const c =
|
|
71
|
+
const c = I(this.currentNode);
|
|
82
72
|
if (c) {
|
|
83
73
|
this.isChangingLayout = !0;
|
|
84
74
|
try {
|
|
85
|
-
|
|
75
|
+
s.updateConfig(
|
|
86
76
|
this.api,
|
|
87
77
|
this.currentNode,
|
|
88
78
|
{
|
|
89
79
|
layout: t,
|
|
90
|
-
columnSpacing:
|
|
80
|
+
columnSpacing: g,
|
|
91
81
|
rowSpacing: l,
|
|
92
82
|
mobileColumnSpacing: d,
|
|
93
83
|
mobileRowSpacing: m
|
|
94
84
|
},
|
|
95
85
|
`Changed layout to ${t}`
|
|
96
86
|
), this.store.patchCurrentBlockConfig({ orientation: t });
|
|
97
|
-
const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING,
|
|
98
|
-
t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.setAttribute(
|
|
87
|
+
const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
|
|
88
|
+
t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.setAttribute(y, _.join(",")).setAttribute(L, "[]"), i.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
|
|
99
89
|
} finally {
|
|
100
90
|
this.isChangingLayout = !1;
|
|
101
91
|
}
|
|
@@ -107,20 +97,20 @@ class V extends T {
|
|
|
107
97
|
* @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
|
|
108
98
|
*/
|
|
109
99
|
_regenerateProductRows(t) {
|
|
110
|
-
this.currentNode &&
|
|
100
|
+
this.currentNode && S({
|
|
111
101
|
currentNode: this.currentNode,
|
|
112
102
|
documentModifier: this.api.getDocumentModifier(),
|
|
113
103
|
layout: t,
|
|
114
|
-
composition:
|
|
104
|
+
composition: _
|
|
115
105
|
});
|
|
116
106
|
}
|
|
117
107
|
_listenToFormUpdates() {
|
|
118
|
-
this.api.onValueChanged(
|
|
108
|
+
this.api.onValueChanged(a.LAYOUT, (t) => {
|
|
119
109
|
this._onLayoutChange(t);
|
|
120
110
|
});
|
|
121
111
|
}
|
|
122
112
|
}
|
|
123
113
|
export {
|
|
124
|
-
|
|
125
|
-
|
|
114
|
+
U as LAYOUT_ORIENTATION_CONTROL_ID,
|
|
115
|
+
Y as LayoutOrientationControl
|
|
126
116
|
};
|
|
@@ -2,14 +2,13 @@ var s = Object.defineProperty;
|
|
|
2
2
|
var u = (e, o, t) => o in e ? s(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
|
|
3
3
|
var i = (e, o, t) => u(e, typeof o != "symbol" ? o + "" : o, t);
|
|
4
4
|
import { CommonControl as a } from "../../../common-control.js";
|
|
5
|
-
import "../../constants/selectors.js";
|
|
6
5
|
import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
|
|
7
6
|
import { RecommendationConfigService as n } from "../../services/configService.js";
|
|
8
7
|
import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
|
|
9
8
|
const C = "recommendation-product-count-control", r = {
|
|
10
9
|
PRODUCT_COUNT: "size"
|
|
11
10
|
};
|
|
12
|
-
class
|
|
11
|
+
class g extends a {
|
|
13
12
|
constructor() {
|
|
14
13
|
super(...arguments);
|
|
15
14
|
i(this, "store", d());
|
|
@@ -55,5 +54,5 @@ class U extends a {
|
|
|
55
54
|
}
|
|
56
55
|
export {
|
|
57
56
|
C as PRODUCT_COUNT_CONTROL_ID,
|
|
58
|
-
|
|
57
|
+
g as ProductCountControl
|
|
59
58
|
};
|