@useinsider/guido 3.27.1-beta.842075e → 3.27.1
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/useRecommendation.js +16 -8
- package/dist/config/compiler/recommendationCompilerRules.js +41 -29
- package/dist/enums/recommendation.js +5 -4
- package/dist/package.json.js +2 -2
- package/dist/src/composables/useRecommendation.d.ts +4 -0
- package/dist/src/enums/recommendation.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3,9 +3,9 @@ import { MinDeviceViewport as C, DefaultPadding as R } from "../enums/recommenda
|
|
|
3
3
|
import { useRecommendationExtensionStore as g } from "../extensions/Blocks/Recommendation/store/recommendation.js";
|
|
4
4
|
import { generateCompleteFilterQuery as b } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
|
|
5
5
|
import { getPartnerRecommendationParams as h } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
|
|
6
|
-
import { sanitizeProductIds as
|
|
7
|
-
import { useConfigStore as
|
|
8
|
-
const
|
|
6
|
+
import { sanitizeProductIds as x } from "../extensions/Blocks/Recommendation/utils/productIds.js";
|
|
7
|
+
import { useConfigStore as P } from "../stores/config.js";
|
|
8
|
+
const B = () => ({
|
|
9
9
|
calculateCardWidth: ({
|
|
10
10
|
mobileLeftPadding: s,
|
|
11
11
|
mobileRightPadding: c,
|
|
@@ -24,7 +24,11 @@ const M = () => ({
|
|
|
24
24
|
mobileLeftPadding: 0,
|
|
25
25
|
mobileRightPadding: 0,
|
|
26
26
|
cardsInRow: 2,
|
|
27
|
-
unresponsive: !1
|
|
27
|
+
unresponsive: !1,
|
|
28
|
+
priceBeforeTextValue: "",
|
|
29
|
+
priceAfterTextValue: "",
|
|
30
|
+
discountBeforeTextValue: "",
|
|
31
|
+
discountAfterTextValue: ""
|
|
28
32
|
};
|
|
29
33
|
const { recommendationConfigs: i } = a, e = i.orientation === "grid" ? "vertical" : "horizontal";
|
|
30
34
|
return {
|
|
@@ -33,12 +37,16 @@ const M = () => ({
|
|
|
33
37
|
mobileLeftPadding: 0,
|
|
34
38
|
mobileRightPadding: 0,
|
|
35
39
|
cardsInRow: i.cardsInRow,
|
|
36
|
-
unresponsive: i.unresponsive
|
|
40
|
+
unresponsive: i.unresponsive,
|
|
41
|
+
priceBeforeTextValue: "",
|
|
42
|
+
priceAfterTextValue: "",
|
|
43
|
+
discountBeforeTextValue: "",
|
|
44
|
+
discountAfterTextValue: ""
|
|
37
45
|
};
|
|
38
46
|
},
|
|
39
47
|
buildCampaignUrl: (s, c) => {
|
|
40
48
|
var l;
|
|
41
|
-
const o = g(), a =
|
|
49
|
+
const o = g(), a = P(), i = Number(s);
|
|
42
50
|
let e;
|
|
43
51
|
if (c)
|
|
44
52
|
e = c;
|
|
@@ -70,7 +78,7 @@ const M = () => ({
|
|
|
70
78
|
return delete r[s], o.recommendationCampaignUrls = r, "";
|
|
71
79
|
}
|
|
72
80
|
const t = new URLSearchParams();
|
|
73
|
-
t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", a.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", a.variationId), e.strategy === "manualMerchandising" ? t.set("productId",
|
|
81
|
+
t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", a.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", a.variationId), e.strategy === "manualMerchandising" ? t.set("productId", x(e.productIds)) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
|
|
74
82
|
const f = e.filters.filter((r) => r.isValid), m = b(f);
|
|
75
83
|
m && t.set("filter", m), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(h(a.partnerName, e.strategy)).forEach(([r, n]) => t.set(r, n));
|
|
76
84
|
const p = decodeURIComponent(t.toString()), u = `${I.RECOMMENDATION_API_URL}/v2/${d}?${p}`;
|
|
@@ -78,5 +86,5 @@ const M = () => ({
|
|
|
78
86
|
}
|
|
79
87
|
});
|
|
80
88
|
export {
|
|
81
|
-
|
|
89
|
+
B as useRecommendation
|
|
82
90
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useRecommendation as
|
|
2
|
-
import { DUMMY_IMAGE_MAPPINGS as
|
|
3
|
-
import { prepareRecommendationBlocks as
|
|
4
|
-
const
|
|
1
|
+
import { useRecommendation as N } from "../../composables/useRecommendation.js";
|
|
2
|
+
import { DUMMY_IMAGE_MAPPINGS as h, REGEX as d, VerticalOrientation as $, CSS as n, ATTRIBUTES as p, CONDITIONS as A, HTML as g } from "../../enums/recommendation.js";
|
|
3
|
+
import { prepareRecommendationBlocks as O } from "./utils/recommendationCompilerUtils.js";
|
|
4
|
+
const H = [
|
|
5
5
|
{
|
|
6
6
|
id: "replace-images-with-variable-names",
|
|
7
7
|
description: "Replacing dummy images with variable names in recommendation module",
|
|
8
8
|
type: "custom",
|
|
9
9
|
processor: (t) => {
|
|
10
10
|
let e = t;
|
|
11
|
-
return Object.entries(
|
|
11
|
+
return Object.entries(h).forEach(([, r]) => {
|
|
12
12
|
Object.entries(r).forEach(([o, i]) => {
|
|
13
13
|
e = e.replaceAll(i, `{{${o}}}`);
|
|
14
14
|
});
|
|
@@ -42,17 +42,17 @@ const f = [
|
|
|
42
42
|
description: "Adding recommendation unresponsive css",
|
|
43
43
|
type: "custom",
|
|
44
44
|
processor: (t) => {
|
|
45
|
-
const { calculateCardWidth: e, getRecommendationCampaignData: r } =
|
|
45
|
+
const { calculateCardWidth: e, getRecommendationCampaignData: r } = N();
|
|
46
46
|
let o = t;
|
|
47
|
-
const i = o.match(
|
|
47
|
+
const i = o.match(d.ID);
|
|
48
48
|
if (i) {
|
|
49
|
-
const
|
|
50
|
-
if (i.forEach((
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
}),
|
|
54
|
-
const
|
|
55
|
-
o = o.replace(n.REGULAR_NAME_HEIGHT, `${n.TRIMMED_NAME_HEIGHT} ${
|
|
49
|
+
const s = [];
|
|
50
|
+
if (i.forEach((c) => {
|
|
51
|
+
const m = /recommendation-id="(.*?)"/i.exec(c), E = m ? m[1].trim() : "", u = r(E);
|
|
52
|
+
u.textTrimming && u.orientation === $ && s.push(e(u));
|
|
53
|
+
}), s.length) {
|
|
54
|
+
const c = `width:${Math.min(...s)}px!important;`;
|
|
55
|
+
o = o.replace(n.REGULAR_NAME_HEIGHT, `${n.TRIMMED_NAME_HEIGHT} ${c} ${n.ELLIPSIS}`).replace(n.REGULAR_NAME_CONTAINER_HEIGHT, n.TRIMMED_NAME_CONTAINER_CSS).replace(n.RESPONSIVE_NAME_SIZE, `${n.RESPONSIVE_NAME_HEIGHT} ${c} ${n.ELLIPSIS}`).replace(n.RESPONSIVE_NAME_CONTAINER_HEIGHT, n.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
return o;
|
|
@@ -63,24 +63,36 @@ const f = [
|
|
|
63
63
|
id: "prepare-recommendations",
|
|
64
64
|
description: "Replacing product data with template variables in recommendation blocks",
|
|
65
65
|
type: "custom",
|
|
66
|
-
processor: (t) =>
|
|
66
|
+
processor: (t) => O(t),
|
|
67
67
|
priority: 48
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
id: "add-discount-conditions",
|
|
71
71
|
description: "Adding discount conditions to the recommendation block",
|
|
72
72
|
type: "custom",
|
|
73
|
-
processor: (t) =>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
73
|
+
processor: (t) => {
|
|
74
|
+
let e = t;
|
|
75
|
+
const r = e.match(d.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: o } = N();
|
|
76
|
+
return r !== null && r.forEach((i) => {
|
|
77
|
+
const s = i.match(d.CUSTOM_FIELD);
|
|
78
|
+
if (!s)
|
|
79
|
+
return;
|
|
80
|
+
const [c] = s, m = c.match(d.CUSTOM_FIELD_INDEXES_PART), E = c.match(d.CUSTOM_FIELD_NAME_PART), u = i.match(d.ATTRIBUTE_PARAGRAPH_START_TAG);
|
|
81
|
+
if (!m || !E || !u)
|
|
82
|
+
return;
|
|
83
|
+
const [T] = m, [I] = E, [_] = u, b = I.substring(1, I.length - 2), S = _.match(d.COMPOSITION) !== null;
|
|
84
|
+
let a = c;
|
|
85
|
+
if (S) {
|
|
86
|
+
const y = T.substring(2, T.length - 3), l = o(y);
|
|
87
|
+
b === p.OMNIBUS_PRICE && (l.priceBeforeTextValue && (a = `${l.priceBeforeTextValue}${a}`), l.priceAfterTextValue && (a = `${a}${l.priceAfterTextValue}`)), b === p.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (a = `${l.discountBeforeTextValue}${a}`), l.discountAfterTextValue && (a = `${a}${l.discountAfterTextValue}`));
|
|
88
|
+
}
|
|
89
|
+
const R = T.substring(2);
|
|
90
|
+
let f = "";
|
|
91
|
+
b in A.IF && (f = A.IF[b].replaceAll(`{${p.DISCOUNT}}`, `${R}${p.DISCOUNT}`).replaceAll(`{${p.OMNIBUS_DISCOUNT}}`, `${R}${p.OMNIBUS_DISCOUNT}`).replaceAll(`{${p.OMNIBUS_PRICE}}`, `${R}${p.OMNIBUS_PRICE}`));
|
|
92
|
+
const M = `${_}${a}${g.PARAGRAPH_END_TAG}`, C = `${f}${S ? M : i}${A.ELSE}${_}${g.PARAGRAPH_END_TAG}${A.END_IF}`;
|
|
93
|
+
e = e.replace(i, C);
|
|
94
|
+
}), e;
|
|
95
|
+
},
|
|
84
96
|
priority: 53
|
|
85
97
|
},
|
|
86
98
|
{
|
|
@@ -135,8 +147,8 @@ const f = [
|
|
|
135
147
|
), e = e.replace(
|
|
136
148
|
/@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
|
|
137
149
|
(r, o) => {
|
|
138
|
-
const i = o.match(/[^{}]+\{[^{}]*\}/g) || [],
|
|
139
|
-
return i.every((
|
|
150
|
+
const i = o.match(/[^{}]+\{[^{}]*\}/g) || [], s = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
|
|
151
|
+
return i.every((m) => s.test(m)) ? "" : r;
|
|
140
152
|
}
|
|
141
153
|
)), e;
|
|
142
154
|
},
|
|
@@ -196,5 +208,5 @@ const f = [
|
|
|
196
208
|
}
|
|
197
209
|
];
|
|
198
210
|
export {
|
|
199
|
-
|
|
211
|
+
H as recommendationCompilerRules
|
|
200
212
|
};
|
|
@@ -27,12 +27,13 @@ const e = 20, t = 320, s = "vertical", m = {
|
|
|
27
27
|
ID: /recommendation-id="(.*?)"/gi,
|
|
28
28
|
ATTRIBUTE_PARAGRAPH: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>[\S\s]*?<\/p>/gm,
|
|
29
29
|
ATTRIBUTE_PARAGRAPH_START_TAG: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>/gm,
|
|
30
|
+
COMPOSITION: /composition="true"/gm,
|
|
30
31
|
CUSTOM_FIELD: /{{(?:reco_)?[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
|
|
31
32
|
CUSTOM_FIELD_INDEXES_PART: /{{(?:reco_)?[0-9]+_[0-8]_/gm,
|
|
32
33
|
CUSTOM_FIELD_NAME_PART: /_(discount|omnibus_discount|omnibus_price)}}/gm
|
|
33
|
-
}, a = {
|
|
34
|
-
PARAGRAPH_END_TAG: "</p>"
|
|
35
34
|
}, o = {
|
|
35
|
+
PARAGRAPH_END_TAG: "</p>"
|
|
36
|
+
}, a = {
|
|
36
37
|
REGULAR_NAME_HEIGHT: ".ext-product-name.ins-vertical p { height:90px!important;",
|
|
37
38
|
TRIMMED_NAME_HEIGHT: ".ext-product-name.ins-vertical p { height:18px!important;",
|
|
38
39
|
ELLIPSIS: "text-overflow:ellipsis!important; white-space:nowrap!important;",
|
|
@@ -46,10 +47,10 @@ const e = 20, t = 320, s = "vertical", m = {
|
|
|
46
47
|
export {
|
|
47
48
|
i as ATTRIBUTES,
|
|
48
49
|
_ as CONDITIONS,
|
|
49
|
-
|
|
50
|
+
a as CSS,
|
|
50
51
|
m as DUMMY_IMAGE_MAPPINGS,
|
|
51
52
|
e as DefaultPadding,
|
|
52
|
-
|
|
53
|
+
o as HTML,
|
|
53
54
|
t as MinDeviceViewport,
|
|
54
55
|
n as REGEX,
|
|
55
56
|
s as VerticalOrientation
|
package/dist/package.json.js
CHANGED
|
@@ -8,6 +8,10 @@ type CardWidthParams = {
|
|
|
8
8
|
interface CampaignData extends CardWidthParams {
|
|
9
9
|
textTrimming: boolean;
|
|
10
10
|
orientation: string;
|
|
11
|
+
priceBeforeTextValue: string;
|
|
12
|
+
priceAfterTextValue: string;
|
|
13
|
+
discountBeforeTextValue: string;
|
|
14
|
+
discountAfterTextValue: string;
|
|
11
15
|
}
|
|
12
16
|
export declare const useRecommendation: () => {
|
|
13
17
|
calculateCardWidth: ({ mobileLeftPadding, mobileRightPadding, cardsInRow, unresponsive, }: CardWidthParams) => number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useinsider/guido",
|
|
3
|
-
"version": "3.27.1
|
|
3
|
+
"version": "3.27.1",
|
|
4
4
|
"description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
|
|
5
5
|
"main": "./dist/guido.umd.cjs",
|
|
6
6
|
"module": "./dist/library.js",
|