@nuskin/product-components 3.18.0-td-341.1 → 4.0.0-cx15-11969.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/.releaserc +1 -1
- package/components/NsProductCarousel.vue +0 -38
- package/components/NsProductList.vue +4 -21
- package/docs/CHANGELOG.md +1 -1
- package/index.js +1 -5
- package/mixins/NsProductMixin.js +7 -47
- package/package.json +5 -9
- package/services/NsProductAppService.js +5 -29
- package/services/NsProductDataService.js +4 -5
- package/assets/imageplaceholder.svg +0 -39
- package/components/NsProductRecsCarousel.vue +0 -155
- package/components/NuHomeCloneProductCarousel/Carousel.vue +0 -209
- package/components/NuHomeCloneProductCarousel/CarouselChevron.vue +0 -93
- package/components/NuHomeCloneProductCarousel/Loader.vue +0 -72
- package/components/NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue +0 -1100
- package/components/NuHomeCloneProductCarousel/Price.vue +0 -147
- package/mixins/globalHelper.js +0 -66
- package/models/product.js +0 -140
- package/services/NsProductContentService.js +0 -147
- package/services/NsProductRecommendationClient.js +0 -66
package/.releaserc
CHANGED
|
@@ -31,9 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
<script>
|
|
33
33
|
import { PopularProductsService } from "@nuskin/ns-product";
|
|
34
|
-
import { getRecommendations } from "@nuskin/product-recommendation";
|
|
35
34
|
import { NsCarousel } from "@nuskin/design-components";
|
|
36
|
-
import { CartService } from "@nuskin/ns-shop";
|
|
37
35
|
|
|
38
36
|
import NsProductCard from "./NsProductCard.vue";
|
|
39
37
|
|
|
@@ -146,9 +144,6 @@ export default {
|
|
|
146
144
|
},
|
|
147
145
|
setSkusByType(type) {
|
|
148
146
|
switch (type) {
|
|
149
|
-
case "recommended":
|
|
150
|
-
this.setSkusWithRecommendedProducts();
|
|
151
|
-
break;
|
|
152
147
|
case "popular":
|
|
153
148
|
this.setSkusWithPopularProducts();
|
|
154
149
|
break;
|
|
@@ -156,39 +151,6 @@ export default {
|
|
|
156
151
|
this.localSkus = this.skus;
|
|
157
152
|
}
|
|
158
153
|
},
|
|
159
|
-
async setSkusWithRecommendedProducts() {
|
|
160
|
-
try {
|
|
161
|
-
let options = {};
|
|
162
|
-
let unique = [];
|
|
163
|
-
let cartSkus = [];
|
|
164
|
-
|
|
165
|
-
if (CartService.getItemData().length > 0) {
|
|
166
|
-
cartSkus = CartService.getItemData().map(item => item.sku);
|
|
167
|
-
options.productSkus = cartSkus;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
let recommendedProducts = await getRecommendations(options);
|
|
171
|
-
if (recommendedProducts) {
|
|
172
|
-
recommendedProducts.sort((a, b) => (a.type > b.type ? 1 : -1));
|
|
173
|
-
|
|
174
|
-
unique = Array.from(
|
|
175
|
-
new Set(recommendedProducts.map(item => item.sku))
|
|
176
|
-
)
|
|
177
|
-
.map(sku => {
|
|
178
|
-
return {
|
|
179
|
-
sku: sku,
|
|
180
|
-
type: recommendedProducts.find(item => item.sku === sku).type
|
|
181
|
-
};
|
|
182
|
-
})
|
|
183
|
-
.filter(item => !cartSkus.includes(item.sku));
|
|
184
|
-
|
|
185
|
-
this.localSkus = unique.map(recommendation => recommendation.sku);
|
|
186
|
-
}
|
|
187
|
-
} catch (err) {
|
|
188
|
-
console.log(err);
|
|
189
|
-
this.localSkus = [];
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
154
|
async setSkusWithPopularProducts() {
|
|
193
155
|
const popularProducts = await PopularProductsService.getPopularProducts();
|
|
194
156
|
if (popularProducts) {
|
|
@@ -46,12 +46,10 @@
|
|
|
46
46
|
|
|
47
47
|
<script>
|
|
48
48
|
import { NsExpressiveLink, NsIcon, NsSpinner } from "@nuskin/design-components";
|
|
49
|
-
import { StringService
|
|
49
|
+
import { StringService } from "@nuskin/ns-util";
|
|
50
50
|
import { fromJsonString } from "@nuskin/ns-common-lib";
|
|
51
|
-
import { getConfiguration } from "@nuskin/configuration-sdk";
|
|
52
51
|
|
|
53
52
|
import NsProductCard from "./NsProductCard.vue";
|
|
54
|
-
import { isEnabled } from "@nuskin/ns-feature-flags";
|
|
55
53
|
|
|
56
54
|
/**
|
|
57
55
|
* NsProductList
|
|
@@ -192,24 +190,9 @@ export default {
|
|
|
192
190
|
await this.$nextTick();
|
|
193
191
|
|
|
194
192
|
try {
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
configs &&
|
|
199
|
-
configs.Mysite &&
|
|
200
|
-
configs.Mysite.useCSResources &&
|
|
201
|
-
Array.isArray(configs.Mysite.useCSResources)
|
|
202
|
-
) {
|
|
203
|
-
useCSResources = configs.Mysite.useCSResources.includes(
|
|
204
|
-
this.runConfig.country
|
|
205
|
-
);
|
|
206
|
-
}
|
|
207
|
-
let commonStrings = {};
|
|
208
|
-
if (useCSResources && isEnabled("td_341")) {
|
|
209
|
-
commonStrings = await csStringService.getStrings(commonStringKeys);
|
|
210
|
-
} else {
|
|
211
|
-
commonStrings = await StringService.getStrings(commonStringKeys);
|
|
212
|
-
}
|
|
193
|
+
const commonStrings = await StringService.getStrings(
|
|
194
|
+
commonStringKeys
|
|
195
|
+
);
|
|
213
196
|
if (commonStrings && commonStrings.loadMore) {
|
|
214
197
|
this.loadMoreText = commonStrings.loadMore;
|
|
215
198
|
}
|
package/docs/CHANGELOG.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
# [
|
|
1
|
+
# [4.0.0-cx15-11969.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.17.22...v4.0.0-cx15-11969.1) (2025-03-11)
|
package/index.js
CHANGED
|
@@ -34,8 +34,6 @@ import NsProductListSortable from "./components/NsProductListSortable.vue";
|
|
|
34
34
|
import NsProductLine from "./components/NsProductLine.vue";
|
|
35
35
|
import NsProductOffer from "./components/NsProductOffer.vue";
|
|
36
36
|
import NsProductQuantitySelector from "./components/NsProductQuantitySelector.vue";
|
|
37
|
-
import NuHomeCloneProductCarousel from "./components/NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue";
|
|
38
|
-
import NsProductRecsCarousel from "./components/NsProductRecsCarousel.vue";
|
|
39
37
|
|
|
40
38
|
export {
|
|
41
39
|
// Services
|
|
@@ -56,7 +54,5 @@ export {
|
|
|
56
54
|
NsProductListSortable,
|
|
57
55
|
NsProductLine,
|
|
58
56
|
NsProductOffer,
|
|
59
|
-
NsProductQuantitySelector
|
|
60
|
-
NuHomeCloneProductCarousel,
|
|
61
|
-
NsProductRecsCarousel
|
|
57
|
+
NsProductQuantitySelector
|
|
62
58
|
};
|
package/mixins/NsProductMixin.js
CHANGED
|
@@ -6,7 +6,6 @@ import {
|
|
|
6
6
|
import {
|
|
7
7
|
events,
|
|
8
8
|
StringService,
|
|
9
|
-
csStringService,
|
|
10
9
|
util,
|
|
11
10
|
SitesSessionStorageService,
|
|
12
11
|
ShoppingContext,
|
|
@@ -25,7 +24,6 @@ import {
|
|
|
25
24
|
Product as ShopProduct,
|
|
26
25
|
EquinoxCartService
|
|
27
26
|
} from "@nuskin/ns-shop";
|
|
28
|
-
import { isEnabled } from "@nuskin/ns-feature-flags";
|
|
29
27
|
import QualificationService from "@nuskin/exclusive-offer-sdk";
|
|
30
28
|
import webLoyalty from "@nuskin/ns-loyalty-web";
|
|
31
29
|
import { getProp, getFullUrl } from "@nuskin/ns-common-lib";
|
|
@@ -474,44 +472,8 @@ const NsProductMixin = {
|
|
|
474
472
|
this.loyaltyStatusAndLinks.productOptedInRedeemNotEarn =
|
|
475
473
|
"Save with Nu Skin Rewards";
|
|
476
474
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
{
|
|
480
|
-
key: "productDisplayOptedinMessage",
|
|
481
|
-
dflt: "{earnPercentage} Nu Skin enJoy Rewards Available!"
|
|
482
|
-
},
|
|
483
|
-
{ key: "productOptedInEarnNotRedeem", dflt: "" },
|
|
484
|
-
{
|
|
485
|
-
key: "productOptedInRedeemNotEarn",
|
|
486
|
-
dflt:
|
|
487
|
-
"This product does not earn rewards points but is available to be redeemed for rewards points."
|
|
488
|
-
}
|
|
489
|
-
];
|
|
490
|
-
|
|
491
|
-
try {
|
|
492
|
-
const configs = await getConfiguration(["Mysite"]);
|
|
493
|
-
let useCSResources = false;
|
|
494
|
-
if (
|
|
495
|
-
configs &&
|
|
496
|
-
configs.Mysite &&
|
|
497
|
-
configs.Mysite.useCSResources &&
|
|
498
|
-
Array.isArray(configs.Mysite.useCSResources)
|
|
499
|
-
) {
|
|
500
|
-
useCSResources = configs.Mysite.useCSResources.includes(
|
|
501
|
-
this.runConfig.country
|
|
502
|
-
);
|
|
503
|
-
}
|
|
504
|
-
let loyalityStringsContent = {};
|
|
505
|
-
if (useCSResources && isEnabled("td_341")) {
|
|
506
|
-
loyalityStringsContent = await csStringService.getStrings(
|
|
507
|
-
commonStringKeys
|
|
508
|
-
);
|
|
509
|
-
} else {
|
|
510
|
-
loyalityStringsContent = await StringService.getStrings(
|
|
511
|
-
commonStringKeys
|
|
512
|
-
);
|
|
513
|
-
}
|
|
514
|
-
this.loyaltyStrings = loyalityStringsContent;
|
|
475
|
+
StringService.getApplicationStrings("loyalty").then(content => {
|
|
476
|
+
this.loyaltyStrings = content;
|
|
515
477
|
// Link message to show to non-opted in users
|
|
516
478
|
if (this.loyaltyStrings.productDisplayNotOptedinMessage) {
|
|
517
479
|
this.loyaltyStatusAndLinks.landingPageLinkMessage = this.loyaltyStrings.productDisplayNotOptedinMessage;
|
|
@@ -553,14 +515,12 @@ const NsProductMixin = {
|
|
|
553
515
|
);
|
|
554
516
|
this.userLoyalty = loyaltyData;
|
|
555
517
|
}
|
|
518
|
+
});
|
|
556
519
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
} catch (err) {
|
|
562
|
-
console.warn("Unable to retrieve loyalty strings translations.", err);
|
|
563
|
-
}
|
|
520
|
+
this.loyaltyStatusAndLinks.landingPage = this.localeReplace(
|
|
521
|
+
this.loyaltyStatusAndLinks.dashboardPage
|
|
522
|
+
);
|
|
523
|
+
this.loyaltyStatusAndLinks.siteUrl = this.siteUrl;
|
|
564
524
|
}
|
|
565
525
|
},
|
|
566
526
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuskin/product-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-cx15-11969.1",
|
|
4
4
|
"description": "Nu Skin Product Components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -23,20 +23,16 @@
|
|
|
23
23
|
"homepage": "https://code.tls.nuskin.io/ns-am/ux/product-components/-/blob/master/README.md",
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@mdi/font": "3.9.97",
|
|
26
|
-
"@ns/ns-contentstack-lib": "^2.0.4",
|
|
27
26
|
"@nuskin/design-components": "6.34.0",
|
|
28
27
|
"@nuskin/ns-common-lib": "1.4.7",
|
|
29
28
|
"@nuskin/ns-core-styles": "2.11.2",
|
|
30
|
-
"@nuskin/ns-icon": "^2.12.0",
|
|
31
29
|
"@nuskin/ns-loyalty-web": "1.5.6",
|
|
32
|
-
"@nuskin/ns-product-lib": "2.19.
|
|
33
|
-
"@nuskin/ns-shop": "7.
|
|
34
|
-
"
|
|
35
|
-
"axios": "1.6.7",
|
|
30
|
+
"@nuskin/ns-product-lib": "2.19.7",
|
|
31
|
+
"@nuskin/ns-shop": "7.1.3",
|
|
32
|
+
"axios": "1.8.1",
|
|
36
33
|
"lodash": "4.17.21",
|
|
37
34
|
"sass": "^1.19.0",
|
|
38
35
|
"sass-loader": "^8.0.2",
|
|
39
|
-
"swiper": "8.4.7",
|
|
40
36
|
"vue": "2.6.11",
|
|
41
37
|
"vue-mq": "^1.0.1",
|
|
42
38
|
"vue-plugin-load-script": "1.3.2"
|
|
@@ -60,7 +56,7 @@
|
|
|
60
56
|
"@nuskin/nuskinjquery": "2.3.1",
|
|
61
57
|
"ansi-html": "0.0.8",
|
|
62
58
|
"async": "2.6.4",
|
|
63
|
-
"axios": "1.
|
|
59
|
+
"axios": "1.8.1",
|
|
64
60
|
"decode-uri-component": "0.2.1",
|
|
65
61
|
"eventsource/eventsource": "2.0.2",
|
|
66
62
|
"fast-xml-parser": "4.2.5",
|
|
@@ -3,11 +3,8 @@ import Vue from "vue";
|
|
|
3
3
|
import {
|
|
4
4
|
RunConfigService,
|
|
5
5
|
ConfigService,
|
|
6
|
-
StringService
|
|
7
|
-
csStringService
|
|
6
|
+
StringService
|
|
8
7
|
} from "@nuskin/ns-util";
|
|
9
|
-
import { getConfiguration } from "@nuskin/configuration-sdk";
|
|
10
|
-
import { isEnabled } from "@nuskin/ns-feature-flags";
|
|
11
8
|
|
|
12
9
|
import { isNullOrEmpty } from "@nuskin/ns-common-lib";
|
|
13
10
|
|
|
@@ -180,31 +177,10 @@ if (!NsProductAppService) {
|
|
|
180
177
|
];
|
|
181
178
|
|
|
182
179
|
try {
|
|
183
|
-
const
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
configs.Mysite &&
|
|
188
|
-
configs.Mysite.useCSResources &&
|
|
189
|
-
Array.isArray(configs.Mysite.useCSResources)
|
|
190
|
-
) {
|
|
191
|
-
useCSResources = configs.Mysite.useCSResources.includes(
|
|
192
|
-
this.runConfig.country
|
|
193
|
-
);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
let commonStrings = {};
|
|
197
|
-
if (useCSResources && isEnabled("td_341")) {
|
|
198
|
-
commonStrings = await csStringService.getStrings(
|
|
199
|
-
commonStringKeys,
|
|
200
|
-
this.locale
|
|
201
|
-
);
|
|
202
|
-
} else {
|
|
203
|
-
commonStrings = await StringService.getStrings(
|
|
204
|
-
commonStringKeys,
|
|
205
|
-
this.locale
|
|
206
|
-
);
|
|
207
|
-
}
|
|
180
|
+
const commonStrings = await StringService.getStrings(
|
|
181
|
+
commonStringKeys,
|
|
182
|
+
this.locale
|
|
183
|
+
);
|
|
208
184
|
|
|
209
185
|
this.appendTranslations(commonStrings);
|
|
210
186
|
} catch (err) {
|
|
@@ -9,10 +9,7 @@ import { isNullOrEmpty } from "@nuskin/ns-common-lib";
|
|
|
9
9
|
import { ProductDataService } from "@nuskin/ns-product";
|
|
10
10
|
import { Product, PriceType } from "@nuskin/ns-product-lib";
|
|
11
11
|
import { equinoxLocalStorage } from "@nuskin/ns-util";
|
|
12
|
-
import {
|
|
13
|
-
getConfiguration,
|
|
14
|
-
getCachedConfiguration
|
|
15
|
-
} from "@nuskin/configuration-sdk";
|
|
12
|
+
import { getConfiguration } from "@nuskin/configuration-sdk";
|
|
16
13
|
|
|
17
14
|
class ProductDataBatch {
|
|
18
15
|
constructor(id, skus) {
|
|
@@ -272,7 +269,9 @@ if (!NsProductDataService) {
|
|
|
272
269
|
return;
|
|
273
270
|
}
|
|
274
271
|
|
|
275
|
-
const equinoxMarketConfig =
|
|
272
|
+
const equinoxMarketConfig = (
|
|
273
|
+
await getConfiguration(["Equinox_Markets"])
|
|
274
|
+
).Equinox_Markets;
|
|
276
275
|
|
|
277
276
|
// product data response has products
|
|
278
277
|
if (productData.count && productData.products.length) {
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<svg id="Layer_1"
|
|
2
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
|
|
3
|
-
<style>.st0{fill:#fff}.st1{fill:#dadbdb}.st2{fill:#ececec}.st3{fill:#dadbda}</style>
|
|
4
|
-
<path class="st0" d="M67.87 136.71V96.66h62.34c3.58 0 6.5 2.92 6.5 6.5v33.55H67.87z"/>
|
|
5
|
-
<path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7z"/>
|
|
6
|
-
<path class="st0" d="M67.87 93.96V79.5h65.34c1.93 0 3.5 1.57 3.5 3.5v10.96H67.87z"/>
|
|
7
|
-
<path class="st1" d="M133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
|
|
8
|
-
<path class="st0" d="M67.87 136.71V96.66h62.34c3.58 0 6.5 2.92 6.5 6.5v33.55H67.87z"/>
|
|
9
|
-
<path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7z"/>
|
|
10
|
-
<path class="st0" d="M67.87 93.96V79.5h65.34c1.93 0 3.5 1.57 3.5 3.5v10.96H67.87z"/>
|
|
11
|
-
<path class="st1" d="M133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
|
|
12
|
-
<path class="st2" d="M129.63 100.03H67.37v37.18h65.66v-33.78c0-1.87-1.52-3.4-3.4-3.4zM131.33 82.87H67.37v11.58h65.66v-9.88c0-.94-.76-1.7-1.7-1.7z"/>
|
|
13
|
-
<path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7zM133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
|
|
14
|
-
<path class="st3" d="M129.63 100.03H89.07v9.34h43.96v-5.94c0-1.87-1.52-3.4-3.4-3.4z"/>
|
|
15
|
-
<path class="st0" d="M76.37 136.71V124.5h27.56a2.5 2.5 0 0 1 2.5 2.5v9.71H76.37z"/>
|
|
16
|
-
<path class="st1" d="M103.93 125c1.1 0 2 .9 2 2v9.21H76.87V125h27.06m0-1H75.87v13.21h31.06V127c0-1.66-1.34-3-3-3z"/>
|
|
17
|
-
<path class="st0" d="M76.33 121.8l-7.06-86.11v-8.4h43.99v8.44l-7.07 86.07z"/>
|
|
18
|
-
<path class="st1" d="M112.76 27.79v7.9l-7.02 85.6H76.79l-7.02-85.6v-7.9h42.99m1-1H68.77v8.94l7.1 86.56h30.78l7.1-86.56v-8.94h.01z"/>
|
|
19
|
-
<path class="st2" d="M109.58 30.67H68.77v5.06l7.1 86.57h26.92l6.79-82.69zM101.9 127.87H75.87v9.34h26.88v-8.49a.85.85 0 0 0-.85-.85z"/>
|
|
20
|
-
<path class="st1" d="M103.93 125c1.1 0 2 .9 2 2v9.21H76.87V125h27.06m0-1H75.87v13.21h31.06V127c0-1.66-1.34-3-3-3z"/>
|
|
21
|
-
<path class="st3" d="M109.58 30.67H68.77v5.06l.35 4.27h40.42l.04-.39z"/>
|
|
22
|
-
<path class="st1" d="M112.76 27.79v7.9l-7.02 85.6H76.79l-7.02-85.6v-7.9h42.99m1-1H68.77v8.94l7.1 86.56h30.78l7.1-86.56v-8.94h.01z"/>
|
|
23
|
-
<g>
|
|
24
|
-
<path class="st0" d="M27.5 136.71V99.07c0-4.41-.07-8.1-.13-11.36-.35-19.29-.35-19.29 16.62-29.61.15-.09.24-.25.24-.43V43.4c0-1.13.92-2.05 2.05-2.05h14.98c1.13 0 2.05.92 2.05 2.05v14.28c0 .18.1.35.26.44 16.61 9.04 16.6 9.98 16.49 34.13-.01 2.1-.02 4.37-.02 6.83v37.64H27.5z"/>
|
|
25
|
-
<path class="st1" d="M61.26 41.85c.85 0 1.55.7 1.55 1.55v14.28c0 .37.2.7.52.88 8.46 4.61 12.37 7.06 14.32 11.2 2 4.27 1.97 10.74 1.92 22.48-.01 2.1-.02 4.37-.02 6.83v37.14H28V99.07c0-4.41-.07-8.11-.13-11.37-.35-19-.35-19 16.38-29.17.3-.18.48-.51.48-.85V43.4c0-.85.7-1.55 1.55-1.55h14.98m0-1H46.28c-1.41 0-2.55 1.14-2.55 2.55v14.28C23.65 69.88 27 68.21 27 99.07v38.14h53.55V99.07c0-30.86 1.6-31.42-16.73-41.4V43.4a2.563 2.563 0 0 0-2.56-2.55z"/>
|
|
26
|
-
</g>
|
|
27
|
-
<g>
|
|
28
|
-
<path class="st2" d="M59.63 59.85V47.27c0-1.41-1.14-2.55-2.55-2.55H43.73v12.95C23.65 69.88 27 68.21 27 99.07v38.14h49.37v-35.96c0-30.86 1.59-31.42-16.74-41.4z"/>
|
|
29
|
-
</g>
|
|
30
|
-
<g>
|
|
31
|
-
<path class="st3" d="M27 124h49.37v13.21H27z"/>
|
|
32
|
-
</g>
|
|
33
|
-
<g>
|
|
34
|
-
<path class="st1" d="M61.26 41.85c.85 0 1.55.7 1.55 1.55v14.28c0 .37.2.7.52.88 8.46 4.61 12.37 7.06 14.32 11.2 2 4.27 1.97 10.74 1.92 22.48-.01 2.1-.02 4.37-.02 6.83v37.14H28V99.07c0-4.41-.07-8.11-.13-11.37-.35-19-.35-19 16.38-29.17.3-.18.48-.51.48-.85V43.4c0-.85.7-1.55 1.55-1.55h14.98m0-1H46.28c-1.41 0-2.55 1.14-2.55 2.55v14.28C23.65 69.88 27 68.21 27 99.07v38.14h53.55V99.07c0-30.86 1.6-31.42-16.73-41.4V43.4a2.563 2.563 0 0 0-2.56-2.55z"/>
|
|
35
|
-
</g>
|
|
36
|
-
<circle class="st0" cx="53.69" cy="87.41" r="8.41"/>
|
|
37
|
-
<circle class="st0" cx="91.26" cy="56.88" r="8.41"/>
|
|
38
|
-
<path fill="none" d="M0 0h164v164H0z"/>
|
|
39
|
-
</svg>
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<NuHomeCloneProductCarousel
|
|
4
|
-
:title="title"
|
|
5
|
-
:product-ids="productIds"
|
|
6
|
-
:country="country"
|
|
7
|
-
:language="language"
|
|
8
|
-
:force-loading="loading"
|
|
9
|
-
referrer="product_recommendation_carousel"
|
|
10
|
-
@click-pdp="onClickPdp"
|
|
11
|
-
@click-atc="onClickAddToCart"
|
|
12
|
-
/>
|
|
13
|
-
</div>
|
|
14
|
-
</template>
|
|
15
|
-
|
|
16
|
-
<script>
|
|
17
|
-
import { CartService } from "@nuskin/ns-shop";
|
|
18
|
-
import { events } from "@nuskin/ns-util";
|
|
19
|
-
import {
|
|
20
|
-
getPersonalizedRecommendations,
|
|
21
|
-
getRelatedProducts
|
|
22
|
-
} from "../services/NsProductRecommendationClient";
|
|
23
|
-
import NuHomeCloneProductCarousel from "./NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue";
|
|
24
|
-
|
|
25
|
-
export default {
|
|
26
|
-
name: "NsProductRecsCarousel",
|
|
27
|
-
components: { NuHomeCloneProductCarousel },
|
|
28
|
-
props: {
|
|
29
|
-
title: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: ""
|
|
32
|
-
},
|
|
33
|
-
productId: {
|
|
34
|
-
type: String,
|
|
35
|
-
default: ""
|
|
36
|
-
},
|
|
37
|
-
language: {
|
|
38
|
-
type: String,
|
|
39
|
-
required: true
|
|
40
|
-
},
|
|
41
|
-
country: {
|
|
42
|
-
type: String,
|
|
43
|
-
required: true
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
data() {
|
|
47
|
-
return {
|
|
48
|
-
loading: false,
|
|
49
|
-
recommendedProductIds: [],
|
|
50
|
-
productIdsToOmit: [],
|
|
51
|
-
productsLimit: 10
|
|
52
|
-
};
|
|
53
|
-
},
|
|
54
|
-
computed: {
|
|
55
|
-
productIds() {
|
|
56
|
-
// Filter out all products marked for omission
|
|
57
|
-
return this.recommendedProductIds.filter(
|
|
58
|
-
id => !this.productIdsToOmit.includes(id)
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
watch: {
|
|
63
|
-
/**
|
|
64
|
-
* @param {string | undefined} id
|
|
65
|
-
*/
|
|
66
|
-
productId(id) {
|
|
67
|
-
this.initRecommendations(id);
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
created() {
|
|
71
|
-
// When items are added to the cart, omit them from recommendations.
|
|
72
|
-
events.subscribe(events.shop.CART_UPDATED, info => {
|
|
73
|
-
if (info.add) {
|
|
74
|
-
this.productIdsToOmit.push(info.add.item.sku);
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
// Get the current status of the cart-data-sync process,
|
|
79
|
-
// and subscribe to any further changes to that status.
|
|
80
|
-
events.getValue(
|
|
81
|
-
events.shop.CART_SYNCED_ON_LOAD,
|
|
82
|
-
status => {
|
|
83
|
-
// Abort if the cart hasn't been synced yet,
|
|
84
|
-
// and wait for the next sync event.
|
|
85
|
-
if (!status) return;
|
|
86
|
-
|
|
87
|
-
// Cart data has been synced; get current cart contents and
|
|
88
|
-
// set as the list of products to omit from recommendations.
|
|
89
|
-
const cartItems = CartService.getItemData() || [];
|
|
90
|
-
const cartSkus = cartItems.map(item => item.sku);
|
|
91
|
-
this.productIdsToOmit = cartSkus;
|
|
92
|
-
},
|
|
93
|
-
true
|
|
94
|
-
);
|
|
95
|
-
},
|
|
96
|
-
mounted() {
|
|
97
|
-
this.initRecommendations(this.productId);
|
|
98
|
-
},
|
|
99
|
-
methods: {
|
|
100
|
-
/**
|
|
101
|
-
* @param {{
|
|
102
|
-
* sku: string,
|
|
103
|
-
* slug: string
|
|
104
|
-
* }} pdpEvent
|
|
105
|
-
*/
|
|
106
|
-
onClickPdp(pdpEvent) {
|
|
107
|
-
// TODO: emit GTM event
|
|
108
|
-
console.log("pdpEvent:", pdpEvent);
|
|
109
|
-
},
|
|
110
|
-
/**
|
|
111
|
-
* @param {{
|
|
112
|
-
* sku: string,
|
|
113
|
-
* qty: number,
|
|
114
|
-
* userId: string,
|
|
115
|
-
* cntryCd: string,
|
|
116
|
-
* isAdr: boolean,
|
|
117
|
-
* referrer: string,
|
|
118
|
-
* domain: string
|
|
119
|
-
* }} atcEvent
|
|
120
|
-
*/
|
|
121
|
-
onClickAddToCart(atcEvent) {
|
|
122
|
-
// TODO: emit GTM event
|
|
123
|
-
console.log("atcEvent", atcEvent);
|
|
124
|
-
},
|
|
125
|
-
/**
|
|
126
|
-
* @param {string} [productId]
|
|
127
|
-
*/
|
|
128
|
-
async initRecommendations(productId) {
|
|
129
|
-
this.loading = true;
|
|
130
|
-
|
|
131
|
-
try {
|
|
132
|
-
let productIds = [];
|
|
133
|
-
if (productId) {
|
|
134
|
-
// Related Products mode
|
|
135
|
-
productIds = await getRelatedProducts(productId, this.productsLimit);
|
|
136
|
-
} else {
|
|
137
|
-
// User-Personalized mode
|
|
138
|
-
productIds = await getPersonalizedRecommendations(this.productsLimit);
|
|
139
|
-
}
|
|
140
|
-
this.recommendedProductIds = productIds;
|
|
141
|
-
} catch (err) {
|
|
142
|
-
console.error(err);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
this.loading = false;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
</script>
|
|
150
|
-
|
|
151
|
-
<style>
|
|
152
|
-
.content {
|
|
153
|
-
padding: 0;
|
|
154
|
-
}
|
|
155
|
-
</style>
|