@useinsider/guido 3.8.0-beta.bf9ea20 → 3.8.0-beta.eb4074b
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 +180 -133
- package/dist/config/compiler/utils/recommendationCompilerUtils.js +64 -69
- package/dist/config/compiler/utils/recommendationIgnoreUtils.js +15 -0
- package/dist/config/migrator/recommendation/extractors.js +44 -22
- package/dist/config/migrator/recommendation/htmlBuilder.js +175 -169
- package/dist/config/migrator/recommendationMigrator.js +30 -31
- package/dist/extensions/Blocks/Items/block.js +29 -48
- package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +45 -62
- package/dist/extensions/Blocks/Recommendation/constants/selectors.js +22 -15
- package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +55 -41
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +42 -43
- package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +48 -45
- package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +3 -2
- package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +64 -60
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +294 -335
- package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +7 -6
- package/dist/extensions/Blocks/Recommendation/extension.js +7 -5
- package/dist/extensions/Blocks/Recommendation/settingsPanel.js +4 -2
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +3 -2
- package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +142 -173
- package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +56 -29
- package/dist/extensions/Blocks/Recommendation/templates/index.js +30 -8
- package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +132 -105
- package/dist/extensions/Blocks/Recommendation/templates/list/template.js +44 -23
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +112 -64
- package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +219 -0
- package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +24 -19
- package/dist/extensions/Blocks/Recommendation/utils/tagName.js +30 -22
- package/dist/extensions/Blocks/Unsubscribe/block.js +1 -1
- package/dist/extensions/Blocks/controlFactories.js +159 -133
- package/dist/src/composables/useHtmlValidator.d.ts +27 -0
- package/dist/src/composables/useHtmlValidator.test.d.ts +1 -0
- package/dist/src/config/compiler/utils/recommendationIgnoreUtils.d.ts +17 -0
- package/dist/src/config/compiler/utils/recommendationIgnoreUtils.test.d.ts +1 -0
- package/dist/src/config/migrator/recommendation/extractors.d.ts +15 -0
- package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts +8 -0
- package/dist/src/extensions/Blocks/Items/block.d.ts +0 -8
- package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +23 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +7 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +6 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +29 -47
- package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
- package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -2
- package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +165 -11
- package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +78 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +15 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +29 -9
- package/dist/src/extensions/Blocks/controlFactories.d.ts +11 -1
- package/package.json +1 -1
- package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +0 -113
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var J = Object.defineProperty;
|
|
2
2
|
var Q = (p, _, t) => _ in p ? J(p, _, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[_] = t;
|
|
3
|
-
var
|
|
3
|
+
var T = (p, _, t) => Q(p, typeof _ != "symbol" ? _ + "" : _, t);
|
|
4
4
|
import { UIElementType as f, UEAttr as I, ModificationDescription as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
5
|
import { CommonControl as Z } from "../../../common-control.js";
|
|
6
|
-
import { ATTR_PRODUCT_IMAGE as
|
|
6
|
+
import { ATTR_PRODUCT_IMAGE as L, ATTR_PRODUCT_NAME as tt, ATTR_PRODUCT_PRICE as et, ATTR_PRODUCT_OLD_PRICE as rt, ATTR_PRODUCT_OMNIBUS_PRICE as ot, ATTR_PRODUCT_OMNIBUS_DISCOUNT as st, ATTR_PRODUCT_BUTTON as B, ATTR_DATA_CUSTOM_ATTRIBUTES as q, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as it } from "../../constants/selectors.js";
|
|
7
7
|
import { DEFAULT_COMPOSITION as P, DEFAULT_VISIBILITY as F } from "../../constants/defaultConfig.js";
|
|
8
8
|
import { RecommendationConfigService as nt } from "../../services/configService.js";
|
|
9
9
|
import { useRecommendationExtensionStore as lt } from "../../store/recommendation.js";
|
|
@@ -11,32 +11,32 @@ import { ATTRIBUTE_CELL_CLASS as at, gridElementRenderer as ct, DEFAULT_CELL_PAD
|
|
|
11
11
|
import { listElementRenderer as mt } from "../../templates/list/elementRenderer.js";
|
|
12
12
|
import { toDisplayName as ht, isDefaultAttribute as pt, toDisplayableAttributeValue as _t, buildElementRenderer as w } from "../../templates/utils.js";
|
|
13
13
|
import { getTableDisplayValue as ft } from "../../utils/tagName.js";
|
|
14
|
-
import {
|
|
15
|
-
const
|
|
14
|
+
import { isPartnerManagedBlock as gt, getCurrentLayout as bt } from "../main/utils.js";
|
|
15
|
+
const yt = "ui-elements-recommendation-card-composition", S = ".recommendation-attribute-row", N = ".product-card-wrapper > tbody", M = ".product-info-cell > table > tbody", V = "data-card-composition", y = "data-attribute-type", v = "data-visibility", x = {
|
|
16
16
|
ADD_ATTRIBUTE: "addAttribute"
|
|
17
17
|
}, g = 5, E = "reorderIcon_", h = [
|
|
18
|
-
{ key:
|
|
18
|
+
{ key: L, label: "Product Image" },
|
|
19
19
|
{ key: tt, label: "Product Name" },
|
|
20
20
|
{ key: et, label: "Product Price" },
|
|
21
21
|
{ key: rt, label: "Product Original Price" },
|
|
22
22
|
{ key: ot, label: "Omnibus Price" },
|
|
23
23
|
{ key: st, label: "Omnibus Discount" },
|
|
24
|
-
{ key:
|
|
25
|
-
],
|
|
24
|
+
{ key: B, label: "Product Button" }
|
|
25
|
+
], At = new Set(h.map((p) => p.key)), C = "customAttr_", R = "deleteAttr_";
|
|
26
26
|
class Ut extends Z {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
T(this, "store", lt());
|
|
30
|
+
T(this, "unsubscribeStore", null);
|
|
31
|
+
T(this, "eventController", null);
|
|
32
32
|
/**
|
|
33
33
|
* Guard flag: when true, onTemplateNodeUpdated skips _initializeComposition.
|
|
34
34
|
* Used during _onReorder to prevent multiple intermediate rebuilds.
|
|
35
35
|
*/
|
|
36
|
-
|
|
36
|
+
T(this, "reorderInProgress", !1);
|
|
37
37
|
}
|
|
38
38
|
getId() {
|
|
39
|
-
return
|
|
39
|
+
return yt;
|
|
40
40
|
}
|
|
41
41
|
// ========================================================================
|
|
42
42
|
// Lifecycle
|
|
@@ -49,9 +49,9 @@ class Ut extends Z {
|
|
|
49
49
|
`).join(""), r = Array.from(
|
|
50
50
|
{ length: g },
|
|
51
51
|
(l, u) => `
|
|
52
|
-
<div data-custom-select-key="${
|
|
52
|
+
<div data-custom-select-key="${C}${u}" style="display: none;">
|
|
53
53
|
${this._GuSelect({
|
|
54
|
-
name: `${
|
|
54
|
+
name: `${C}${u}`,
|
|
55
55
|
placeholder: this.api.translate("Select Attribute"),
|
|
56
56
|
options: []
|
|
57
57
|
})}
|
|
@@ -128,10 +128,24 @@ class Ut extends Z {
|
|
|
128
128
|
`;
|
|
129
129
|
}
|
|
130
130
|
onRender() {
|
|
131
|
-
this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges();
|
|
131
|
+
this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges(), this._syncDisabledState();
|
|
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 = gt(this.currentNode);
|
|
145
|
+
t.style.pointerEvents = r ? "none" : "", t.style.opacity = r ? "0.5" : "";
|
|
132
146
|
}
|
|
133
147
|
onTemplateNodeUpdated(t) {
|
|
134
|
-
super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState());
|
|
148
|
+
super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState(), this._syncDisabledState());
|
|
135
149
|
}
|
|
136
150
|
onDestroy() {
|
|
137
151
|
super.onDestroy(), this.eventController && (this.eventController.abort(), this.eventController = null), this.unsubscribeStore && (this.unsubscribeStore(), this.unsubscribeStore = null);
|
|
@@ -150,7 +164,7 @@ class Ut extends Z {
|
|
|
150
164
|
});
|
|
151
165
|
});
|
|
152
166
|
for (let t = 0; t < g; t++) {
|
|
153
|
-
const r = `${
|
|
167
|
+
const r = `${C}${t}`, e = t;
|
|
154
168
|
this.api.onValueChanged(r, (o) => {
|
|
155
169
|
this._onCustomAttributeChanged(e, o);
|
|
156
170
|
});
|
|
@@ -180,7 +194,7 @@ class Ut extends Z {
|
|
|
180
194
|
_readVisibilityFromRows() {
|
|
181
195
|
if (!this.currentNode)
|
|
182
196
|
return this._getDefaultVisibilities();
|
|
183
|
-
const t = Array.from(this.currentNode.querySelectorAll(
|
|
197
|
+
const t = Array.from(this.currentNode.querySelectorAll(S)), r = this._extractVisibilityFromRows(t);
|
|
184
198
|
return this._mergeWithDefaults(r);
|
|
185
199
|
}
|
|
186
200
|
_getDefaultVisibilities() {
|
|
@@ -224,7 +238,7 @@ class Ut extends Z {
|
|
|
224
238
|
const s = new Set(r);
|
|
225
239
|
let i = 0, n = 0;
|
|
226
240
|
const a = t.map((c) => {
|
|
227
|
-
if (
|
|
241
|
+
if (At.has(c)) {
|
|
228
242
|
const l = h.find((u) => u.key === c);
|
|
229
243
|
return this._createBuiltInItemHtml(l, n++);
|
|
230
244
|
}
|
|
@@ -315,7 +329,7 @@ class Ut extends Z {
|
|
|
315
329
|
_initializeCustomSelects(t) {
|
|
316
330
|
t.length !== 0 && setTimeout(() => {
|
|
317
331
|
t.forEach((r, e) => {
|
|
318
|
-
const o = `${
|
|
332
|
+
const o = `${C}${e}`, s = this._getSelectOptions(r, t);
|
|
319
333
|
this.api.setUIEAttribute(o, I.SELECTPICKER.items, s), this.api.updateValues({ [o]: r });
|
|
320
334
|
});
|
|
321
335
|
}, 0);
|
|
@@ -339,7 +353,7 @@ class Ut extends Z {
|
|
|
339
353
|
*/
|
|
340
354
|
_moveSelectsIntoItems(t, r) {
|
|
341
355
|
for (let e = 0; e < r; e++) {
|
|
342
|
-
const o = `${
|
|
356
|
+
const o = `${C}${e}`, s = t.querySelector(`[data-custom-select-key="${o}"]`), i = t.querySelector(`[data-custom-select-slot="${e}"]`);
|
|
343
357
|
if (s && i) {
|
|
344
358
|
const n = s.querySelector("ue-select");
|
|
345
359
|
n && i.appendChild(n);
|
|
@@ -367,7 +381,7 @@ class Ut extends Z {
|
|
|
367
381
|
*/
|
|
368
382
|
_rescueSelectsToStore(t) {
|
|
369
383
|
for (let r = 0; r < g; r++) {
|
|
370
|
-
const e = `${
|
|
384
|
+
const e = `${C}${r}`, o = t.querySelector(`[data-custom-select-key="${e}"]`), s = t.querySelector(`[data-custom-select-slot="${r}"]`);
|
|
371
385
|
if (s) {
|
|
372
386
|
const i = s.querySelector("ue-select");
|
|
373
387
|
i && o && o.appendChild(i);
|
|
@@ -525,18 +539,18 @@ class Ut extends Z {
|
|
|
525
539
|
this._getCurrentLayout() === "grid" ? this._injectGridAttributeRow(t, r, e, o) : this._injectListAttributeRow(t, r, e, o);
|
|
526
540
|
}
|
|
527
541
|
_injectGridAttributeRow(t, r, e, o) {
|
|
528
|
-
const s = this.currentNode.querySelectorAll(
|
|
542
|
+
const s = this.currentNode.querySelectorAll(N);
|
|
529
543
|
if (!(s != null && s.length))
|
|
530
544
|
return;
|
|
531
545
|
const i = nt.getConfig(this.currentNode), a = `0 ${Math.floor(i.columnSpacing / 2)}px`, c = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
|
|
532
546
|
let u = 0;
|
|
533
547
|
s.forEach((d) => {
|
|
534
|
-
var
|
|
535
|
-
const b = d.querySelector(
|
|
536
|
-
if (
|
|
548
|
+
var k;
|
|
549
|
+
const b = d.querySelector(S), $ = ((k = b == null ? void 0 : b.querySelectorAll(`.${at}`)) == null ? void 0 : k.length) || 1, U = (100 / $).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), O = l > 0 ? Math.min($, l - u) : $, K = o.map((H) => {
|
|
550
|
+
if (H === e) {
|
|
537
551
|
const z = Array.from(
|
|
538
552
|
{ length: O },
|
|
539
|
-
(
|
|
553
|
+
(St, Y) => {
|
|
540
554
|
const X = this._resolveAttributeContent(
|
|
541
555
|
t,
|
|
542
556
|
r,
|
|
@@ -545,19 +559,19 @@ class Ut extends Z {
|
|
|
545
559
|
return this._getGridCellHtml(
|
|
546
560
|
t,
|
|
547
561
|
X,
|
|
548
|
-
|
|
562
|
+
U,
|
|
549
563
|
j,
|
|
550
564
|
W,
|
|
551
565
|
a
|
|
552
566
|
);
|
|
553
567
|
}
|
|
554
|
-
).join(""), G = dt(
|
|
568
|
+
).join(""), G = dt(U, a).repeat($ - O);
|
|
555
569
|
return `<tr class="recommendation-attribute-row" ${y}="${e}" ${v}="1">${z}${G}</tr>`;
|
|
556
570
|
}
|
|
557
|
-
const
|
|
558
|
-
`${
|
|
571
|
+
const D = d.querySelector(
|
|
572
|
+
`${S}[${y}="${H}"]`
|
|
559
573
|
);
|
|
560
|
-
return
|
|
574
|
+
return D && "getOuterHTML" in D ? D.getOuterHTML() : "";
|
|
561
575
|
}).join("");
|
|
562
576
|
u += O, l > 0 && u >= l && (u = 0), c.modifyHtml(d).setInnerHtml(K);
|
|
563
577
|
}), c.apply(new A(`${this.api.translate("Add custom attribute")}: ${r}`));
|
|
@@ -566,7 +580,7 @@ class Ut extends Z {
|
|
|
566
580
|
const s = this.currentNode.querySelectorAll(M);
|
|
567
581
|
if (!(s != null && s.length))
|
|
568
582
|
return;
|
|
569
|
-
const i = o.filter((a) => a !==
|
|
583
|
+
const i = o.filter((a) => a !== L && a !== B), n = this.api.getDocumentModifier();
|
|
570
584
|
s.forEach((a, c) => {
|
|
571
585
|
const l = i.map((u) => {
|
|
572
586
|
if (u === e) {
|
|
@@ -574,7 +588,7 @@ class Ut extends Z {
|
|
|
574
588
|
return this._getListRowHtml(t, b, e);
|
|
575
589
|
}
|
|
576
590
|
const d = a.querySelector(
|
|
577
|
-
`${
|
|
591
|
+
`${S}[${y}="${u}"]`
|
|
578
592
|
);
|
|
579
593
|
return d && "getOuterHTML" in d ? d.getOuterHTML() : "";
|
|
580
594
|
}).join("");
|
|
@@ -590,13 +604,13 @@ class Ut extends Z {
|
|
|
590
604
|
return;
|
|
591
605
|
const r = this._getCurrentLayout(), e = this.api.getDocumentModifier();
|
|
592
606
|
if (r === "grid") {
|
|
593
|
-
const o = this.currentNode.querySelectorAll(
|
|
607
|
+
const o = this.currentNode.querySelectorAll(N);
|
|
594
608
|
o == null || o.forEach((s) => {
|
|
595
609
|
const i = this._buildCompositionHtml(s, t);
|
|
596
610
|
e.modifyHtml(s).setInnerHtml(i);
|
|
597
611
|
});
|
|
598
612
|
} else {
|
|
599
|
-
const o = t.filter((i) => i !==
|
|
613
|
+
const o = t.filter((i) => i !== L && i !== B), s = this.currentNode.querySelectorAll(M);
|
|
600
614
|
s == null || s.forEach((i) => {
|
|
601
615
|
const n = this._buildCompositionHtml(i, o);
|
|
602
616
|
e.modifyHtml(i).setInnerHtml(n);
|
|
@@ -624,7 +638,7 @@ class Ut extends Z {
|
|
|
624
638
|
_reorderProductAttributes(t) {
|
|
625
639
|
if (!this.currentNode)
|
|
626
640
|
return;
|
|
627
|
-
const r = this.currentNode.querySelectorAll(
|
|
641
|
+
const r = this.currentNode.querySelectorAll(N);
|
|
628
642
|
if (!(r != null && r.length))
|
|
629
643
|
return;
|
|
630
644
|
const e = this.api.getDocumentModifier();
|
|
@@ -639,7 +653,7 @@ class Ut extends Z {
|
|
|
639
653
|
*/
|
|
640
654
|
_buildCompositionHtml(t, r) {
|
|
641
655
|
return r.reduce((e, o) => {
|
|
642
|
-
const s = t.querySelector(`${
|
|
656
|
+
const s = t.querySelector(`${S}[${y}="${o}"]`);
|
|
643
657
|
return s && "getOuterHTML" in s ? e + s.getOuterHTML() : e;
|
|
644
658
|
}, "");
|
|
645
659
|
}
|
|
@@ -649,7 +663,7 @@ class Ut extends Z {
|
|
|
649
663
|
_applyVisibilityToBlock(t, r) {
|
|
650
664
|
if (!this.currentNode)
|
|
651
665
|
return;
|
|
652
|
-
const e = this.currentNode.querySelectorAll(`${
|
|
666
|
+
const e = this.currentNode.querySelectorAll(`${S}[${y}="${t}"]`);
|
|
653
667
|
if (!(e != null && e.length))
|
|
654
668
|
return;
|
|
655
669
|
const o = r ? "1" : "0", s = r ? this.api.translate("visible") : this.api.translate("hidden"), i = `${this.api.translate("Set visibility")}: ${t} → ${s}`, n = this.api.getDocumentModifier();
|
|
@@ -677,7 +691,7 @@ class Ut extends Z {
|
|
|
677
691
|
return -1;
|
|
678
692
|
}
|
|
679
693
|
_getCurrentLayout() {
|
|
680
|
-
return this.store.recommendationConfigs.orientation ||
|
|
694
|
+
return this.store.recommendationConfigs.orientation || bt(this.currentNode);
|
|
681
695
|
}
|
|
682
696
|
/**
|
|
683
697
|
* Extracts background color properties from existing card elements.
|
|
@@ -793,6 +807,6 @@ class Ut extends Z {
|
|
|
793
807
|
}
|
|
794
808
|
}
|
|
795
809
|
export {
|
|
796
|
-
|
|
810
|
+
yt as COMPOSITION_CONTROL_BLOCK_ID,
|
|
797
811
|
Ut as RecommendationCardCompositionControl
|
|
798
812
|
};
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
var C = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var s = (d, c, t) =>
|
|
4
|
-
import { CommonControl as
|
|
2
|
+
var g = (d, c, t) => c in d ? C(d, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[c] = t;
|
|
3
|
+
var s = (d, c, t) => g(d, typeof c != "symbol" ? c + "" : c, t);
|
|
4
|
+
import { CommonControl as p } from "../../../common-control.js";
|
|
5
5
|
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 R } from "./algorithm.js";
|
|
9
|
-
import { ALGORITHM_CONTROL_ID as
|
|
10
|
-
import { CurrencyControl as
|
|
11
|
-
import { CURRENCY_CONTROL_ID as
|
|
12
|
-
import { FiltersControl as
|
|
13
|
-
import { FILTERS_CONTROL_ID as
|
|
9
|
+
import { ALGORITHM_CONTROL_ID as X } from "./algorithm.js";
|
|
10
|
+
import { CurrencyControl as N } from "./currency.js";
|
|
11
|
+
import { CURRENCY_CONTROL_ID as tt } from "./currency.js";
|
|
12
|
+
import { FiltersControl as b } from "./filters.js";
|
|
13
|
+
import { FILTERS_CONTROL_ID as ot } from "./filters.js";
|
|
14
14
|
import { LayoutOrientationControl as I } from "./layoutOrientation.js";
|
|
15
|
-
import { LAYOUT_ORIENTATION_CONTROL_ID as
|
|
15
|
+
import { LAYOUT_ORIENTATION_CONTROL_ID as nt } from "./layoutOrientation.js";
|
|
16
16
|
import { LocaleControl as _ } from "./locale.js";
|
|
17
|
-
import { LOCALE_CONTROL_ID as
|
|
17
|
+
import { LOCALE_CONTROL_ID as st } from "./locale.js";
|
|
18
18
|
import { ProductCountControl as O } from "./productCount.js";
|
|
19
|
-
import { PRODUCT_COUNT_CONTROL_ID as
|
|
19
|
+
import { PRODUCT_COUNT_CONTROL_ID as ct } 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 ut } 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 ht } from "./shuffle.js";
|
|
24
|
+
import { setCurrencyAttributes as L, getBlockElement as P, isPartnerManagedBlock as k, updateProductContentInPlace as D, regenerateProductRowsWithStyles as E } from "./utils.js";
|
|
25
|
+
import { adjustProductsToSize as ft, formatProductPrice as Ct, getCardComposition as gt, getCurrentLayout as pt, regenerateMobileProductRows as yt, updatePricesInPlace as Rt, updateSingleProductContent as Nt } from "./utils.js";
|
|
26
26
|
import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
|
|
27
|
-
const
|
|
28
|
-
class
|
|
27
|
+
const w = "recommendation-id", B = "ui-elements-recommendation-block";
|
|
28
|
+
class q extends p {
|
|
29
29
|
constructor() {
|
|
30
30
|
super(...arguments);
|
|
31
31
|
s(this, "store", y());
|
|
@@ -60,14 +60,14 @@ class K extends g {
|
|
|
60
60
|
*/
|
|
61
61
|
s(this, "_debouncedRegenerateWithProducts", m(() => {
|
|
62
62
|
const t = this.store.recommendationProducts;
|
|
63
|
-
if (!this.currentNode || !this.api)
|
|
63
|
+
if (!this.currentNode || !this.api || k(this.currentNode))
|
|
64
64
|
return;
|
|
65
65
|
const e = this.api.getDocumentModifier();
|
|
66
|
-
|
|
66
|
+
D({
|
|
67
67
|
currentNode: this.currentNode,
|
|
68
68
|
documentModifier: e,
|
|
69
69
|
products: t
|
|
70
|
-
}) ||
|
|
70
|
+
}) || E({
|
|
71
71
|
currentNode: this.currentNode,
|
|
72
72
|
documentModifier: e,
|
|
73
73
|
products: t
|
|
@@ -75,10 +75,10 @@ class K extends g {
|
|
|
75
75
|
}, 100));
|
|
76
76
|
}
|
|
77
77
|
getId() {
|
|
78
|
-
return
|
|
78
|
+
return B;
|
|
79
79
|
}
|
|
80
80
|
getTemplate() {
|
|
81
|
-
return this.algorithmControl = new R(), this.localeControl = new _(), this.currencyControl = new
|
|
81
|
+
return this.algorithmControl = new R(), this.localeControl = new _(), this.currencyControl = new N(), this.productCountControl = new O(), this.productLayoutControl = new T(), this.filtersControl = new b(), this.shuffleControl = new S(), this.layoutOrientationControl = new I(), [
|
|
82
82
|
this.algorithmControl,
|
|
83
83
|
this.localeControl,
|
|
84
84
|
this.currencyControl,
|
|
@@ -295,7 +295,7 @@ class K extends g {
|
|
|
295
295
|
const e = P(t);
|
|
296
296
|
if (!e || !("getAttribute" in e))
|
|
297
297
|
return null;
|
|
298
|
-
const o = e.getAttribute(
|
|
298
|
+
const o = e.getAttribute(w);
|
|
299
299
|
if (!o)
|
|
300
300
|
return null;
|
|
301
301
|
const r = parseInt(o);
|
|
@@ -346,35 +346,34 @@ class K extends g {
|
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
348
|
export {
|
|
349
|
-
|
|
349
|
+
X as ALGORITHM_CONTROL_ID,
|
|
350
350
|
R as AlgorithmControl,
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
351
|
+
B as CONTROL_BLOCK_ID,
|
|
352
|
+
tt as CURRENCY_CONTROL_ID,
|
|
353
|
+
N as CurrencyControl,
|
|
354
|
+
ot as FILTERS_CONTROL_ID,
|
|
355
|
+
b as FiltersControl,
|
|
356
|
+
nt as LAYOUT_ORIENTATION_CONTROL_ID,
|
|
357
|
+
st as LOCALE_CONTROL_ID,
|
|
358
358
|
I as LayoutOrientationControl,
|
|
359
359
|
_ as LocaleControl,
|
|
360
|
-
|
|
361
|
-
|
|
360
|
+
ct as PRODUCT_COUNT_CONTROL_ID,
|
|
361
|
+
ut as PRODUCT_LAYOUT_CONTROL_ID,
|
|
362
362
|
O as ProductCountControl,
|
|
363
363
|
T as ProductLayoutControl,
|
|
364
|
-
|
|
365
|
-
|
|
364
|
+
q as RecommendationBlockControl,
|
|
365
|
+
ht as SHUFFLE_CONTROL_ID,
|
|
366
366
|
S as ShuffleControl,
|
|
367
|
-
|
|
368
|
-
|
|
367
|
+
ft as adjustProductsToSize,
|
|
368
|
+
Ct as formatProductPrice,
|
|
369
369
|
P as getBlockElement,
|
|
370
|
-
|
|
370
|
+
gt as getCardComposition,
|
|
371
371
|
pt as getCurrentLayout,
|
|
372
|
-
|
|
372
|
+
k as isPartnerManagedBlock,
|
|
373
373
|
yt as regenerateMobileProductRows,
|
|
374
|
-
|
|
375
|
-
D as regenerateProductRowsWithStyles,
|
|
374
|
+
E as regenerateProductRowsWithStyles,
|
|
376
375
|
L as setCurrencyAttributes,
|
|
377
|
-
|
|
378
|
-
|
|
376
|
+
Rt as updatePricesInPlace,
|
|
377
|
+
D as updateProductContentInPlace,
|
|
379
378
|
Nt as updateSingleProductContent
|
|
380
379
|
};
|
|
@@ -1,64 +1,65 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
6
|
-
import
|
|
7
|
-
import { LAYOUT_OPTIONS as
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
const U = "recommendation-layout-orientation-control", O = "recommendationInfoBannerTest", a = {
|
|
1
|
+
var h = Object.defineProperty;
|
|
2
|
+
var p = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
|
|
3
|
+
var a = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { UEAttr as L, ModificationDescription as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as A } from "../../../common-control.js";
|
|
6
|
+
import "../../constants/selectors.js";
|
|
7
|
+
import { LAYOUT_OPTIONS as O, DEFAULT_MOBILE_ROW_SPACING as d, DEFAULT_MOBILE_COLUMN_SPACING as m, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
|
|
8
|
+
import { RecommendationConfigService as u } from "../../services/configService.js";
|
|
9
|
+
import { useRecommendationExtensionStore as S } from "../../store/recommendation.js";
|
|
10
|
+
import { isPartnerManagedBlock as f, getCurrentLayout as C, getBlockElement as T, getCardComposition as U, regenerateProductRowsWithStyles as I } from "./utils.js";
|
|
11
|
+
const y = "recommendation-layout-orientation-control", s = {
|
|
13
12
|
LAYOUT: "layout"
|
|
14
|
-
},
|
|
13
|
+
}, n = {
|
|
15
14
|
LAYOUT: "data-layout",
|
|
16
15
|
COLUMN_SPACING: "data-column-spacing",
|
|
17
16
|
ROW_SPACING: "data-row-spacing",
|
|
18
17
|
MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
|
|
19
18
|
MOBILE_ROW_SPACING: "data-mobile-row-spacing"
|
|
20
19
|
};
|
|
21
|
-
class
|
|
20
|
+
class F extends A {
|
|
22
21
|
constructor() {
|
|
23
22
|
super(...arguments);
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
a(this, "store", S());
|
|
24
|
+
a(this, "isChangingLayout", !1);
|
|
26
25
|
}
|
|
27
26
|
getId() {
|
|
28
|
-
return
|
|
27
|
+
return y;
|
|
29
28
|
}
|
|
30
29
|
getTemplate() {
|
|
31
30
|
return `
|
|
32
31
|
<div class="layout-control-container">
|
|
33
|
-
${this._GuOnPageMessage({ name: O })}
|
|
34
|
-
|
|
35
32
|
${this._GuTwoColumns([
|
|
36
33
|
this._GuLabel({ text: this.api.translate("Layout Orientation") }),
|
|
37
34
|
this._GuRadioButton({
|
|
38
|
-
name:
|
|
39
|
-
buttons:
|
|
35
|
+
name: s.LAYOUT,
|
|
36
|
+
buttons: O
|
|
40
37
|
})
|
|
41
38
|
])}
|
|
42
39
|
</div>
|
|
43
40
|
`;
|
|
44
41
|
}
|
|
45
42
|
onRender() {
|
|
46
|
-
this.
|
|
47
|
-
O,
|
|
48
|
-
this.api.translate(
|
|
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.`
|
|
52
|
-
)
|
|
53
|
-
), this._setFormValues(), this._listenToFormUpdates();
|
|
43
|
+
this._setFormValues(), this._syncDisabledState(), this._listenToFormUpdates();
|
|
54
44
|
}
|
|
55
45
|
onTemplateNodeUpdated(t) {
|
|
56
|
-
super.onTemplateNodeUpdated(t), this._setFormValues();
|
|
46
|
+
super.onTemplateNodeUpdated(t), this._setFormValues(), this._syncDisabledState();
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Layout orientation restructures the whole block, which is meaningless for
|
|
50
|
+
* partner-managed (`ins-skip-compile`) blocks — disable the control there.
|
|
51
|
+
*/
|
|
52
|
+
_syncDisabledState() {
|
|
53
|
+
this.api.setUIEAttribute(
|
|
54
|
+
s.LAYOUT,
|
|
55
|
+
L.RADIO_BUTTONS.disabled,
|
|
56
|
+
f(this.currentNode)
|
|
57
|
+
);
|
|
57
58
|
}
|
|
58
59
|
_setFormValues() {
|
|
59
|
-
const
|
|
60
|
+
const r = u.getConfig(this.currentNode).layout || C(this.currentNode);
|
|
60
61
|
this.api.updateValues({
|
|
61
|
-
[
|
|
62
|
+
[s.LAYOUT]: r
|
|
62
63
|
});
|
|
63
64
|
}
|
|
64
65
|
/**
|
|
@@ -66,26 +67,27 @@ class Y extends N {
|
|
|
66
67
|
* Updates node config, data attribute and regenerates product rows
|
|
67
68
|
*/
|
|
68
69
|
_onLayoutChange(t) {
|
|
69
|
-
if (this.isChangingLayout || !this.currentNode || (
|
|
70
|
+
if (this.isChangingLayout || !this.currentNode || (u.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
|
|
70
71
|
return;
|
|
71
|
-
const c =
|
|
72
|
+
const c = T(this.currentNode);
|
|
72
73
|
if (c) {
|
|
73
74
|
this.isChangingLayout = !0;
|
|
74
75
|
try {
|
|
75
|
-
|
|
76
|
+
const _ = U(this.currentNode);
|
|
77
|
+
u.updateConfig(
|
|
76
78
|
this.api,
|
|
77
79
|
this.currentNode,
|
|
78
80
|
{
|
|
79
81
|
layout: t,
|
|
80
82
|
columnSpacing: g,
|
|
81
83
|
rowSpacing: l,
|
|
82
|
-
mobileColumnSpacing:
|
|
83
|
-
mobileRowSpacing:
|
|
84
|
+
mobileColumnSpacing: m,
|
|
85
|
+
mobileRowSpacing: d
|
|
84
86
|
},
|
|
85
87
|
`Changed layout to ${t}`
|
|
86
88
|
), this.store.patchCurrentBlockConfig({ orientation: t });
|
|
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,
|
|
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.
|
|
89
|
+
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, m.toString()).setAttribute(n.MOBILE_ROW_SPACING, d.toString());
|
|
90
|
+
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.apply(new N(`Update layout to ${t}`)), this._regenerateProductRows(t, _);
|
|
89
91
|
} finally {
|
|
90
92
|
this.isChangingLayout = !1;
|
|
91
93
|
}
|
|
@@ -95,22 +97,23 @@ class Y extends N {
|
|
|
95
97
|
* Regenerates product rows based on the selected layout
|
|
96
98
|
* Uses unified style-preserving regeneration to maintain user customizations
|
|
97
99
|
* @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
|
|
100
|
+
* @param composition - The preserved card composition, incl. customAttr:* entries
|
|
98
101
|
*/
|
|
99
|
-
_regenerateProductRows(t) {
|
|
100
|
-
this.currentNode &&
|
|
102
|
+
_regenerateProductRows(t, r) {
|
|
103
|
+
this.currentNode && I({
|
|
101
104
|
currentNode: this.currentNode,
|
|
102
105
|
documentModifier: this.api.getDocumentModifier(),
|
|
103
106
|
layout: t,
|
|
104
|
-
composition:
|
|
107
|
+
composition: r
|
|
105
108
|
});
|
|
106
109
|
}
|
|
107
110
|
_listenToFormUpdates() {
|
|
108
|
-
this.api.onValueChanged(
|
|
111
|
+
this.api.onValueChanged(s.LAYOUT, (t) => {
|
|
109
112
|
this._onLayoutChange(t);
|
|
110
113
|
});
|
|
111
114
|
}
|
|
112
115
|
}
|
|
113
116
|
export {
|
|
114
|
-
|
|
115
|
-
|
|
117
|
+
y as LAYOUT_ORIENTATION_CONTROL_ID,
|
|
118
|
+
F as LayoutOrientationControl
|
|
116
119
|
};
|
|
@@ -2,13 +2,14 @@ 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";
|
|
5
6
|
import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
|
|
6
7
|
import { RecommendationConfigService as n } from "../../services/configService.js";
|
|
7
8
|
import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
|
|
8
9
|
const C = "recommendation-product-count-control", r = {
|
|
9
10
|
PRODUCT_COUNT: "size"
|
|
10
11
|
};
|
|
11
|
-
class
|
|
12
|
+
class U extends a {
|
|
12
13
|
constructor() {
|
|
13
14
|
super(...arguments);
|
|
14
15
|
i(this, "store", d());
|
|
@@ -54,5 +55,5 @@ class g extends a {
|
|
|
54
55
|
}
|
|
55
56
|
export {
|
|
56
57
|
C as PRODUCT_COUNT_CONTROL_ID,
|
|
57
|
-
|
|
58
|
+
U as ProductCountControl
|
|
58
59
|
};
|