@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,16 +1,15 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var u = (a, n, t) =>
|
|
4
|
-
import {
|
|
5
|
-
import { CommonControl as
|
|
6
|
-
import "../../constants/
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import { isPartnerManagedBlock as U, getCurrentLayout as w, getBlockElement as A, regenerateProductRowsWithStyles as I, regenerateMobileProductRows as E, adjustProductsToSize as S } from "./utils.js";
|
|
1
|
+
var I = Object.defineProperty;
|
|
2
|
+
var E = (a, n, t) => n in a ? I(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
|
|
3
|
+
var u = (a, n, t) => E(a, typeof n != "symbol" ? n + "" : n, t);
|
|
4
|
+
import { EditorStatePropertyType as O, PreviewDeviceMode as f, UEAttr as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as T } from "../../../common-control.js";
|
|
6
|
+
import { MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as M, DEFAULT_MOBILE_CARDS_IN_ROW as L, DEFAULT_COLUMN_SPACING as P, DEFAULT_MOBILE_COLUMN_SPACING as y } from "../../constants/layout.js";
|
|
7
|
+
import { RecommendationConfigService as i } from "../../services/configService.js";
|
|
8
|
+
import { useRecommendationExtensionStore as D } from "../../store/recommendation.js";
|
|
9
|
+
import { setMobileLayoutOptOut as m, ensureMobileCssRulesExist as C } from "../mobileLayout/cssRules.js";
|
|
10
|
+
import { getCurrentLayout as w, getBlockElement as U, regenerateProductRowsWithStyles as b, regenerateMobileProductRows as g, adjustProductsToSize as A } from "./utils.js";
|
|
12
11
|
import { useDebounceFn as B } from "../../../../../node_modules/@vueuse/shared/index.js";
|
|
13
|
-
const
|
|
12
|
+
const S = "recommendation-product-layout-control", e = {
|
|
14
13
|
// "Products in One Row" — shown when toggle is OFF
|
|
15
14
|
PRODUCT_IN_ROW: "cardsInRow",
|
|
16
15
|
PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
|
|
@@ -24,11 +23,11 @@ const W = "recommendation-product-layout-control", e = {
|
|
|
24
23
|
MOBILE_LAYOUT_TOGGLE: "mobileLayoutEnabled",
|
|
25
24
|
MOBILE_LAYOUT_LABEL: "mobileLayoutLabel"
|
|
26
25
|
};
|
|
27
|
-
class
|
|
26
|
+
class v extends T {
|
|
28
27
|
constructor() {
|
|
29
28
|
super(...arguments);
|
|
30
29
|
// Store is used for backward compatibility with product fetching and regeneration
|
|
31
|
-
u(this, "store",
|
|
30
|
+
u(this, "store", D());
|
|
32
31
|
u(this, "storeUnsubscription", () => {
|
|
33
32
|
});
|
|
34
33
|
u(this, "_debouncedRegenerateProductRows", B(() => {
|
|
@@ -36,7 +35,7 @@ class X extends f {
|
|
|
36
35
|
}, 500));
|
|
37
36
|
}
|
|
38
37
|
getId() {
|
|
39
|
-
return
|
|
38
|
+
return S;
|
|
40
39
|
}
|
|
41
40
|
getTemplate() {
|
|
42
41
|
return `
|
|
@@ -46,12 +45,12 @@ class X extends f {
|
|
|
46
45
|
text: this.api.translate("Products in One Row"),
|
|
47
46
|
name: e.PRODUCT_IN_ROW_LABEL
|
|
48
47
|
}),
|
|
49
|
-
this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue:
|
|
48
|
+
this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
|
|
50
49
|
this._GuLabel({
|
|
51
50
|
text: this.api.translate("Products in One Row on Desktop"),
|
|
52
51
|
name: e.PRODUCT_IN_ROW_DESKTOP_LABEL
|
|
53
52
|
}),
|
|
54
|
-
this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue:
|
|
53
|
+
this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: p }),
|
|
55
54
|
this._GuLabel({
|
|
56
55
|
text: this.api.translate("Products in One Row on Mobile"),
|
|
57
56
|
name: e.MOBILE_CARDS_IN_ROW_LABEL
|
|
@@ -75,25 +74,16 @@ class X extends f {
|
|
|
75
74
|
`;
|
|
76
75
|
}
|
|
77
76
|
onRender() {
|
|
78
|
-
this._initializeMobileLayoutToggle(), this._setFormValues(), this._updateProductsInRowVisibility(), this.
|
|
77
|
+
this._initializeMobileLayoutToggle(), this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._listenEditorModeChanges();
|
|
79
78
|
}
|
|
80
79
|
onTemplateNodeUpdated(t) {
|
|
81
|
-
super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility()
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Products-per-row and mobile-layout restructure the block, which is
|
|
85
|
-
* meaningless for partner-managed (`ins-skip-compile`) blocks — disable
|
|
86
|
-
* these inputs there. Disabling coexists with the visibility logic above.
|
|
87
|
-
*/
|
|
88
|
-
_syncDisabledState() {
|
|
89
|
-
const t = U(this.currentNode);
|
|
90
|
-
this.api.setUIEAttribute(e.PRODUCT_IN_ROW, d.COUNTER.disabled, t), this.api.setUIEAttribute(e.PRODUCT_IN_ROW_DESKTOP, d.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_CARDS_IN_ROW, d.COUNTER.disabled, t), this.api.setUIEAttribute(e.MOBILE_LAYOUT_TOGGLE, d.SWITCHER.disabled, t);
|
|
80
|
+
super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
|
|
91
81
|
}
|
|
92
82
|
onDestroy() {
|
|
93
83
|
this.storeUnsubscription();
|
|
94
84
|
}
|
|
95
85
|
_setFormValues() {
|
|
96
|
-
const t =
|
|
86
|
+
const t = i.getConfig(this.currentNode);
|
|
97
87
|
this.api.updateValues({
|
|
98
88
|
[e.PRODUCT_IN_ROW]: t.cardsInRow,
|
|
99
89
|
[e.PRODUCT_IN_ROW_DESKTOP]: t.cardsInRow,
|
|
@@ -105,7 +95,7 @@ class X extends f {
|
|
|
105
95
|
* Returns true when the editor preview is in mobile mode.
|
|
106
96
|
*/
|
|
107
97
|
_isMobilePreview() {
|
|
108
|
-
return this.api.getEditorState()[
|
|
98
|
+
return this.api.getEditorState()[O.previewDeviceMode] === f.MOBILE;
|
|
109
99
|
}
|
|
110
100
|
/**
|
|
111
101
|
* Updates counter visibility based on layout, mobileLayoutEnabled, and editor preview mode.
|
|
@@ -120,22 +110,22 @@ class X extends f {
|
|
|
120
110
|
*/
|
|
121
111
|
_updateProductsInRowVisibility() {
|
|
122
112
|
var R;
|
|
123
|
-
const t =
|
|
124
|
-
this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE,
|
|
125
|
-
const c =
|
|
126
|
-
this.api.setVisibility(e.PRODUCT_IN_ROW, c), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, c), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP,
|
|
127
|
-
const
|
|
128
|
-
|
|
113
|
+
const t = i.getConfig(this.currentNode), o = (t.layout || w(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, d = this._isMobilePreview();
|
|
114
|
+
this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE, o), this.api.setVisibility(e.MOBILE_LAYOUT_LABEL, o);
|
|
115
|
+
const c = o && !r, _ = o && r && !d, l = o && r && d;
|
|
116
|
+
this.api.setVisibility(e.PRODUCT_IN_ROW, c), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, c), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP, _), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, _), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, l), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, l);
|
|
117
|
+
const h = (R = this.getContainer()) == null ? void 0 : R.querySelector("[data-product-layout-control]");
|
|
118
|
+
h && (h.style.display = o ? "" : "none");
|
|
129
119
|
}
|
|
130
120
|
/**
|
|
131
121
|
* Initializes the mobile layout toggle using the same pattern as shuffle.ts.
|
|
132
122
|
* Sets the initial UI attribute value from the node config.
|
|
133
123
|
*/
|
|
134
124
|
_initializeMobileLayoutToggle() {
|
|
135
|
-
const t =
|
|
125
|
+
const t = i.getConfig(this.currentNode);
|
|
136
126
|
this.api.setUIEAttribute(
|
|
137
127
|
e.MOBILE_LAYOUT_TOGGLE,
|
|
138
|
-
|
|
128
|
+
N.SELECTPICKER.items,
|
|
139
129
|
t.mobileLayoutEnabled
|
|
140
130
|
);
|
|
141
131
|
}
|
|
@@ -147,13 +137,13 @@ class X extends f {
|
|
|
147
137
|
_onMobileLayoutToggleChange(t) {
|
|
148
138
|
if (!this.currentNode)
|
|
149
139
|
return;
|
|
150
|
-
const s =
|
|
140
|
+
const s = i.getConfig(this.currentNode);
|
|
151
141
|
if (s.mobileLayoutEnabled === t)
|
|
152
142
|
return;
|
|
153
|
-
const
|
|
143
|
+
const o = U(this.currentNode);
|
|
154
144
|
if (t) {
|
|
155
|
-
const r = s.previousMobileCardsInRow ||
|
|
156
|
-
|
|
145
|
+
const r = s.previousMobileCardsInRow || L;
|
|
146
|
+
i.updateConfig(
|
|
157
147
|
this.api,
|
|
158
148
|
this.currentNode,
|
|
159
149
|
{
|
|
@@ -164,25 +154,25 @@ class X extends f {
|
|
|
164
154
|
), this.store.patchCurrentBlockConfig(
|
|
165
155
|
{ mobileLayoutEnabled: !0 },
|
|
166
156
|
{ triggerRefetch: !1 }
|
|
167
|
-
),
|
|
157
|
+
), o && m(this.api, o, !1), C(this.api), b({
|
|
168
158
|
currentNode: this.currentNode,
|
|
169
159
|
documentModifier: this.api.getDocumentModifier()
|
|
170
160
|
});
|
|
171
161
|
} else {
|
|
172
162
|
const r = s.mobileCardsInRow;
|
|
173
|
-
|
|
163
|
+
i.updateConfig(
|
|
174
164
|
this.api,
|
|
175
165
|
this.currentNode,
|
|
176
166
|
{
|
|
177
167
|
mobileLayoutEnabled: !1,
|
|
178
168
|
previousMobileCardsInRow: r,
|
|
179
|
-
mobileCardsInRow:
|
|
169
|
+
mobileCardsInRow: L
|
|
180
170
|
},
|
|
181
171
|
"Disabled mobile layout optimization"
|
|
182
172
|
), this.store.patchCurrentBlockConfig(
|
|
183
173
|
{ mobileLayoutEnabled: !1 },
|
|
184
174
|
{ triggerRefetch: !1 }
|
|
185
|
-
),
|
|
175
|
+
), o && m(this.api, o, !0), g({
|
|
186
176
|
currentNode: this.currentNode,
|
|
187
177
|
documentModifier: this.api.getDocumentModifier()
|
|
188
178
|
});
|
|
@@ -190,36 +180,36 @@ class X extends f {
|
|
|
190
180
|
this._setFormValues(), this._updateProductsInRowVisibility();
|
|
191
181
|
}
|
|
192
182
|
_onProductsInRowChange(t) {
|
|
193
|
-
if (!this.currentNode ||
|
|
183
|
+
if (!this.currentNode || i.getConfig(this.currentNode).cardsInRow === t)
|
|
194
184
|
return;
|
|
195
|
-
const
|
|
196
|
-
|
|
185
|
+
const o = t === 1 ? 0 : P;
|
|
186
|
+
i.updateConfig(
|
|
197
187
|
this.api,
|
|
198
188
|
this.currentNode,
|
|
199
|
-
{ cardsInRow: t, columnSpacing:
|
|
189
|
+
{ cardsInRow: t, columnSpacing: o },
|
|
200
190
|
`Changed products per row to ${t}`
|
|
201
191
|
), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._debouncedRegenerateProductRows();
|
|
202
192
|
}
|
|
203
193
|
_onMobileCardsInRowChange(t) {
|
|
204
|
-
if (!this.currentNode ||
|
|
194
|
+
if (!this.currentNode || i.getConfig(this.currentNode).mobileCardsInRow === t)
|
|
205
195
|
return;
|
|
206
|
-
const
|
|
207
|
-
|
|
196
|
+
const o = t === 1 ? 0 : y;
|
|
197
|
+
i.updateConfig(
|
|
208
198
|
this.api,
|
|
209
199
|
this.currentNode,
|
|
210
|
-
{ mobileCardsInRow: t, mobileColumnSpacing:
|
|
200
|
+
{ mobileCardsInRow: t, mobileColumnSpacing: o },
|
|
211
201
|
`Changed mobile products per row to ${t}`
|
|
212
|
-
),
|
|
202
|
+
), C(this.api), g({
|
|
213
203
|
currentNode: this.currentNode,
|
|
214
204
|
documentModifier: this.api.getDocumentModifier()
|
|
215
205
|
});
|
|
216
206
|
}
|
|
217
207
|
_regenerateProductRows() {
|
|
218
|
-
const t =
|
|
219
|
-
|
|
208
|
+
const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = A(this.store.recommendationProducts, s);
|
|
209
|
+
b({
|
|
220
210
|
currentNode: this.currentNode,
|
|
221
211
|
documentModifier: this.api.getDocumentModifier(),
|
|
222
|
-
products:
|
|
212
|
+
products: o
|
|
223
213
|
});
|
|
224
214
|
}
|
|
225
215
|
_listenToFormUpdates() {
|
|
@@ -251,14 +241,14 @@ class X extends f {
|
|
|
251
241
|
*/
|
|
252
242
|
_listenEditorModeChanges() {
|
|
253
243
|
this.api.onEditorStatePropUpdated(
|
|
254
|
-
|
|
244
|
+
O.previewDeviceMode,
|
|
255
245
|
() => {
|
|
256
|
-
|
|
246
|
+
i.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
|
|
257
247
|
}
|
|
258
248
|
);
|
|
259
249
|
}
|
|
260
250
|
}
|
|
261
251
|
export {
|
|
262
|
-
|
|
263
|
-
|
|
252
|
+
S as PRODUCT_LAYOUT_CONTROL_ID,
|
|
253
|
+
v as ProductLayoutControl
|
|
264
254
|
};
|
|
@@ -1,40 +1,36 @@
|
|
|
1
1
|
import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
2
|
import { RecommendationBlockId as m } from "../../constants/blockIds.js";
|
|
3
|
-
import { CURRENCY_ATTR as y,
|
|
3
|
+
import { CURRENCY_ATTR as y, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as W } from "../../constants/selectors.js";
|
|
4
4
|
import { RecommendationConfigService as E } from "../../services/configService.js";
|
|
5
5
|
import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
|
|
6
|
-
import { prepareProductRows as
|
|
7
|
-
import { formatPrice as
|
|
8
|
-
import { isTdNode as
|
|
9
|
-
import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as
|
|
10
|
-
const
|
|
11
|
-
function
|
|
6
|
+
import { prepareProductRows as _ } from "../../templates/index.js";
|
|
7
|
+
import { formatPrice as j } from "../../utils/priceFormatter.js";
|
|
8
|
+
import { isTdNode as F } from "../../utils/tagName.js";
|
|
9
|
+
import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as V } from "../../templates/utils.js";
|
|
10
|
+
const M = "recommendation-block-v2";
|
|
11
|
+
function h(t) {
|
|
12
12
|
if (!t)
|
|
13
13
|
return null;
|
|
14
14
|
if ("getAttribute" in t) {
|
|
15
15
|
const e = t.getAttribute("class");
|
|
16
|
-
if (e && e.includes(
|
|
16
|
+
if (e && e.includes(M))
|
|
17
17
|
return t;
|
|
18
18
|
}
|
|
19
|
-
return "querySelector" in t ? t.querySelector(`.${
|
|
20
|
-
}
|
|
21
|
-
function K(t) {
|
|
22
|
-
const e = A(t);
|
|
23
|
-
return !e || !("getAttribute" in e) ? !1 : (e.getAttribute("class") ?? "").split(/\s+/).includes(v);
|
|
19
|
+
return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
|
|
24
20
|
}
|
|
25
21
|
function b(t) {
|
|
26
|
-
const e =
|
|
22
|
+
const e = h(t);
|
|
27
23
|
if (!e || !("getAttribute" in e))
|
|
28
24
|
return "grid";
|
|
29
25
|
const o = e.getAttribute("data-layout");
|
|
30
26
|
return o === "list" || o === "horizontal" ? "list" : "grid";
|
|
31
27
|
}
|
|
32
28
|
function x(t) {
|
|
33
|
-
const e =
|
|
29
|
+
const e = h(t);
|
|
34
30
|
if (!e || !("getAttribute" in e))
|
|
35
|
-
return
|
|
31
|
+
return R;
|
|
36
32
|
const o = e.getAttribute("data-card-composition");
|
|
37
|
-
return o ? o.split(",").filter(Boolean) :
|
|
33
|
+
return o ? o.split(",").filter(Boolean) : R;
|
|
38
34
|
}
|
|
39
35
|
function D(t) {
|
|
40
36
|
if (!t || !("childNodes" in t))
|
|
@@ -51,14 +47,14 @@ function S(t, e, o) {
|
|
|
51
47
|
function U(t, e) {
|
|
52
48
|
return t && t.length > 0 ? t : e.length > 0 ? e : L();
|
|
53
49
|
}
|
|
54
|
-
function
|
|
50
|
+
function G(t) {
|
|
55
51
|
const { currentNode: e, documentModifier: o } = t;
|
|
56
52
|
if (!e || !("querySelector" in e))
|
|
57
53
|
return;
|
|
58
|
-
const n = e.querySelector(
|
|
54
|
+
const n = e.querySelector(k);
|
|
59
55
|
n && (o.modifyHtml(n).setInnerHtml(""), o.apply(new p("Cleared mobile row content")));
|
|
60
56
|
}
|
|
61
|
-
function
|
|
57
|
+
function Y(t) {
|
|
62
58
|
const {
|
|
63
59
|
currentNode: e,
|
|
64
60
|
documentModifier: o,
|
|
@@ -70,20 +66,20 @@ function X(t) {
|
|
|
70
66
|
return;
|
|
71
67
|
const r = i ?? b(e), s = E.getConfig(e);
|
|
72
68
|
if (r === "list" || !s.mobileLayoutEnabled) {
|
|
73
|
-
|
|
69
|
+
G({ currentNode: e, documentModifier: o });
|
|
74
70
|
return;
|
|
75
71
|
}
|
|
76
|
-
const u = e.querySelector(
|
|
72
|
+
const u = e.querySelector(k);
|
|
77
73
|
if (!u)
|
|
78
74
|
return;
|
|
79
|
-
const l = C(), d = U(n, l.recommendationProducts), a = c ?? x(e), g = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${
|
|
75
|
+
const l = C(), d = U(n, l.recommendationProducts), a = c ?? x(e), g = `<td><table class="ins-recommendation-product-container ins-recommendation-mobile-container" width="100%" cellpadding="0" cellspacing="0" border="0">${_(d, r, {
|
|
80
76
|
productsPerRow: s.mobileCardsInRow,
|
|
81
77
|
composition: a,
|
|
82
78
|
filterList: l.filterList
|
|
83
79
|
})}</table></td>`;
|
|
84
80
|
o.modifyHtml(u).setInnerHtml(g), o.apply(new p("Updated mobile product rows"));
|
|
85
81
|
}
|
|
86
|
-
function
|
|
82
|
+
function K(t) {
|
|
87
83
|
const {
|
|
88
84
|
currentNode: e,
|
|
89
85
|
documentModifier: o,
|
|
@@ -94,15 +90,15 @@ function z(t) {
|
|
|
94
90
|
} = t;
|
|
95
91
|
if (!e || !("querySelector" in e))
|
|
96
92
|
return;
|
|
97
|
-
const s = e.querySelector(
|
|
93
|
+
const s = e.querySelector(P) ?? e.querySelector(v);
|
|
98
94
|
if (!s)
|
|
99
95
|
return;
|
|
100
|
-
const u = C(), l = U(i, u.recommendationProducts), { cardsInRow: d } = u.recommendationConfigs, a = r ?? x(e), f = c ?? b(e), g =
|
|
96
|
+
const u = C(), l = U(i, u.recommendationProducts), { cardsInRow: d } = u.recommendationConfigs, a = r ?? x(e), f = c ?? b(e), g = _(l, f, {
|
|
101
97
|
productsPerRow: d,
|
|
102
98
|
composition: a,
|
|
103
99
|
filterList: u.filterList
|
|
104
100
|
});
|
|
105
|
-
o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")),
|
|
101
|
+
o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), Y(t), n == null || n();
|
|
106
102
|
}
|
|
107
103
|
function T(t, e, o, n) {
|
|
108
104
|
const c = `0 ${Math.floor(o / 2)}px`;
|
|
@@ -115,7 +111,7 @@ function T(t, e, o, n) {
|
|
|
115
111
|
t.querySelectorAll(".product-card-wrapper")
|
|
116
112
|
).forEach((u) => {
|
|
117
113
|
const l = "parentNode" in u ? u.parentNode : null;
|
|
118
|
-
l &&
|
|
114
|
+
l && F(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
|
|
119
115
|
}), r;
|
|
120
116
|
}
|
|
121
117
|
function I(t, e, o) {
|
|
@@ -125,13 +121,13 @@ function I(t, e, o) {
|
|
|
125
121
|
e.modifyHtml(r).setStyle("height", n), c = !0;
|
|
126
122
|
}), c;
|
|
127
123
|
}
|
|
128
|
-
function
|
|
124
|
+
function X(t) {
|
|
129
125
|
const { currentNode: e, documentModifier: o } = t;
|
|
130
126
|
if (!e)
|
|
131
127
|
return;
|
|
132
128
|
const n = E.getConfig(e), i = b(e);
|
|
133
129
|
let c = !1;
|
|
134
|
-
const r = e.querySelector(
|
|
130
|
+
const r = e.querySelector(P);
|
|
135
131
|
if (r) {
|
|
136
132
|
c = T(
|
|
137
133
|
r,
|
|
@@ -164,9 +160,9 @@ function J(t) {
|
|
|
164
160
|
}
|
|
165
161
|
c && o.apply(new p("Reapply spacing after regeneration"));
|
|
166
162
|
}
|
|
167
|
-
function
|
|
163
|
+
function se(t) {
|
|
168
164
|
const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
|
|
169
|
-
e &&
|
|
165
|
+
e && K({
|
|
170
166
|
currentNode: e,
|
|
171
167
|
documentModifier: o,
|
|
172
168
|
products: i,
|
|
@@ -174,12 +170,12 @@ function de(t) {
|
|
|
174
170
|
composition: r,
|
|
175
171
|
afterRegenerate: () => {
|
|
176
172
|
setTimeout(() => {
|
|
177
|
-
|
|
173
|
+
X({ currentNode: e, documentModifier: o });
|
|
178
174
|
}, 0), n == null || n();
|
|
179
175
|
}
|
|
180
176
|
});
|
|
181
177
|
}
|
|
182
|
-
function
|
|
178
|
+
function ae(t, e) {
|
|
183
179
|
return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
|
|
184
180
|
}
|
|
185
181
|
function H() {
|
|
@@ -193,14 +189,14 @@ function H() {
|
|
|
193
189
|
thousandSeparator: e.thousandSeparator
|
|
194
190
|
};
|
|
195
191
|
}
|
|
196
|
-
function
|
|
192
|
+
function A(t, e = "price") {
|
|
197
193
|
const o = H(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
|
|
198
|
-
return
|
|
194
|
+
return j({
|
|
199
195
|
price: i,
|
|
200
196
|
currency: o
|
|
201
197
|
});
|
|
202
198
|
}
|
|
203
|
-
function
|
|
199
|
+
function z(t) {
|
|
204
200
|
var c, r;
|
|
205
201
|
const e = H(), o = ((c = t.original_price) == null ? void 0 : c[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((r = t.price) == null ? void 0 : r[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = o > 0 ? Math.round((o - n) / o * 100) : 0;
|
|
206
202
|
return i > 0 ? `-${i}%` : "0%";
|
|
@@ -209,24 +205,24 @@ function $(t) {
|
|
|
209
205
|
const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: c, omnibusDiscountEl: r } = t;
|
|
210
206
|
let s = !1;
|
|
211
207
|
if (n && "querySelector" in n) {
|
|
212
|
-
const u = n.querySelector("strong") ?? n.querySelector("p"), l =
|
|
208
|
+
const u = n.querySelector("strong") ?? n.querySelector("p"), l = A(o, "price");
|
|
213
209
|
S(e, u ?? null, l) && (s = !0);
|
|
214
210
|
}
|
|
215
211
|
if (i && "querySelector" in i) {
|
|
216
|
-
const u = i.querySelector("strong") ?? i.querySelector("p"), l =
|
|
212
|
+
const u = i.querySelector("strong") ?? i.querySelector("p"), l = A(o, "original_price");
|
|
217
213
|
S(e, u ?? null, l) && (s = !0);
|
|
218
214
|
}
|
|
219
215
|
if (c && "querySelector" in c) {
|
|
220
|
-
const u = c.querySelector(".omnibus-price-value") ?? null, l =
|
|
216
|
+
const u = c.querySelector(".omnibus-price-value") ?? null, l = A(o, "original_price");
|
|
221
217
|
S(e, u, l) && (s = !0);
|
|
222
218
|
}
|
|
223
219
|
if (r && "querySelector" in r) {
|
|
224
|
-
const u = r.querySelector(".omnibus-discount-value") ?? null, l =
|
|
220
|
+
const u = r.querySelector(".omnibus-discount-value") ?? null, l = z(o);
|
|
225
221
|
S(e, u, l) && (s = !0);
|
|
226
222
|
}
|
|
227
223
|
return s;
|
|
228
224
|
}
|
|
229
|
-
function
|
|
225
|
+
function J(t) {
|
|
230
226
|
const {
|
|
231
227
|
documentModifier: e,
|
|
232
228
|
product: o,
|
|
@@ -241,7 +237,7 @@ function Z(t) {
|
|
|
241
237
|
let d = !1;
|
|
242
238
|
if (n && "querySelector" in n) {
|
|
243
239
|
const a = n.querySelector("img");
|
|
244
|
-
a && (e.modifyHtml(a).setAttribute("src",
|
|
240
|
+
a && (e.modifyHtml(a).setAttribute("src", V(o.image_url)).setAttribute("alt", o.name), d = !0);
|
|
245
241
|
const f = n.querySelector("a");
|
|
246
242
|
f && (e.modifyHtml(f).setAttribute("href", o.url), d = !0);
|
|
247
243
|
}
|
|
@@ -263,10 +259,10 @@ function Z(t) {
|
|
|
263
259
|
return d;
|
|
264
260
|
}
|
|
265
261
|
function B(t) {
|
|
266
|
-
return "querySelector" in t ? t.querySelector(
|
|
262
|
+
return "querySelector" in t ? t.querySelector(P) ?? t : t;
|
|
267
263
|
}
|
|
268
264
|
const O = "product_attribute.";
|
|
269
|
-
function
|
|
265
|
+
function Q(t, e) {
|
|
270
266
|
var n;
|
|
271
267
|
let o;
|
|
272
268
|
if (t.startsWith(O)) {
|
|
@@ -276,7 +272,7 @@ function ee(t, e) {
|
|
|
276
272
|
o = e[t];
|
|
277
273
|
return typeof o == "string" && o.length > 0 ? o : typeof o == "number" ? String(o) : null;
|
|
278
274
|
}
|
|
279
|
-
function
|
|
275
|
+
function Z(t, e, o) {
|
|
280
276
|
if (!("querySelectorAll" in t))
|
|
281
277
|
return !1;
|
|
282
278
|
const n = t.querySelectorAll(
|
|
@@ -288,7 +284,7 @@ function te(t, e, o) {
|
|
|
288
284
|
n.forEach((r) => {
|
|
289
285
|
if (!("getAttribute" in r))
|
|
290
286
|
return;
|
|
291
|
-
const s = r.getAttribute(
|
|
287
|
+
const s = r.getAttribute(W);
|
|
292
288
|
if (!s)
|
|
293
289
|
return;
|
|
294
290
|
const u = i.get(s) ?? [];
|
|
@@ -300,7 +296,7 @@ function te(t, e, o) {
|
|
|
300
296
|
r.slice(0, u).forEach((l, d) => {
|
|
301
297
|
if (!("querySelector" in l))
|
|
302
298
|
return;
|
|
303
|
-
const a =
|
|
299
|
+
const a = Q(s, o[d]);
|
|
304
300
|
if (a === null)
|
|
305
301
|
return;
|
|
306
302
|
const f = l.querySelector("p") ?? null;
|
|
@@ -308,7 +304,7 @@ function te(t, e, o) {
|
|
|
308
304
|
});
|
|
309
305
|
}), c;
|
|
310
306
|
}
|
|
311
|
-
function
|
|
307
|
+
function w(t, e, o) {
|
|
312
308
|
if (!("querySelectorAll" in t))
|
|
313
309
|
return !1;
|
|
314
310
|
const n = t.querySelectorAll(
|
|
@@ -328,7 +324,7 @@ function _(t, e, o) {
|
|
|
328
324
|
), d = Math.min(n.length, o.length);
|
|
329
325
|
let a = !1;
|
|
330
326
|
for (let f = 0; f < d; f++) {
|
|
331
|
-
const g =
|
|
327
|
+
const g = J({
|
|
332
328
|
documentModifier: e,
|
|
333
329
|
product: o[f],
|
|
334
330
|
imageEl: n[f] ?? null,
|
|
@@ -341,9 +337,9 @@ function _(t, e, o) {
|
|
|
341
337
|
});
|
|
342
338
|
a = a || g;
|
|
343
339
|
}
|
|
344
|
-
return
|
|
340
|
+
return Z(t, e, o) && (a = !0), a;
|
|
345
341
|
}
|
|
346
|
-
function
|
|
342
|
+
function de(t) {
|
|
347
343
|
const { currentNode: e, documentModifier: o, products: n } = t;
|
|
348
344
|
if (!e || !("querySelectorAll" in e))
|
|
349
345
|
return !1;
|
|
@@ -352,12 +348,12 @@ function me(t) {
|
|
|
352
348
|
`[esd-extension-block-id="${m.IMAGE}"]`
|
|
353
349
|
).length !== n.length)
|
|
354
350
|
return !1;
|
|
355
|
-
let r =
|
|
351
|
+
let r = w(i, o, n);
|
|
356
352
|
const s = b(e), u = E.getConfig(e);
|
|
357
353
|
if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
|
|
358
354
|
const l = e.querySelector(q);
|
|
359
355
|
if (l) {
|
|
360
|
-
const d =
|
|
356
|
+
const d = w(
|
|
361
357
|
l,
|
|
362
358
|
o,
|
|
363
359
|
n
|
|
@@ -367,7 +363,7 @@ function me(t) {
|
|
|
367
363
|
}
|
|
368
364
|
return r && o.apply(new p("Updated product content in-place")), !0;
|
|
369
365
|
}
|
|
370
|
-
function
|
|
366
|
+
function N(t, e, o) {
|
|
371
367
|
if (!("querySelectorAll" in t))
|
|
372
368
|
return !1;
|
|
373
369
|
const n = t.querySelectorAll(
|
|
@@ -391,29 +387,27 @@ function k(t, e, o) {
|
|
|
391
387
|
}) && (u = !0);
|
|
392
388
|
return u;
|
|
393
389
|
}
|
|
394
|
-
function
|
|
390
|
+
function fe(t) {
|
|
395
391
|
const { currentNode: e, documentModifier: o } = t;
|
|
396
392
|
if (!e || !("querySelectorAll" in e))
|
|
397
393
|
return !1;
|
|
398
|
-
if (K(e))
|
|
399
|
-
return !0;
|
|
400
394
|
const i = C().recommendationProducts;
|
|
401
395
|
if (i.length === 0)
|
|
402
396
|
return !1;
|
|
403
397
|
const c = B(e);
|
|
404
|
-
let r =
|
|
398
|
+
let r = N(c, o, i);
|
|
405
399
|
const s = b(e), u = E.getConfig(e);
|
|
406
400
|
if (s !== "list" && u.mobileLayoutEnabled && "querySelector" in e) {
|
|
407
401
|
const l = e.querySelector(q);
|
|
408
402
|
if (l) {
|
|
409
|
-
const d =
|
|
403
|
+
const d = N(l, o, i);
|
|
410
404
|
r = r || d;
|
|
411
405
|
}
|
|
412
406
|
}
|
|
413
407
|
return r && o.apply(new p("Updated price formatting in-place")), r;
|
|
414
408
|
}
|
|
415
|
-
function
|
|
416
|
-
const { currentNode: e, documentModifier: o, currency: n } = t, i =
|
|
409
|
+
function me(t) {
|
|
410
|
+
const { currentNode: e, documentModifier: o, currency: n } = t, i = h(e);
|
|
417
411
|
if (!i)
|
|
418
412
|
return;
|
|
419
413
|
const c = n.alignment === "before" ? "0" : "1", r = (s, u) => {
|
|
@@ -422,18 +416,17 @@ function ye(t) {
|
|
|
422
416
|
r(y.CURRENCY, n.code), r(y.SYMBOL, n.symbol), r(y.ALIGNMENT, c), r(y.THOUSAND_SEPARATOR, n.thousandSeparator), r(y.DECIMAL_SEPARATOR, n.decimalSeparator), r(y.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
|
|
423
417
|
}
|
|
424
418
|
export {
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
419
|
+
ae as adjustProductsToSize,
|
|
420
|
+
A as formatProductPrice,
|
|
421
|
+
h as getBlockElement,
|
|
428
422
|
x as getCardComposition,
|
|
429
423
|
b as getCurrentLayout,
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
Z as updateSingleProductContent
|
|
424
|
+
X as reapplySpacing,
|
|
425
|
+
Y as regenerateMobileProductRows,
|
|
426
|
+
K as regenerateProductRows,
|
|
427
|
+
se as regenerateProductRowsWithStyles,
|
|
428
|
+
me as setCurrencyAttributes,
|
|
429
|
+
fe as updatePricesInPlace,
|
|
430
|
+
de as updateProductContentInPlace,
|
|
431
|
+
J as updateSingleProductContent
|
|
439
432
|
};
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
var m = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var a = (o, e, t) =>
|
|
4
|
-
import { UIElementType as c, UEAttr as
|
|
2
|
+
var _ = (o, e, t) => e in o ? m(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
|
|
3
|
+
var a = (o, e, t) => _(o, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
import { UIElementType as c, UEAttr as p } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
5
|
import { CommonControl as d } from "../../common-control.js";
|
|
6
6
|
import { RecommendationControlId as C } from "../constants/controlIds.js";
|
|
7
|
-
import "../constants/selectors.js";
|
|
8
7
|
const S = C.SYNC_INFO_MESSAGE, r = "sync-info-message", u = "Note that changes will be applied to all product cards in your recommendation block.";
|
|
9
|
-
class
|
|
8
|
+
class h extends d {
|
|
10
9
|
constructor() {
|
|
11
10
|
super(...arguments);
|
|
12
11
|
a(this, "_repositionedElement", null);
|
|
@@ -18,7 +17,7 @@ class O extends d {
|
|
|
18
17
|
return `
|
|
19
18
|
<div class="${r}">
|
|
20
19
|
<${c.ICON}
|
|
21
|
-
${
|
|
20
|
+
${p.ICON.src}="migration-info-icon"
|
|
22
21
|
class="${r}__icon">
|
|
23
22
|
</${c.ICON}>
|
|
24
23
|
<p class="${r}__text">
|
|
@@ -62,5 +61,5 @@ class O extends d {
|
|
|
62
61
|
}
|
|
63
62
|
export {
|
|
64
63
|
S as SYNC_INFO_MESSAGE_CONTROL_ID,
|
|
65
|
-
|
|
64
|
+
h as SyncInfoMessageControl
|
|
66
65
|
};
|