@useinsider/guido 2.0.0-beta.1c331b8 → 2.0.0-beta.1f72712
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/extensions/Blocks/Recommendation/block.js +40 -6
- package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +64 -0
- package/dist/extensions/Blocks/Recommendation/constants/layout.js +9 -4
- package/dist/extensions/Blocks/Recommendation/constants/selectors.js +17 -9
- package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +48 -54
- package/dist/extensions/Blocks/Recommendation/controls/layout/index.js +42 -36
- package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js +51 -27
- package/dist/extensions/Blocks/Recommendation/controls/main/currency.js +146 -73
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +49 -35
- package/dist/extensions/Blocks/Recommendation/controls/main/locale.js +23 -13
- package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +41 -41
- package/dist/extensions/Blocks/Recommendation/controls/main/shuffle.js +27 -16
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +79 -67
- package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.js +1 -1
- package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.js +3 -3
- package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js +85 -79
- package/dist/extensions/Blocks/Recommendation/recommendation.css.js +8 -4
- package/dist/extensions/Blocks/Recommendation/services/configService.js +239 -0
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +30 -28
- package/dist/extensions/Blocks/Recommendation/templates/horizontal/elementRenderer.js +49 -25
- package/dist/extensions/Blocks/Recommendation/templates/horizontal/template.js +18 -19
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +44 -101
- package/dist/extensions/Blocks/Recommendation/templates/vertical/elementRenderer.js +60 -35
- package/dist/extensions/Blocks/Recommendation/types/nodeConfig.js +6 -0
- package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js +29 -0
- package/dist/extensions/Blocks/Recommendation/utils/tagName.js +46 -0
- package/dist/extensions/Blocks/common-control.js +1 -1
- package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +214 -157
- package/dist/src/components/wrappers/WpDrawer.vue.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/block.d.ts +34 -0
- package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts +49 -0
- package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +3 -2
- package/dist/src/extensions/Blocks/Recommendation/constants/layout.d.ts +10 -0
- package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +12 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/layout/index.d.ts +3 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/algorithm.d.ts +13 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/currency.d.ts +30 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +19 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/locale.d.ts +9 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +4 -2
- package/dist/src/extensions/Blocks/Recommendation/controls/main/shuffle.d.ts +8 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +19 -0
- package/dist/src/extensions/Blocks/Recommendation/controls/spacing/index.d.ts +13 -2
- package/dist/src/extensions/Blocks/Recommendation/services/configService.d.ts +151 -0
- package/dist/src/extensions/Blocks/Recommendation/services/index.d.ts +6 -0
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -0
- package/dist/src/extensions/Blocks/Recommendation/types/index.d.ts +7 -0
- package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts +154 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/priceFormatter.d.ts +33 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +113 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +77 -0
- package/package.json +1 -1
|
@@ -1,16 +1,36 @@
|
|
|
1
|
-
import { RecommendationBlockId as
|
|
2
|
-
import { ATTR_PRODUCT_BUTTON as
|
|
3
|
-
|
|
1
|
+
import { RecommendationBlockId as o } from "../../constants/blockIds.js";
|
|
2
|
+
import { ATTR_PRODUCT_BUTTON as l, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as m, ATTR_PRODUCT_OLD_PRICE as g, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
|
|
3
|
+
import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
|
|
4
|
+
import { formatPrice as _ } from "../../utils/priceFormatter.js";
|
|
5
|
+
function p() {
|
|
6
|
+
const t = T(), { currencySettings: e } = t.recommendationConfigs;
|
|
7
|
+
return {
|
|
8
|
+
code: e.value,
|
|
9
|
+
symbol: e.symbol,
|
|
10
|
+
alignment: e.alignment === "0" ? "before" : "after",
|
|
11
|
+
decimalCount: parseInt(e.decimalCount) || 2,
|
|
12
|
+
decimalSeparator: e.decimalSeparator,
|
|
13
|
+
thousandSeparator: e.thousandSeparator
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function s(t, e = "price") {
|
|
17
|
+
const n = p(), a = t[e], r = (a == null ? void 0 : a[n.code]) ?? Object.values(a ?? {})[0] ?? 0;
|
|
18
|
+
return _({
|
|
19
|
+
price: r,
|
|
20
|
+
currency: n
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
const k = {
|
|
4
24
|
/**
|
|
5
25
|
* Image cell - left column (120px fixed width)
|
|
6
26
|
* Has recommendation-attribute-row class and data attributes for Card Composition control
|
|
7
27
|
*/
|
|
8
|
-
[
|
|
28
|
+
[d]: (t) => `
|
|
9
29
|
<td
|
|
10
30
|
width="120"
|
|
11
31
|
class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
|
|
12
|
-
esd-extension-block-id="${
|
|
13
|
-
data-attribute-type="${
|
|
32
|
+
esd-extension-block-id="${o.IMAGE}"
|
|
33
|
+
data-attribute-type="${d}"
|
|
14
34
|
data-visibility="1"
|
|
15
35
|
align=center
|
|
16
36
|
valign="middle">
|
|
@@ -26,11 +46,11 @@ const p = {
|
|
|
26
46
|
/**
|
|
27
47
|
* Name element - row for info cell table
|
|
28
48
|
*/
|
|
29
|
-
[
|
|
49
|
+
[x]: (t) => `
|
|
30
50
|
<tr>
|
|
31
51
|
<td
|
|
32
52
|
class="esd-block-text product-name"
|
|
33
|
-
esd-extension-block-id="${
|
|
53
|
+
esd-extension-block-id="${o.NAME}"
|
|
34
54
|
align="left">
|
|
35
55
|
<p
|
|
36
56
|
path="1"
|
|
@@ -44,17 +64,17 @@ const p = {
|
|
|
44
64
|
/**
|
|
45
65
|
* Price element - row for info cell table
|
|
46
66
|
*/
|
|
47
|
-
[
|
|
67
|
+
[f]: (t) => `
|
|
48
68
|
<tr>
|
|
49
69
|
<td
|
|
50
70
|
class="esd-block-text product-price"
|
|
51
|
-
esd-extension-block-id="${
|
|
71
|
+
esd-extension-block-id="${o.PRICE}"
|
|
52
72
|
align="left">
|
|
53
73
|
<p
|
|
54
74
|
path="1"
|
|
55
75
|
contenteditable="false"
|
|
56
76
|
style="font-size: 16px; color: #333333; font-weight: bold; margin: 0;">
|
|
57
|
-
<strong path="1,0"
|
|
77
|
+
<strong path="1,0">${s(t, "price")}</strong>
|
|
58
78
|
</p>
|
|
59
79
|
</td>
|
|
60
80
|
</tr>
|
|
@@ -62,17 +82,17 @@ const p = {
|
|
|
62
82
|
/**
|
|
63
83
|
* Old price element - row for info cell table
|
|
64
84
|
*/
|
|
65
|
-
[
|
|
85
|
+
[g]: (t) => `
|
|
66
86
|
<tr>
|
|
67
87
|
<td
|
|
68
88
|
class="esd-block-text product-old-price"
|
|
69
|
-
esd-extension-block-id="${
|
|
89
|
+
esd-extension-block-id="${o.OLD_PRICE}"
|
|
70
90
|
align="left">
|
|
71
91
|
<p
|
|
72
92
|
path="1"
|
|
73
93
|
contenteditable="false"
|
|
74
94
|
style="font-size: 14px; color: #999999; text-decoration: line-through; margin: 0;">
|
|
75
|
-
<s path="1,0"
|
|
95
|
+
<s path="1,0">${s(t, "original_price")}</s>
|
|
76
96
|
</p>
|
|
77
97
|
</td>
|
|
78
98
|
</tr>
|
|
@@ -80,20 +100,20 @@ const p = {
|
|
|
80
100
|
/**
|
|
81
101
|
* Omnibus price element - row for info cell table
|
|
82
102
|
*/
|
|
83
|
-
[
|
|
103
|
+
[m]: (t) => `
|
|
84
104
|
<tr>
|
|
85
105
|
<td
|
|
86
106
|
class="esd-block-text product-omnibus-price"
|
|
87
107
|
data-text-before="Lowest 30-day price: "
|
|
88
108
|
data-text-after=""
|
|
89
|
-
esd-extension-block-id="${
|
|
109
|
+
esd-extension-block-id="${o.OMNIBUS_PRICE}"
|
|
90
110
|
align="left">
|
|
91
111
|
<p
|
|
92
112
|
path="1"
|
|
93
113
|
contenteditable="false"
|
|
94
114
|
style="font-size: 12px; color: #666666; margin: 0;">
|
|
95
115
|
<span class="omnibus-text-before">Lowest 30-day price: </span>
|
|
96
|
-
<span class="omnibus-price-value"
|
|
116
|
+
<span class="omnibus-price-value">${s(t, "original_price")}</span>
|
|
97
117
|
<span class="omnibus-text-after"></span>
|
|
98
118
|
</p>
|
|
99
119
|
</td>
|
|
@@ -102,35 +122,39 @@ const p = {
|
|
|
102
122
|
/**
|
|
103
123
|
* Omnibus discount element - row for info cell table
|
|
104
124
|
*/
|
|
105
|
-
[
|
|
125
|
+
[u]: (t) => {
|
|
126
|
+
var i, c;
|
|
127
|
+
const e = p(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, a = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - a) / n * 100) : 0, b = r > 0 ? `-${r}%` : "0%";
|
|
128
|
+
return `
|
|
106
129
|
<tr>
|
|
107
130
|
<td
|
|
108
131
|
class="esd-block-text product-omnibus-discount"
|
|
109
132
|
data-text-before=""
|
|
110
133
|
data-text-after=""
|
|
111
|
-
esd-extension-block-id="${
|
|
134
|
+
esd-extension-block-id="${o.OMNIBUS_DISCOUNT}"
|
|
112
135
|
align="left">
|
|
113
136
|
<p
|
|
114
137
|
path="1"
|
|
115
138
|
contenteditable="false"
|
|
116
139
|
style="font-size: 12px; color: #666666; margin: 0;">
|
|
117
140
|
<span class="omnibus-text-before"></span>
|
|
118
|
-
<span class="omnibus-discount-value"
|
|
141
|
+
<span class="omnibus-discount-value">${b}</span>
|
|
119
142
|
<span class="omnibus-text-after"></span>
|
|
120
143
|
</p>
|
|
121
144
|
</td>
|
|
122
145
|
</tr>
|
|
123
|
-
|
|
146
|
+
`;
|
|
147
|
+
},
|
|
124
148
|
/**
|
|
125
149
|
* Button cell - right column (100px fixed width)
|
|
126
150
|
* Has recommendation-attribute-row class and data attributes for Card Composition control
|
|
127
151
|
*/
|
|
128
|
-
[
|
|
152
|
+
[l]: (t) => `
|
|
129
153
|
<td
|
|
130
154
|
width="100"
|
|
131
155
|
class="esd-block-button button-cell recommendation-attribute-row product-button es-p5l es-p5r"
|
|
132
|
-
esd-extension-block-id="${
|
|
133
|
-
data-attribute-type="${
|
|
156
|
+
esd-extension-block-id="${o.BUTTON}"
|
|
157
|
+
data-attribute-type="${l}"
|
|
134
158
|
data-visibility="1"
|
|
135
159
|
align="center"
|
|
136
160
|
valign="middle">
|
|
@@ -153,5 +177,5 @@ const p = {
|
|
|
153
177
|
`
|
|
154
178
|
};
|
|
155
179
|
export {
|
|
156
|
-
|
|
180
|
+
k as horizontalElementRenderer
|
|
157
181
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ATTR_PRODUCT_IMAGE as
|
|
2
|
-
import { spacer as
|
|
1
|
+
import { ATTR_PRODUCT_IMAGE as E, ATTR_PRODUCT_NAME as s, ATTR_PRODUCT_OLD_PRICE as c, ATTR_PRODUCT_PRICE as a, ATTR_PRODUCT_OMNIBUS_PRICE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as T, ATTR_PRODUCT_BUTTON as N } from "../../constants/selectors.js";
|
|
2
|
+
import { spacer as $, DEFAULT_CARD_VISIBILITY as n } from "../utils.js";
|
|
3
3
|
import { horizontalElementRenderer as o } from "./elementRenderer.js";
|
|
4
|
-
const
|
|
4
|
+
const f = `
|
|
5
5
|
<tr class="recommendation-product-row">
|
|
6
6
|
<td style="padding: 0 5px;">
|
|
7
7
|
<table
|
|
@@ -9,8 +9,7 @@ const $ = `
|
|
|
9
9
|
cellpadding="0"
|
|
10
10
|
cellspacing="0"
|
|
11
11
|
border="0"
|
|
12
|
-
class="product-card-wrapper"
|
|
13
|
-
style="background-color: #f8f8f8;">
|
|
12
|
+
class="product-card-wrapper">
|
|
14
13
|
<tr>
|
|
15
14
|
{-{-PRODUCT_CONTENT-}-}
|
|
16
15
|
</tr>
|
|
@@ -19,51 +18,51 @@ const $ = `
|
|
|
19
18
|
</tr>
|
|
20
19
|
`;
|
|
21
20
|
function V(t) {
|
|
22
|
-
const i = o[
|
|
23
|
-
const I = p ? "" : ' style="display: none;"',
|
|
21
|
+
const i = o[E](t), l = n[s], r = n[c], R = n[a], C = n[d], m = n[T], e = (y, A, p) => {
|
|
22
|
+
const I = p ? "" : ' style="display: none;"', g = y.replace(/<tr>/, "").replace(/<\/tr>/, "");
|
|
24
23
|
return `<tr
|
|
25
24
|
class="recommendation-attribute-row"
|
|
26
25
|
data-attribute-type="${A}"
|
|
27
|
-
data-visibility="${p ? "1" : "0"}"${I}>${
|
|
28
|
-
},
|
|
26
|
+
data-visibility="${p ? "1" : "0"}"${I}>${g}</tr>`;
|
|
27
|
+
}, _ = e(
|
|
29
28
|
o[s](t),
|
|
30
29
|
s,
|
|
31
30
|
l
|
|
32
|
-
),
|
|
31
|
+
), b = e(
|
|
33
32
|
o[c](t),
|
|
34
33
|
c,
|
|
35
34
|
r
|
|
36
|
-
),
|
|
35
|
+
), O = e(
|
|
37
36
|
o[a](t),
|
|
38
37
|
a,
|
|
39
38
|
R
|
|
40
|
-
),
|
|
39
|
+
), P = e(
|
|
41
40
|
o[d](t),
|
|
42
41
|
d,
|
|
43
42
|
C
|
|
44
|
-
),
|
|
43
|
+
), u = e(
|
|
45
44
|
o[T](t),
|
|
46
45
|
T,
|
|
47
|
-
|
|
46
|
+
m
|
|
48
47
|
), D = `
|
|
49
48
|
<td class="product-info-cell" valign="middle" style="padding: 15px;">
|
|
50
49
|
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
|
|
51
50
|
<tbody>
|
|
52
|
-
${m}
|
|
53
51
|
${_}
|
|
54
|
-
${
|
|
52
|
+
${b}
|
|
55
53
|
${O}
|
|
56
54
|
${P}
|
|
55
|
+
${u}
|
|
57
56
|
</tbody>
|
|
58
57
|
</table>
|
|
59
58
|
</td>
|
|
60
|
-
`, U = o[
|
|
61
|
-
return
|
|
59
|
+
`, U = o[N](t), w = i + D + U;
|
|
60
|
+
return f.replace("{-{-PRODUCT_CONTENT-}-}", w);
|
|
62
61
|
}
|
|
63
62
|
function M(t) {
|
|
64
63
|
return t.map((i, l) => {
|
|
65
64
|
const r = V(i);
|
|
66
|
-
return l > 0 ?
|
|
65
|
+
return l > 0 ? $ + r : r;
|
|
67
66
|
}).join("");
|
|
68
67
|
}
|
|
69
68
|
export {
|
|
@@ -1,114 +1,57 @@
|
|
|
1
|
-
import { ATTR_PRODUCT_IMAGE as
|
|
2
|
-
const
|
|
1
|
+
import { ATTR_PRODUCT_IMAGE as r, ATTR_PRODUCT_NAME as l, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as a, ATTR_PRODUCT_OMNIBUS_PRICE as c, ATTR_PRODUCT_OMNIBUS_DISCOUNT as n, ATTR_PRODUCT_BUTTON as s } from "../constants/selectors.js";
|
|
2
|
+
const u = {
|
|
3
3
|
TITLE: "You May Also Like!"
|
|
4
|
-
},
|
|
5
|
-
t,
|
|
6
|
-
e,
|
|
7
|
-
o,
|
|
4
|
+
}, _ = [
|
|
8
5
|
r,
|
|
9
|
-
|
|
6
|
+
l,
|
|
7
|
+
o,
|
|
8
|
+
a,
|
|
10
9
|
c,
|
|
11
|
-
|
|
10
|
+
n,
|
|
11
|
+
s
|
|
12
12
|
], m = {
|
|
13
|
-
[t]: !0,
|
|
14
|
-
[e]: !0,
|
|
15
13
|
[r]: !0,
|
|
14
|
+
[l]: !0,
|
|
15
|
+
[a]: !0,
|
|
16
16
|
[o]: !0,
|
|
17
|
-
[i]: !1,
|
|
18
17
|
[c]: !1,
|
|
19
|
-
[
|
|
20
|
-
|
|
18
|
+
[n]: !1,
|
|
19
|
+
[s]: !0
|
|
20
|
+
}, d = `
|
|
21
21
|
<tr>
|
|
22
22
|
<td class="spacer" style="height: 10px;"></td>
|
|
23
23
|
</tr>
|
|
24
|
-
|
|
25
|
-
function
|
|
24
|
+
`, i = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
|
|
25
|
+
function t(e) {
|
|
26
|
+
return {
|
|
27
|
+
name: "Product Name",
|
|
28
|
+
image_url: i,
|
|
29
|
+
price: { USD: 18 },
|
|
30
|
+
original_price: { USD: 20 },
|
|
31
|
+
discount: { USD: 2 },
|
|
32
|
+
url: `https://example.com/product/${e}`,
|
|
33
|
+
item_id: e,
|
|
34
|
+
in_stock: 1,
|
|
35
|
+
locale: "en",
|
|
36
|
+
product_attributes: {},
|
|
37
|
+
category: []
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function b() {
|
|
26
41
|
return [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
url: "https://example.com/product/1",
|
|
34
|
-
item_id: "1",
|
|
35
|
-
in_stock: 1,
|
|
36
|
-
locale: "en",
|
|
37
|
-
product_attributes: {},
|
|
38
|
-
category: []
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
name: "Belt",
|
|
42
|
-
image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
|
|
43
|
-
price: { TRY: 55 },
|
|
44
|
-
original_price: { TRY: 65 },
|
|
45
|
-
discount: { TRY: 10 },
|
|
46
|
-
url: "https://example.com/product/2",
|
|
47
|
-
item_id: "2",
|
|
48
|
-
in_stock: 1,
|
|
49
|
-
locale: "tr",
|
|
50
|
-
product_attributes: {},
|
|
51
|
-
category: []
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
name: "Beanie",
|
|
55
|
-
image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/08/beanie-with-logo-1.jpg",
|
|
56
|
-
price: { TRY: 18 },
|
|
57
|
-
original_price: { TRY: 20 },
|
|
58
|
-
discount: { TRY: 2 },
|
|
59
|
-
url: "https://example.com/product/3",
|
|
60
|
-
item_id: "3",
|
|
61
|
-
in_stock: 1,
|
|
62
|
-
locale: "tr",
|
|
63
|
-
product_attributes: {},
|
|
64
|
-
category: []
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
name: "Album",
|
|
68
|
-
image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
|
|
69
|
-
price: { TRY: 15 },
|
|
70
|
-
original_price: { TRY: 15 },
|
|
71
|
-
discount: { TRY: 0 },
|
|
72
|
-
url: "https://example.com/product/4",
|
|
73
|
-
item_id: "4",
|
|
74
|
-
in_stock: 1,
|
|
75
|
-
locale: "tr",
|
|
76
|
-
product_attributes: {},
|
|
77
|
-
category: []
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
name: "Flying Ninja with a very long product name",
|
|
81
|
-
image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/09/belt-2.jpg",
|
|
82
|
-
price: { TRY: 12 },
|
|
83
|
-
original_price: { TRY: 15 },
|
|
84
|
-
discount: { TRY: 3 },
|
|
85
|
-
url: "https://example.com/product/5",
|
|
86
|
-
item_id: "5",
|
|
87
|
-
in_stock: 1,
|
|
88
|
-
locale: "tr",
|
|
89
|
-
product_attributes: {},
|
|
90
|
-
category: []
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
name: "Single",
|
|
94
|
-
image_url: "https://inshoppingcart.com/ins-html/wp-content/uploads/2018/12/poster_2_up.jpg",
|
|
95
|
-
price: { TRY: 22555 },
|
|
96
|
-
original_price: { TRY: 33989 },
|
|
97
|
-
discount: { TRY: 11434 },
|
|
98
|
-
url: "https://example.com/product/6",
|
|
99
|
-
item_id: "6",
|
|
100
|
-
in_stock: 1,
|
|
101
|
-
locale: "tr",
|
|
102
|
-
product_attributes: {},
|
|
103
|
-
category: []
|
|
104
|
-
}
|
|
42
|
+
t("1"),
|
|
43
|
+
t("2"),
|
|
44
|
+
t("3"),
|
|
45
|
+
t("4"),
|
|
46
|
+
t("5"),
|
|
47
|
+
t("6")
|
|
105
48
|
];
|
|
106
49
|
}
|
|
107
|
-
function
|
|
50
|
+
function R(e = "vertical") {
|
|
108
51
|
return `
|
|
109
52
|
<td
|
|
110
53
|
align="left"
|
|
111
|
-
class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20"${
|
|
54
|
+
class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20"${e === "horizontal" ? `
|
|
112
55
|
data-layout="horizontal"` : ""}>
|
|
113
56
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
114
57
|
<tr>
|
|
@@ -141,7 +84,7 @@ function g(l = "vertical") {
|
|
|
141
84
|
</table>
|
|
142
85
|
</td>
|
|
143
86
|
</tr>
|
|
144
|
-
${
|
|
87
|
+
${d}
|
|
145
88
|
<tr>
|
|
146
89
|
<td>
|
|
147
90
|
<table
|
|
@@ -164,10 +107,10 @@ function g(l = "vertical") {
|
|
|
164
107
|
`;
|
|
165
108
|
}
|
|
166
109
|
export {
|
|
167
|
-
|
|
168
|
-
|
|
110
|
+
u as DEFAULTS,
|
|
111
|
+
_ as DEFAULT_CARD_COMPOSITION,
|
|
169
112
|
m as DEFAULT_CARD_VISIBILITY,
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
113
|
+
R as createBlockTemplate,
|
|
114
|
+
b as getDefaultProducts,
|
|
115
|
+
d as spacer
|
|
173
116
|
};
|
|
@@ -1,8 +1,29 @@
|
|
|
1
|
-
import { RecommendationBlockId as
|
|
2
|
-
import { ATTR_PRODUCT_BUTTON as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { RecommendationBlockId as a } from "../../constants/blockIds.js";
|
|
2
|
+
import { ATTR_PRODUCT_BUTTON as b, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as h, ATTR_PRODUCT_OLD_PRICE as m, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
|
|
3
|
+
import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
|
|
4
|
+
import { formatPrice as $ } from "../../utils/priceFormatter.js";
|
|
5
|
+
const s = "0 5px", n = "attribute-cell";
|
|
6
|
+
function p() {
|
|
7
|
+
const t = _(), { currencySettings: e } = t.recommendationConfigs;
|
|
8
|
+
return {
|
|
9
|
+
code: e.value,
|
|
10
|
+
symbol: e.symbol,
|
|
11
|
+
alignment: e.alignment === "0" ? "before" : "after",
|
|
12
|
+
decimalCount: parseInt(e.decimalCount) || 2,
|
|
13
|
+
decimalSeparator: e.decimalSeparator,
|
|
14
|
+
thousandSeparator: e.thousandSeparator
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
function r(t, e = "price") {
|
|
18
|
+
const l = p(), o = t[e], c = (o == null ? void 0 : o[l.code]) ?? Object.values(o ?? {})[0] ?? 0;
|
|
19
|
+
return $({
|
|
20
|
+
price: c,
|
|
21
|
+
currency: l
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
const k = {
|
|
25
|
+
[x]: (t) => `
|
|
26
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
6
27
|
<table
|
|
7
28
|
class="product-card-segment"
|
|
8
29
|
width="100%"
|
|
@@ -14,11 +35,11 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
14
35
|
<td
|
|
15
36
|
class="esd-block-image product-image"
|
|
16
37
|
align="center"
|
|
17
|
-
esd-extension-block-id="${
|
|
18
|
-
<a target="_blank" href="${
|
|
38
|
+
esd-extension-block-id="${a.IMAGE}">
|
|
39
|
+
<a target="_blank" href="${t.url}">
|
|
19
40
|
<img
|
|
20
|
-
src="${
|
|
21
|
-
alt="${
|
|
41
|
+
src="${t.image_url}"
|
|
42
|
+
alt="${t.name}"
|
|
22
43
|
style="max-width: 100%; height: auto; margin: 0 auto; display: block;"
|
|
23
44
|
class="adapt-img">
|
|
24
45
|
</a>
|
|
@@ -27,8 +48,8 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
27
48
|
</table>
|
|
28
49
|
</td>
|
|
29
50
|
`,
|
|
30
|
-
[
|
|
31
|
-
<td class="${
|
|
51
|
+
[T]: (t) => `
|
|
52
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
32
53
|
<table
|
|
33
54
|
class="product-card-segment"
|
|
34
55
|
width="100%"
|
|
@@ -40,17 +61,17 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
40
61
|
<td
|
|
41
62
|
class="esd-block-text product-name es-p10t es-p10b es-p15l es-p15r"
|
|
42
63
|
align="center"
|
|
43
|
-
esd-extension-block-id="${
|
|
64
|
+
esd-extension-block-id="${a.NAME}">
|
|
44
65
|
<p path="1" contenteditable="false" style="font-size: 16px; color: #333333;">
|
|
45
|
-
<strong path="1,0">${
|
|
66
|
+
<strong path="1,0">${t.name}</strong>
|
|
46
67
|
</p>
|
|
47
68
|
</td>
|
|
48
69
|
</tr>
|
|
49
70
|
</table>
|
|
50
71
|
</td>
|
|
51
72
|
`,
|
|
52
|
-
[
|
|
53
|
-
<td class="${
|
|
73
|
+
[f]: (t) => `
|
|
74
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
54
75
|
<table
|
|
55
76
|
class="product-card-segment"
|
|
56
77
|
width="100%"
|
|
@@ -62,17 +83,17 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
62
83
|
<td
|
|
63
84
|
class="esd-block-text product-price es-p15l es-p15r"
|
|
64
85
|
align="center"
|
|
65
|
-
esd-extension-block-id="${
|
|
86
|
+
esd-extension-block-id="${a.PRICE}">
|
|
66
87
|
<p path="1" contenteditable="false" style="font-size: 16px; color: #333333;">
|
|
67
|
-
<strong path="1,0"
|
|
88
|
+
<strong path="1,0">${r(t, "price")}</strong>
|
|
68
89
|
</p>
|
|
69
90
|
</td>
|
|
70
91
|
</tr>
|
|
71
92
|
</table>
|
|
72
93
|
</td>
|
|
73
94
|
`,
|
|
74
|
-
[
|
|
75
|
-
<td class="${
|
|
95
|
+
[m]: (t) => `
|
|
96
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
76
97
|
<table
|
|
77
98
|
class="product-card-segment"
|
|
78
99
|
width="100%"
|
|
@@ -84,17 +105,17 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
84
105
|
<td
|
|
85
106
|
class="esd-block-text product-old-price es-p15l es-p15r"
|
|
86
107
|
align="center"
|
|
87
|
-
esd-extension-block-id="${
|
|
108
|
+
esd-extension-block-id="${a.OLD_PRICE}">
|
|
88
109
|
<p path="1" contenteditable="false" style="font-size: 14px; color: #999999;">
|
|
89
|
-
<s path="1,0"
|
|
110
|
+
<s path="1,0">${r(t, "original_price")}</s>
|
|
90
111
|
</p>
|
|
91
112
|
</td>
|
|
92
113
|
</tr>
|
|
93
114
|
</table>
|
|
94
115
|
</td>
|
|
95
116
|
`,
|
|
96
|
-
[
|
|
97
|
-
<td class="${
|
|
117
|
+
[h]: (t) => `
|
|
118
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
98
119
|
<table
|
|
99
120
|
class="product-card-segment"
|
|
100
121
|
width="100%"
|
|
@@ -108,10 +129,10 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
108
129
|
align="center"
|
|
109
130
|
data-text-before="Lowest 30-day price: "
|
|
110
131
|
data-text-after=""
|
|
111
|
-
esd-extension-block-id="${
|
|
132
|
+
esd-extension-block-id="${a.OMNIBUS_PRICE}">
|
|
112
133
|
<p path="1" contenteditable="false" style="font-size: 12px; color: #666666;">
|
|
113
134
|
<span class="omnibus-text-before">Lowest 30-day price: </span>
|
|
114
|
-
<span class="omnibus-price-value"
|
|
135
|
+
<span class="omnibus-price-value">${r(t, "original_price")}</span>
|
|
115
136
|
<span class="omnibus-text-after"></span>
|
|
116
137
|
</p>
|
|
117
138
|
</td>
|
|
@@ -119,8 +140,11 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
119
140
|
</table>
|
|
120
141
|
</td>
|
|
121
142
|
`,
|
|
122
|
-
[
|
|
123
|
-
|
|
143
|
+
[u]: (t) => {
|
|
144
|
+
var i, d;
|
|
145
|
+
const e = p(), l = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, o = ((d = t.price) == null ? void 0 : d[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, c = l > 0 ? Math.round((l - o) / l * 100) : 0, g = c > 0 ? `-${c}%` : "0%";
|
|
146
|
+
return `
|
|
147
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
124
148
|
<table
|
|
125
149
|
class="product-card-segment"
|
|
126
150
|
width="100%"
|
|
@@ -134,19 +158,20 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
134
158
|
align="center"
|
|
135
159
|
data-text-before=""
|
|
136
160
|
data-text-after=""
|
|
137
|
-
esd-extension-block-id="${
|
|
161
|
+
esd-extension-block-id="${a.OMNIBUS_DISCOUNT}">
|
|
138
162
|
<p path="1" contenteditable="false" style="font-size: 12px; color: #666666;">
|
|
139
163
|
<span class="omnibus-text-before"></span>
|
|
140
|
-
<span class="omnibus-discount-value"
|
|
164
|
+
<span class="omnibus-discount-value">${g}</span>
|
|
141
165
|
<span class="omnibus-text-after"></span>
|
|
142
166
|
</p>
|
|
143
167
|
</td>
|
|
144
168
|
</tr>
|
|
145
169
|
</table>
|
|
146
170
|
</td>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
171
|
+
`;
|
|
172
|
+
},
|
|
173
|
+
[b]: () => `
|
|
174
|
+
<td class="${n}" style="padding: ${s}; height: 100%;" valign="top">
|
|
150
175
|
<table
|
|
151
176
|
class="product-card-segment"
|
|
152
177
|
width="100%"
|
|
@@ -158,7 +183,7 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
158
183
|
<td
|
|
159
184
|
class="esd-block-button product-button es-p10t es-p10b"
|
|
160
185
|
align="center"
|
|
161
|
-
esd-extension-block-id="${
|
|
186
|
+
esd-extension-block-id="${a.BUTTON}">
|
|
162
187
|
<span
|
|
163
188
|
class="es-button-border"
|
|
164
189
|
style="
|
|
@@ -181,6 +206,6 @@ const e = "0 5px", s = "attribute-cell", b = {
|
|
|
181
206
|
`
|
|
182
207
|
};
|
|
183
208
|
export {
|
|
184
|
-
|
|
185
|
-
|
|
209
|
+
n as ATTRIBUTE_CELL_CLASS,
|
|
210
|
+
k as verticalElementRenderer
|
|
186
211
|
};
|