@useinsider/guido 3.8.1-beta.2ee94c2 → 3.8.1-beta.5cf94b0

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.
Files changed (64) hide show
  1. package/dist/@types/config/schemas.js +70 -66
  2. package/dist/composables/useHtmlValidator.js +180 -133
  3. package/dist/composables/usePreviewMode.js +15 -14
  4. package/dist/composables/useRecommendationPreview.js +111 -0
  5. package/dist/config/compiler/recommendationCompilerRules.js +1 -1
  6. package/dist/config/compiler/utils/recommendationCompilerUtils.js +98 -89
  7. package/dist/config/compiler/utils/recommendationIgnoreUtils.js +15 -0
  8. package/dist/config/migrator/recommendation/extractors.js +44 -22
  9. package/dist/config/migrator/recommendation/htmlBuilder.js +170 -163
  10. package/dist/config/migrator/recommendation/settingsMapper.js +38 -33
  11. package/dist/config/migrator/recommendationMigrator.js +30 -31
  12. package/dist/extensions/Blocks/Recommendation/block.js +60 -41
  13. package/dist/extensions/Blocks/Recommendation/canvasPreview.css.js +16 -0
  14. package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +41 -32
  15. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +26 -20
  16. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +359 -264
  17. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +96 -83
  18. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +43 -31
  19. package/dist/extensions/Blocks/Recommendation/controls/main/pricePlacement.js +133 -0
  20. package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +3 -2
  21. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +55 -45
  22. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +175 -166
  23. package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +7 -6
  24. package/dist/extensions/Blocks/Recommendation/extension.js +31 -29
  25. package/dist/extensions/Blocks/Recommendation/iconsRegistry.js +21 -7
  26. package/dist/extensions/Blocks/Recommendation/recommendation.css.js +64 -4
  27. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +3 -2
  28. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +6 -3
  29. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +130 -96
  30. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +43 -53
  31. package/dist/extensions/Blocks/Recommendation/templates/index.js +20 -16
  32. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +86 -80
  33. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +31 -40
  34. package/dist/extensions/Blocks/Recommendation/templates/utils.js +155 -102
  35. package/dist/src/@types/config/schemas.d.ts +16 -0
  36. package/dist/src/composables/useConfig.d.ts +4 -0
  37. package/dist/src/composables/useHtmlValidator.d.ts +27 -0
  38. package/dist/src/composables/useHtmlValidator.test.d.ts +1 -0
  39. package/dist/src/composables/useRecommendationPreview.d.ts +10 -0
  40. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.d.ts +17 -0
  41. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.test.d.ts +1 -0
  42. package/dist/src/config/migrator/recommendation/extractors.d.ts +15 -0
  43. package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts +8 -0
  44. package/dist/src/config/migrator/recommendation/settingsMapper.d.ts +1 -1
  45. package/dist/src/extensions/Blocks/Recommendation/block.d.ts +10 -0
  46. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  47. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +21 -0
  48. package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +36 -3
  49. package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +1 -1
  50. package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +3 -1
  51. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +5 -0
  52. package/dist/src/extensions/Blocks/Recommendation/controls/main/pricePlacement.d.ts +59 -0
  53. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +6 -0
  54. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +9 -0
  55. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +2 -0
  56. package/dist/src/extensions/Blocks/Recommendation/templates/grid/elementRenderer.d.ts +13 -1
  57. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
  58. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
  59. package/dist/src/extensions/Blocks/Recommendation/templates/list/elementRenderer.d.ts +10 -1
  60. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -3
  61. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +51 -1
  62. package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts +15 -0
  63. package/dist/src/stores/config.d.ts +36 -0
  64. package/package.json +1 -1
@@ -2,171 +2,180 @@ import { useConfig as _ } from "../../../composables/useConfig.js";
2
2
  import { useRecommendation as g } from "../../../composables/useRecommendation.js";
3
3
  import { CSS_CLASS_RECO_BUTTON as q } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
4
4
  import { useRecommendationExtensionStore as C } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
5
- function h(r, n, e, o, i = "") {
6
- const c = `{{${i}${r}_${n}_${e}}}`, t = `{{${i}${r}_${n}_currency}}`;
7
- return o === "before" ? `${t} ${c}` : `${c} ${t}`;
5
+ import { isIgnoredRecommendationBlock as w } from "./recommendationIgnoreUtils.js";
6
+ function b(e, n, t, o, c = "") {
7
+ const i = `{{${c}${e}_${n}_${t}}}`, r = `{{${c}${e}_${n}_currency}}`;
8
+ return o === "before" ? `${r} ${i}` : `${i} ${r}`;
8
9
  }
9
- function b(r) {
10
- let n = r;
10
+ function m(e) {
11
+ let n = e;
11
12
  for (; n.children.length === 1; )
12
13
  [n] = n.children;
13
14
  return n;
14
15
  }
15
- function A(r, n, e, o, i, c) {
16
+ function h(e, n, t, o, c, i) {
16
17
  switch (n) {
17
18
  case "productImage": {
18
- const t = r.querySelector("img");
19
- t && (t.setAttribute("src", `{{${c}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${c}${e}_${o}_name}}`));
20
- const s = r.querySelector("a");
21
- s && (s.setAttribute("href", `{{${c}${e}_${o}_url}}`), s.classList.add(q));
19
+ const r = e.querySelector("img");
20
+ r && (r.setAttribute("src", `{{${i}${t}_${o}_image_url}}`), r.setAttribute("alt", `{{${i}${t}_${o}_name}}`));
21
+ const s = e.querySelector("a");
22
+ s && (s.setAttribute("href", `{{${i}${t}_${o}_url}}`), s.classList.add(q));
22
23
  break;
23
24
  }
24
25
  case "productName": {
25
- const t = r.querySelector("p");
26
- t && (b(t).textContent = `{{${c}${e}_${o}_name}}`);
26
+ const r = e.querySelector("p");
27
+ r && (m(r).textContent = `{{${i}${t}_${o}_name}}`);
27
28
  break;
28
29
  }
29
30
  case "productPrice": {
30
- const t = r.querySelector("p");
31
- t && (b(t).textContent = h(
32
- e,
31
+ const r = e.querySelector(".product-price p") ?? e.querySelector("p");
32
+ r && (m(r).textContent = b(
33
+ t,
33
34
  o,
34
35
  "price",
35
- i,
36
- c
36
+ c,
37
+ i
38
+ ));
39
+ const s = e.querySelector(".product-old-price p");
40
+ s && (m(s).textContent = b(
41
+ t,
42
+ o,
43
+ "original_price",
44
+ c,
45
+ i
37
46
  ));
38
47
  break;
39
48
  }
40
49
  case "productOldPrice": {
41
- const t = r.querySelector("p");
42
- t && (b(t).textContent = h(
43
- e,
50
+ const r = e.querySelector("p");
51
+ r && (m(r).textContent = b(
52
+ t,
44
53
  o,
45
54
  "original_price",
46
- i,
47
- c
48
- ), t.setAttribute("product-attr", "discount"));
55
+ c,
56
+ i
57
+ ));
49
58
  break;
50
59
  }
51
60
  case "productButton": {
52
- const t = r.querySelector("a");
53
- t && t.setAttribute("href", `{{${c}${e}_${o}_url}}`);
61
+ const r = e.querySelector("a");
62
+ r && r.setAttribute("href", `{{${i}${t}_${o}_url}}`);
54
63
  break;
55
64
  }
56
65
  case "productOmnibusPrice": {
57
- const t = r.querySelector(".omnibus-price-value");
58
- if (t) {
59
- t.textContent = `{{${c}${e}_${o}_omnibus_price}}`;
60
- const s = t.closest("p");
66
+ const r = e.querySelector(".omnibus-price-value");
67
+ if (r) {
68
+ r.textContent = `{{${i}${t}_${o}_omnibus_price}}`;
69
+ const s = r.closest("p");
61
70
  s && (s.setAttribute("product-attr", "omnibus_price"), s.setAttribute("composition", "true"));
62
71
  }
63
72
  break;
64
73
  }
65
74
  case "productOmnibusDiscount": {
66
- const t = r.querySelector(".omnibus-discount-value");
67
- if (t) {
68
- t.textContent = `{{${c}${e}_${o}_omnibus_discount}}`;
69
- const s = t.closest("p");
75
+ const r = e.querySelector(".omnibus-discount-value");
76
+ if (r) {
77
+ r.textContent = `{{${i}${t}_${o}_omnibus_discount}}`;
78
+ const s = r.closest("p");
70
79
  s && (s.setAttribute("product-attr", "omnibus_discount"), s.setAttribute("composition", "true"));
71
80
  }
72
81
  break;
73
82
  }
74
83
  default: {
75
- const t = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
76
- if (t) {
77
- const s = t.getAttribute("product-attr"), a = t.querySelector("p");
78
- a && (b(a).textContent = `{{${c}${e}_${o}_${s}}}`);
84
+ const r = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
85
+ if (r) {
86
+ const s = r.getAttribute("product-attr"), a = r.querySelector("p");
87
+ a && (m(a).textContent = `{{${i}${t}_${o}_${s}}}`);
79
88
  }
80
89
  break;
81
90
  }
82
91
  }
83
92
  }
84
- function w(r, n, e, o) {
85
- r.querySelectorAll(".recommendation-product-row").forEach((c, t) => {
86
- c.querySelectorAll("[data-attribute-type]").forEach((a) => {
93
+ function E(e, n, t, o) {
94
+ e.querySelectorAll(".recommendation-product-row").forEach((i, r) => {
95
+ i.querySelectorAll("[data-attribute-type]").forEach((a) => {
87
96
  const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
88
97
  p.length > 0 ? p.forEach((l) => {
89
- A(l, u, n, t, e, o);
90
- }) : A(a, u, n, t, e, o);
98
+ h(l, u, n, r, t, o);
99
+ }) : h(a, u, n, r, t, o);
91
100
  });
92
101
  });
93
102
  }
94
- function E(r, n, e, o) {
95
- const i = r.querySelectorAll(".recommendation-product-row");
96
- if (!i.length)
103
+ function P(e, n, t, o) {
104
+ const c = e.querySelectorAll(".recommendation-product-row");
105
+ if (!c.length)
97
106
  return;
98
- const [c] = i, t = c.querySelector("[data-attribute-type]"), s = t ? t.querySelectorAll(".attribute-cell").length : 1;
99
- i.forEach((a, u) => {
107
+ const [i] = c, r = i.querySelector("[data-attribute-type]"), s = r ? r.querySelectorAll(".attribute-cell").length : 1;
108
+ c.forEach((a, u) => {
100
109
  a.querySelectorAll("[data-attribute-type]").forEach((l) => {
101
110
  const d = l.getAttribute("data-attribute-type") || "";
102
- l.querySelectorAll(".attribute-cell").forEach((y, $) => {
111
+ l.querySelectorAll(".attribute-cell").forEach((A, $) => {
103
112
  const S = u * s + $;
104
- A(y, d, n, S, e, o);
113
+ h(A, d, n, S, t, o);
105
114
  });
106
115
  });
107
116
  });
108
117
  }
109
- function R(r, n, e, o) {
110
- r.querySelectorAll(".ins-recommendation-product-container").forEach((c) => {
111
- E(c, n, e, o);
118
+ function R(e, n, t, o) {
119
+ e.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
120
+ P(i, n, t, o);
112
121
  });
113
122
  }
114
- function P(r, n, e) {
115
- const o = r.getAttribute("data-layout") || "grid", i = r.getAttribute("currency-alignment") || "after";
116
- o === "list" ? w(r, n, i, e) : R(r, n, i, e);
123
+ function O(e, n, t) {
124
+ const o = e.getAttribute("data-layout") || "grid", c = e.getAttribute("currency-alignment") || "after";
125
+ o === "list" ? E(e, n, c, t) : R(e, n, c, t);
117
126
  }
118
- function f(r, n, e) {
119
- const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), i = r.match(o);
120
- return i ? parseInt(i[1]) : e;
127
+ function y(e, n, t) {
128
+ const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), c = e.match(o);
129
+ return c ? parseInt(c[1]) : t;
121
130
  }
122
- function T(r, n) {
123
- let e = r.parentElement;
124
- for (; e && e !== n; ) {
125
- if (e.tagName === "TD") {
126
- const o = e.getAttribute("width");
131
+ function T(e, n) {
132
+ let t = e.parentElement;
133
+ for (; t && t !== n; ) {
134
+ if (t.tagName === "TD") {
135
+ const o = t.getAttribute("width");
127
136
  if (o && o.endsWith("%") && parseFloat(o) < 100)
128
- return e;
137
+ return t;
129
138
  }
130
- e = e.parentElement;
139
+ t = t.parentElement;
131
140
  }
132
141
  return null;
133
142
  }
134
- function v(r) {
135
- const n = r.getAttribute("style") || "", e = f(n, "width", 600), o = f(n, "padding", 0) * 2, i = Math.max(0, e - o);
136
- i !== 0 && r.querySelectorAll("img.adapt-img").forEach((c) => {
137
- if (c.hasAttribute("width"))
143
+ function v(e) {
144
+ const n = e.getAttribute("style") || "", t = y(n, "width", 600), o = y(n, "padding", 0) * 2, c = Math.max(0, t - o);
145
+ c !== 0 && e.querySelectorAll("img.adapt-img").forEach((i) => {
146
+ if (i.hasAttribute("width"))
138
147
  return;
139
- const t = T(c, r);
140
- if (!t)
148
+ const r = T(i, e);
149
+ if (!r)
141
150
  return;
142
- const s = t.getAttribute("width"), a = parseFloat(s), u = f(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(i * a / 100), l = Math.max(1, p - u);
143
- c.setAttribute("width", String(l));
144
- const d = c.getAttribute("style") || "";
151
+ const s = r.getAttribute("width"), a = parseFloat(s), u = y(r.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(c * a / 100), l = Math.max(1, p - u);
152
+ i.setAttribute("width", String(l));
153
+ const d = i.getAttribute("style") || "";
145
154
  if (!/\bwidth\s*:\s*\d/i.test(d)) {
146
- const m = d && !d.trim().endsWith(";") ? "; " : "";
147
- c.setAttribute("style", `${d}${m}width: ${l}px`);
155
+ const f = d && !d.trim().endsWith(";") ? "; " : "";
156
+ i.setAttribute("style", `${d}${f}width: ${l}px`);
148
157
  }
149
158
  });
150
159
  }
151
- function O(r, n) {
152
- const e = r.match(/<!DOCTYPE[^>]*>/i);
153
- return (e ? `${e[0]}
160
+ function W(e, n) {
161
+ const t = e.match(/<!DOCTYPE[^>]*>/i);
162
+ return (t ? `${t[0]}
154
163
  ` : "") + n.documentElement.outerHTML;
155
164
  }
156
- function N(r) {
157
- const n = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(n, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
165
+ function F(e) {
166
+ const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), t = new DOMParser().parseFromString(n, "text/html"), o = t.querySelectorAll(".recommendation-block-v2");
158
167
  if (!o.length)
159
- return r;
160
- const { buildCampaignUrl: i } = g(), c = C();
161
- c.recommendationCampaignUrls = {};
162
- const { isFeatureEnabled: t } = _(), s = t("liquidSyntax") ? "reco_" : "";
168
+ return e;
169
+ const { buildCampaignUrl: c } = g(), i = C();
170
+ i.recommendationCampaignUrls = {};
171
+ const { isFeatureEnabled: r } = _(), s = r("liquidSyntax") ? "reco_" : "";
163
172
  return o.forEach((u) => {
164
173
  var l, d;
165
174
  const p = u.getAttribute("recommendation-id");
166
- p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), i(p), P(u, p, s), v(u));
167
- }), O(n, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
175
+ p && ((l = u.parentNode) == null || l.insertBefore(t.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(t.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((f) => f.remove()), c(p), w(u) || O(u, p, s), v(u));
176
+ }), W(n, t).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
168
177
  }
169
178
  export {
170
- h as formatPriceVariable,
171
- N as prepareRecommendationBlocks
179
+ b as formatPriceVariable,
180
+ F as prepareRecommendationBlocks
172
181
  };
@@ -0,0 +1,15 @@
1
+ import { CSS_CLASS_SKIP_COMPILE as n, BLOCK_ROOT_SELECTOR as i } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
2
+ function m(o) {
3
+ return o.classList.contains(n);
4
+ }
5
+ function a(o) {
6
+ const r = new DOMParser().parseFromString(o, "text/html").querySelectorAll(`${i}.${n}`), t = /* @__PURE__ */ new Set();
7
+ return r.forEach((c) => {
8
+ const e = c.getAttribute("recommendation-id");
9
+ e && t.add(e);
10
+ }), t;
11
+ }
12
+ export {
13
+ a as getIgnoredRecommendationBlockIds,
14
+ m as isIgnoredRecommendationBlock
15
+ };
@@ -1,27 +1,49 @@
1
- const i = "You May Also Like!";
2
- function s(r) {
3
- var e;
4
- const o = r.querySelector(".ext-recommendation-title");
5
- if (!o)
6
- return i;
7
- const t = (e = o.textContent) == null ? void 0 : e.trim();
8
- return t && t.length > 0 ? t : i;
1
+ import { CURRENCY_ATTR as n, CSS_CLASS_SKIP_COMPILE as c } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
2
+ const a = "You May Also Like!";
3
+ function l(t) {
4
+ var o;
5
+ const r = t.querySelector(".ext-recommendation-title");
6
+ if (!r)
7
+ return a;
8
+ const e = (o = r.textContent) == null ? void 0 : o.trim();
9
+ return e && e.length > 0 ? e : a;
9
10
  }
10
- function u(r) {
11
- const o = [
12
- r,
13
- ...Array.from(r.querySelectorAll(".product-card, .ext-recommendation-card"))
11
+ function m(t) {
12
+ const r = [
13
+ t,
14
+ ...Array.from(t.querySelectorAll(".product-card, .ext-recommendation-card"))
14
15
  ];
15
- let t = "";
16
- return o.some((e) => {
17
- const n = e.getAttribute("bgcolor");
18
- if (n && n.trim())
19
- return t = n.trim(), !0;
20
- const c = (e.getAttribute("style") ?? "").match(/background-color\s*:\s*([^;]+)/i);
21
- return c && c[1] ? (t = c[1].trim(), !0) : !1;
22
- }), t;
16
+ let e = "";
17
+ return r.some((o) => {
18
+ const i = o.getAttribute("bgcolor");
19
+ if (i && i.trim())
20
+ return e = i.trim(), !0;
21
+ const u = (o.getAttribute("style") ?? "").match(/background-color\s*:\s*([^;]+)/i);
22
+ return u && u[1] ? (e = u[1].trim(), !0) : !1;
23
+ }), e;
24
+ }
25
+ function C(t) {
26
+ const r = t.getAttribute(n.CURRENCY);
27
+ if (!r)
28
+ return;
29
+ const e = t.getAttribute(n.SYMBOL);
30
+ return {
31
+ value: r,
32
+ // An empty `currency-symbol` is omitted so `mapCurrency` falls back to
33
+ // the currency code as the symbol.
34
+ ...e ? { symbol: e } : {},
35
+ alignment: t.getAttribute(n.ALIGNMENT) ?? "",
36
+ decimalCount: t.getAttribute(n.DECIMAL_COUNT) ?? "",
37
+ decimalSeparator: t.getAttribute(n.DECIMAL_SEPARATOR) ?? "",
38
+ thousandSeparator: t.getAttribute(n.THOUSAND_SEPARATOR) ?? ""
39
+ };
40
+ }
41
+ function d(t) {
42
+ return t.classList.contains(c);
23
43
  }
24
44
  export {
25
- u as extractCardBgColor,
26
- s as extractTitleText
45
+ m as extractCardBgColor,
46
+ C as extractCurrencyFromBlock,
47
+ l as extractTitleText,
48
+ d as isPartnerManagedBlock
27
49
  };