@useinsider/guido 3.8.1-beta.2ee94c2 → 3.8.1-beta.6c0ee3f
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 +58 -57
- 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/Recommendation/block.js +4 -1
- package/dist/extensions/Blocks/Recommendation/constants/selectors.js +26 -20
- package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +176 -145
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +58 -57
- package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +43 -31
- package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +3 -2
- package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +55 -45
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +63 -56
- package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +7 -6
- package/dist/extensions/Blocks/Recommendation/extension.js +3 -2
- package/dist/extensions/Blocks/Recommendation/settingsPanel.js +3 -2
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +3 -2
- package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +13 -12
- package/dist/extensions/Blocks/Recommendation/templates/index.js +7 -6
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +1 -1
- package/dist/extensions/Blocks/controlFactories.js +76 -57
- 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/CouponBlock/controls/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Items/controls/index.d.ts +3 -3
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +21 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +5 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +6 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +9 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/name/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/oldPrice/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscount/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPrice/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/price/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/controlFactories.d.ts +10 -1
- package/package.json +1 -1
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
var C = Object.defineProperty;
|
|
2
|
-
var
|
|
3
|
-
var s = (d,
|
|
4
|
-
import { CommonControl as
|
|
5
|
-
import { DEFAULT_NODE_CONFIG 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
|
+
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,
|
|
@@ -241,26 +241,26 @@ class K extends g {
|
|
|
241
241
|
return;
|
|
242
242
|
const t = h.getConfig(this.currentNode), e = {};
|
|
243
243
|
let o = null, r = null, n = null;
|
|
244
|
-
if (t.currency.code ===
|
|
244
|
+
if (t.currency.code === a.currency.code) {
|
|
245
245
|
const { currencyList: i } = this.store;
|
|
246
246
|
i.length > 0 && (i.some(
|
|
247
|
-
(u) => u.value === `price.${
|
|
247
|
+
(u) => u.value === `price.${a.currency.code}`
|
|
248
248
|
) || (o = i[0].value.replace("price.", ""), e.currency = {
|
|
249
|
-
...
|
|
249
|
+
...a.currency,
|
|
250
250
|
code: o,
|
|
251
251
|
symbol: o
|
|
252
252
|
}));
|
|
253
253
|
}
|
|
254
|
-
if (t.strategy ===
|
|
254
|
+
if (t.strategy === a.strategy) {
|
|
255
255
|
const i = this.store.getActivePredictiveAlgorithms;
|
|
256
256
|
i.length > 0 && (i.some(
|
|
257
|
-
(u) => u.value ===
|
|
257
|
+
(u) => u.value === a.strategy
|
|
258
258
|
) || (r = i[0].value, e.strategy = r));
|
|
259
259
|
}
|
|
260
|
-
if (t.language ===
|
|
260
|
+
if (t.language === a.language) {
|
|
261
261
|
const i = this.store.getLanguages;
|
|
262
262
|
i.length > 0 && (i.some(
|
|
263
|
-
(u) => u.value ===
|
|
263
|
+
(u) => u.value === a.language
|
|
264
264
|
) || (n = i[0].value, e.language = n));
|
|
265
265
|
}
|
|
266
266
|
!o && !r && !n || (h.updateConfig(
|
|
@@ -278,10 +278,10 @@ class K extends g {
|
|
|
278
278
|
name: o,
|
|
279
279
|
value: o,
|
|
280
280
|
symbol: o,
|
|
281
|
-
alignment:
|
|
282
|
-
decimalCount:
|
|
283
|
-
decimalSeparator:
|
|
284
|
-
thousandSeparator:
|
|
281
|
+
alignment: a.currency.alignment === "before" ? "0" : "1",
|
|
282
|
+
decimalCount: a.currency.decimalCount.toString(),
|
|
283
|
+
decimalSeparator: a.currency.decimalSeparator,
|
|
284
|
+
thousandSeparator: a.currency.thousandSeparator
|
|
285
285
|
}
|
|
286
286
|
} : {},
|
|
287
287
|
...r ? { strategy: r } : {},
|
|
@@ -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);
|
|
@@ -325,8 +325,8 @@ class K extends g {
|
|
|
325
325
|
}
|
|
326
326
|
const i = t.$state.configVersion;
|
|
327
327
|
i !== o && (o = i, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
|
|
328
|
-
const
|
|
329
|
-
u && f && (e =
|
|
328
|
+
const l = t.recommendationProducts, u = l !== e, f = Array.isArray(l) && l.length > 0;
|
|
329
|
+
u && f && (e = l, this._debouncedRegenerateWithProducts());
|
|
330
330
|
});
|
|
331
331
|
}
|
|
332
332
|
/**
|
|
@@ -346,33 +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
|
-
|
|
373
|
-
|
|
372
|
+
k as isPartnerManagedBlock,
|
|
373
|
+
yt as regenerateMobileProductRows,
|
|
374
|
+
E as regenerateProductRowsWithStyles,
|
|
374
375
|
L as setCurrencyAttributes,
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
376
|
+
Rt as updatePricesInPlace,
|
|
377
|
+
D as updateProductContentInPlace,
|
|
378
|
+
Nt as updateSingleProductContent
|
|
378
379
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
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 = {
|
|
11
12
|
LAYOUT: "layout"
|
|
12
13
|
}, n = {
|
|
13
14
|
LAYOUT: "data-layout",
|
|
@@ -16,14 +17,14 @@ const I = "recommendation-layout-orientation-control", u = {
|
|
|
16
17
|
MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
|
|
17
18
|
MOBILE_ROW_SPACING: "data-mobile-row-spacing"
|
|
18
19
|
};
|
|
19
|
-
class
|
|
20
|
+
class F extends A {
|
|
20
21
|
constructor() {
|
|
21
22
|
super(...arguments);
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
a(this, "store", S());
|
|
24
|
+
a(this, "isChangingLayout", !1);
|
|
24
25
|
}
|
|
25
26
|
getId() {
|
|
26
|
-
return
|
|
27
|
+
return y;
|
|
27
28
|
}
|
|
28
29
|
getTemplate() {
|
|
29
30
|
return `
|
|
@@ -31,7 +32,7 @@ class w extends N {
|
|
|
31
32
|
${this._GuTwoColumns([
|
|
32
33
|
this._GuLabel({ text: this.api.translate("Layout Orientation") }),
|
|
33
34
|
this._GuRadioButton({
|
|
34
|
-
name:
|
|
35
|
+
name: s.LAYOUT,
|
|
35
36
|
buttons: O
|
|
36
37
|
})
|
|
37
38
|
])}
|
|
@@ -39,15 +40,26 @@ class w extends N {
|
|
|
39
40
|
`;
|
|
40
41
|
}
|
|
41
42
|
onRender() {
|
|
42
|
-
this._setFormValues(), this._listenToFormUpdates();
|
|
43
|
+
this._setFormValues(), this._syncDisabledState(), this._listenToFormUpdates();
|
|
43
44
|
}
|
|
44
45
|
onTemplateNodeUpdated(t) {
|
|
45
|
-
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
|
+
);
|
|
46
58
|
}
|
|
47
59
|
_setFormValues() {
|
|
48
|
-
const r =
|
|
60
|
+
const r = u.getConfig(this.currentNode).layout || C(this.currentNode);
|
|
49
61
|
this.api.updateValues({
|
|
50
|
-
[
|
|
62
|
+
[s.LAYOUT]: r
|
|
51
63
|
});
|
|
52
64
|
}
|
|
53
65
|
/**
|
|
@@ -55,27 +67,27 @@ class w extends N {
|
|
|
55
67
|
* Updates node config, data attribute and regenerates product rows
|
|
56
68
|
*/
|
|
57
69
|
_onLayoutChange(t) {
|
|
58
|
-
if (this.isChangingLayout || !this.currentNode || (
|
|
70
|
+
if (this.isChangingLayout || !this.currentNode || (u.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
|
|
59
71
|
return;
|
|
60
|
-
const c =
|
|
72
|
+
const c = T(this.currentNode);
|
|
61
73
|
if (c) {
|
|
62
74
|
this.isChangingLayout = !0;
|
|
63
75
|
try {
|
|
64
|
-
const
|
|
65
|
-
|
|
76
|
+
const _ = U(this.currentNode);
|
|
77
|
+
u.updateConfig(
|
|
66
78
|
this.api,
|
|
67
79
|
this.currentNode,
|
|
68
80
|
{
|
|
69
81
|
layout: t,
|
|
70
82
|
columnSpacing: g,
|
|
71
83
|
rowSpacing: l,
|
|
72
|
-
mobileColumnSpacing:
|
|
73
|
-
mobileRowSpacing:
|
|
84
|
+
mobileColumnSpacing: m,
|
|
85
|
+
mobileRowSpacing: d
|
|
74
86
|
},
|
|
75
87
|
`Changed layout to ${t}`
|
|
76
88
|
), this.store.patchCurrentBlockConfig({ orientation: t });
|
|
77
|
-
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,
|
|
78
|
-
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
|
|
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, _);
|
|
79
91
|
} finally {
|
|
80
92
|
this.isChangingLayout = !1;
|
|
81
93
|
}
|
|
@@ -88,7 +100,7 @@ class w extends N {
|
|
|
88
100
|
* @param composition - The preserved card composition, incl. customAttr:* entries
|
|
89
101
|
*/
|
|
90
102
|
_regenerateProductRows(t, r) {
|
|
91
|
-
this.currentNode &&
|
|
103
|
+
this.currentNode && I({
|
|
92
104
|
currentNode: this.currentNode,
|
|
93
105
|
documentModifier: this.api.getDocumentModifier(),
|
|
94
106
|
layout: t,
|
|
@@ -96,12 +108,12 @@ class w extends N {
|
|
|
96
108
|
});
|
|
97
109
|
}
|
|
98
110
|
_listenToFormUpdates() {
|
|
99
|
-
this.api.onValueChanged(
|
|
111
|
+
this.api.onValueChanged(s.LAYOUT, (t) => {
|
|
100
112
|
this._onLayoutChange(t);
|
|
101
113
|
});
|
|
102
114
|
}
|
|
103
115
|
}
|
|
104
116
|
export {
|
|
105
|
-
|
|
106
|
-
|
|
117
|
+
y as LAYOUT_ORIENTATION_CONTROL_ID,
|
|
118
|
+
F as LayoutOrientationControl
|
|
107
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
|
};
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import {
|
|
1
|
+
var f = Object.defineProperty;
|
|
2
|
+
var T = (a, n, t) => n in a ? f(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
|
|
3
|
+
var l = (a, n, t) => T(a, typeof n != "symbol" ? n + "" : n, t);
|
|
4
|
+
import { UEAttr as d, EditorStatePropertyType as b, PreviewDeviceMode as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
5
|
import { CommonControl as P } from "../../../common-control.js";
|
|
6
|
-
import
|
|
6
|
+
import "../../constants/selectors.js";
|
|
7
|
+
import { MAX_PRODUCTS_PER_ROW as C, MAX_MOBILE_PRODUCTS_PER_ROW as D, DEFAULT_MOBILE_CARDS_IN_ROW as _ } from "../../constants/layout.js";
|
|
7
8
|
import { RecommendationConfigService as s } from "../../services/configService.js";
|
|
8
|
-
import { useRecommendationExtensionStore as
|
|
9
|
-
import { setMobileLayoutOptOut as
|
|
10
|
-
import {
|
|
11
|
-
import { useDebounceFn as
|
|
9
|
+
import { useRecommendationExtensionStore as M } from "../../store/recommendation.js";
|
|
10
|
+
import { setMobileLayoutOptOut as m, ensureMobileCssRulesExist as L } from "../mobileLayout/cssRules.js";
|
|
11
|
+
import { isPartnerManagedBlock as y, getCurrentLayout as w, getBlockElement as U, adjustProductsToSize as I, regenerateProductRowsWithStyles as g, regenerateMobileProductRows as E } from "./utils.js";
|
|
12
|
+
import { useDebounceFn as A } from "../../../../../node_modules/@vueuse/shared/index.js";
|
|
12
13
|
const B = "recommendation-product-layout-control", e = {
|
|
13
14
|
// "Products in One Row" — shown when toggle is OFF
|
|
14
15
|
PRODUCT_IN_ROW: "cardsInRow",
|
|
@@ -23,14 +24,14 @@ const B = "recommendation-product-layout-control", e = {
|
|
|
23
24
|
MOBILE_LAYOUT_TOGGLE: "mobileLayoutEnabled",
|
|
24
25
|
MOBILE_LAYOUT_LABEL: "mobileLayoutLabel"
|
|
25
26
|
};
|
|
26
|
-
class
|
|
27
|
+
class F extends P {
|
|
27
28
|
constructor() {
|
|
28
29
|
super(...arguments);
|
|
29
30
|
// Store is used for backward compatibility with product fetching and regeneration
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
l(this, "store", M());
|
|
32
|
+
l(this, "storeUnsubscription", () => {
|
|
32
33
|
});
|
|
33
|
-
|
|
34
|
+
l(this, "_debouncedRegenerateProductRows", A(() => {
|
|
34
35
|
this._regenerateProductRows();
|
|
35
36
|
}, 500));
|
|
36
37
|
}
|
|
@@ -45,19 +46,19 @@ class v extends P {
|
|
|
45
46
|
text: this.api.translate("Products in One Row"),
|
|
46
47
|
name: e.PRODUCT_IN_ROW_LABEL
|
|
47
48
|
}),
|
|
48
|
-
this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue:
|
|
49
|
+
this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: C }),
|
|
49
50
|
this._GuLabel({
|
|
50
51
|
text: this.api.translate("Products in One Row on Desktop"),
|
|
51
52
|
name: e.PRODUCT_IN_ROW_DESKTOP_LABEL
|
|
52
53
|
}),
|
|
53
|
-
this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue:
|
|
54
|
+
this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: C }),
|
|
54
55
|
this._GuLabel({
|
|
55
56
|
text: this.api.translate("Products in One Row on Mobile"),
|
|
56
57
|
name: e.MOBILE_CARDS_IN_ROW_LABEL
|
|
57
58
|
}),
|
|
58
59
|
this._GuCounter({
|
|
59
60
|
name: e.MOBILE_CARDS_IN_ROW,
|
|
60
|
-
maxValue:
|
|
61
|
+
maxValue: D
|
|
61
62
|
}),
|
|
62
63
|
this._GuLabel({
|
|
63
64
|
text: this.api.translate("Mobile Layout Optimization"),
|
|
@@ -74,10 +75,19 @@ class v extends P {
|
|
|
74
75
|
`;
|
|
75
76
|
}
|
|
76
77
|
onRender() {
|
|
77
|
-
this._initializeMobileLayoutToggle(), this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._listenEditorModeChanges();
|
|
78
|
+
this._initializeMobileLayoutToggle(), this._setFormValues(), this._updateProductsInRowVisibility(), this._syncDisabledState(), this._listenToFormUpdates(), this._listenStateUpdates(), this._listenEditorModeChanges();
|
|
78
79
|
}
|
|
79
80
|
onTemplateNodeUpdated(t) {
|
|
80
|
-
super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
|
|
81
|
+
super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility(), this._syncDisabledState();
|
|
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 = y(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);
|
|
81
91
|
}
|
|
82
92
|
onDestroy() {
|
|
83
93
|
this.storeUnsubscription();
|
|
@@ -95,7 +105,7 @@ class v extends P {
|
|
|
95
105
|
* Returns true when the editor preview is in mobile mode.
|
|
96
106
|
*/
|
|
97
107
|
_isMobilePreview() {
|
|
98
|
-
return this.api.getEditorState()[
|
|
108
|
+
return this.api.getEditorState()[b.previewDeviceMode] === N.MOBILE;
|
|
99
109
|
}
|
|
100
110
|
/**
|
|
101
111
|
* Updates counter visibility based on layout, mobileLayoutEnabled, and editor preview mode.
|
|
@@ -110,12 +120,12 @@ class v extends P {
|
|
|
110
120
|
*/
|
|
111
121
|
_updateProductsInRowVisibility() {
|
|
112
122
|
var p;
|
|
113
|
-
const t = s.getConfig(this.currentNode),
|
|
114
|
-
this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE,
|
|
115
|
-
const
|
|
116
|
-
this.api.setVisibility(e.PRODUCT_IN_ROW,
|
|
117
|
-
const
|
|
118
|
-
|
|
123
|
+
const t = s.getConfig(this.currentNode), i = (t.layout || w(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, u = this._isMobilePreview();
|
|
124
|
+
this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE, i), this.api.setVisibility(e.MOBILE_LAYOUT_LABEL, i);
|
|
125
|
+
const c = i && !r, h = i && r && !u, R = i && r && u;
|
|
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, h), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, h), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, R), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, R);
|
|
127
|
+
const O = (p = this.getContainer()) == null ? void 0 : p.querySelector("[data-product-layout-control]");
|
|
128
|
+
O && (O.style.display = i ? "" : "none");
|
|
119
129
|
}
|
|
120
130
|
/**
|
|
121
131
|
* Initializes the mobile layout toggle using the same pattern as shuffle.ts.
|
|
@@ -125,7 +135,7 @@ class v extends P {
|
|
|
125
135
|
const t = s.getConfig(this.currentNode);
|
|
126
136
|
this.api.setUIEAttribute(
|
|
127
137
|
e.MOBILE_LAYOUT_TOGGLE,
|
|
128
|
-
|
|
138
|
+
d.SELECTPICKER.items,
|
|
129
139
|
t.mobileLayoutEnabled
|
|
130
140
|
);
|
|
131
141
|
}
|
|
@@ -137,12 +147,12 @@ class v extends P {
|
|
|
137
147
|
_onMobileLayoutToggleChange(t) {
|
|
138
148
|
if (!this.currentNode)
|
|
139
149
|
return;
|
|
140
|
-
const
|
|
141
|
-
if (
|
|
150
|
+
const o = s.getConfig(this.currentNode);
|
|
151
|
+
if (o.mobileLayoutEnabled === t)
|
|
142
152
|
return;
|
|
143
|
-
const
|
|
153
|
+
const i = U(this.currentNode);
|
|
144
154
|
if (t) {
|
|
145
|
-
const r =
|
|
155
|
+
const r = o.previousMobileCardsInRow || _;
|
|
146
156
|
s.updateConfig(
|
|
147
157
|
this.api,
|
|
148
158
|
this.currentNode,
|
|
@@ -157,31 +167,31 @@ class v extends P {
|
|
|
157
167
|
mobileCardsInRow: r
|
|
158
168
|
},
|
|
159
169
|
{ triggerRefetch: !1 }
|
|
160
|
-
),
|
|
161
|
-
const u = parseInt(
|
|
170
|
+
), i && m(this.api, i, !1), L(this.api);
|
|
171
|
+
const u = parseInt(o.size) || 6, c = I(this.store.recommendationProducts, u);
|
|
162
172
|
g({
|
|
163
173
|
currentNode: this.currentNode,
|
|
164
174
|
documentModifier: this.api.getDocumentModifier(),
|
|
165
|
-
products:
|
|
175
|
+
products: c
|
|
166
176
|
});
|
|
167
177
|
} else {
|
|
168
|
-
const r =
|
|
178
|
+
const r = o.mobileCardsInRow;
|
|
169
179
|
s.updateConfig(
|
|
170
180
|
this.api,
|
|
171
181
|
this.currentNode,
|
|
172
182
|
{
|
|
173
183
|
mobileLayoutEnabled: !1,
|
|
174
184
|
previousMobileCardsInRow: r,
|
|
175
|
-
mobileCardsInRow:
|
|
185
|
+
mobileCardsInRow: _
|
|
176
186
|
},
|
|
177
187
|
"Disabled mobile layout optimization"
|
|
178
188
|
), this.store.patchCurrentBlockConfig(
|
|
179
189
|
{
|
|
180
190
|
mobileLayoutEnabled: !1,
|
|
181
|
-
mobileCardsInRow:
|
|
191
|
+
mobileCardsInRow: _
|
|
182
192
|
},
|
|
183
193
|
{ triggerRefetch: !1 }
|
|
184
|
-
),
|
|
194
|
+
), i && m(this.api, i, !0), E({
|
|
185
195
|
currentNode: this.currentNode,
|
|
186
196
|
documentModifier: this.api.getDocumentModifier()
|
|
187
197
|
});
|
|
@@ -202,20 +212,20 @@ class v extends P {
|
|
|
202
212
|
this.currentNode,
|
|
203
213
|
{ mobileCardsInRow: t },
|
|
204
214
|
`Changed mobile products per row to ${t}`
|
|
205
|
-
),
|
|
215
|
+
), L(this.api), this.store.patchCurrentBlockConfig(
|
|
206
216
|
{ mobileCardsInRow: t },
|
|
207
217
|
{ triggerRefetch: !1 }
|
|
208
|
-
),
|
|
218
|
+
), E({
|
|
209
219
|
currentNode: this.currentNode,
|
|
210
220
|
documentModifier: this.api.getDocumentModifier()
|
|
211
221
|
}));
|
|
212
222
|
}
|
|
213
223
|
_regenerateProductRows() {
|
|
214
|
-
const t = s.getConfig(this.currentNode),
|
|
224
|
+
const t = s.getConfig(this.currentNode), o = parseInt(t.size) || 6, i = I(this.store.recommendationProducts, o);
|
|
215
225
|
g({
|
|
216
226
|
currentNode: this.currentNode,
|
|
217
227
|
documentModifier: this.api.getDocumentModifier(),
|
|
218
|
-
products:
|
|
228
|
+
products: i
|
|
219
229
|
});
|
|
220
230
|
}
|
|
221
231
|
_listenToFormUpdates() {
|
|
@@ -236,8 +246,8 @@ class v extends P {
|
|
|
236
246
|
_listenStateUpdates() {
|
|
237
247
|
let t = this.store.recommendationConfigs.orientation;
|
|
238
248
|
this.storeUnsubscription = this.store.$subscribe(() => {
|
|
239
|
-
const
|
|
240
|
-
|
|
249
|
+
const o = this.store.recommendationConfigs.orientation;
|
|
250
|
+
o !== t && (t = o, this._updateProductsInRowVisibility());
|
|
241
251
|
});
|
|
242
252
|
}
|
|
243
253
|
/**
|
|
@@ -247,7 +257,7 @@ class v extends P {
|
|
|
247
257
|
*/
|
|
248
258
|
_listenEditorModeChanges() {
|
|
249
259
|
this.api.onEditorStatePropUpdated(
|
|
250
|
-
|
|
260
|
+
b.previewDeviceMode,
|
|
251
261
|
() => {
|
|
252
262
|
s.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
|
|
253
263
|
}
|
|
@@ -256,5 +266,5 @@ class v extends P {
|
|
|
256
266
|
}
|
|
257
267
|
export {
|
|
258
268
|
B as PRODUCT_LAYOUT_CONTROL_ID,
|
|
259
|
-
|
|
269
|
+
F as ProductLayoutControl
|
|
260
270
|
};
|