@nuskin/product-components 3.20.1 → 3.20.2-mdtanl-307.1.1

package/.releaserc

@@ -1,6 +1,6 @@
 {
     "branches": [
-      "master"
+      "master", {"name":"MDTANL-307.1", "channel":"prerelease", "prerelease":"mdtanl-307.1"}
     ],
     "plugins": [
         "@semantic-release/release-notes-generator",

package/components/NsProductList.vue

@@ -129,10 +129,11 @@ export default {
       currencyCode: "",
       runConfig: null,
       cardPrices: {},
-      impressionTracked: false,
       productsWithPrices: new Set(),
       loadedProductsMap: {},
-      trackingTimer: null
+      componentId: `NsProductList-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`
     };
   },
   computed: {
@@ -201,14 +202,32 @@ export default {
         if (!this.$NsProductDataService.check(skus)) {
           this.$NsProductDataService.queue(skus);
         }
-        if (this.trackingTimer) {
-          clearTimeout(this.trackingTimer);
-          this.trackingTimer = null;
-        }
-        this.impressionTracked = false;
         this.productsWithPrices.clear();
         this.loadedProductsMap = {};
       }
+    },
+    showSpinner(isLoading, wasLoading) {
+      if (wasLoading && !isLoading) {
+        const collector = window.__nsProductImpressionCollector;
+        if (!collector) return;
+
+        if (!collector.componentsReadyTime) {
+          collector.componentsReadyTime = {};
+        }
+        collector.componentsReadyTime[this.componentId] = Date.now();
+
+        const totalComponents = collector.instances.size;
+        const readyComponents = Object.keys(collector.componentsReadyTime)
+          .length;
+
+        if (readyComponents === totalComponents && !collector.eventFired) {
+          requestAnimationFrame(() => {
+            if (!collector.eventFired) {
+              this.fireConsolidatedImpressionEvent();
+            }
+          });
+        }
+      }
     }
   },
   created() {
@@ -217,13 +236,30 @@ export default {
       runConfig.country
     ).currencyCode;
     this.runConfig = runConfig;
+
+    if (!window.__nsProductImpressionCollector) {
+      window.__nsProductImpressionCollector = {
+        instances: new Set(),
+        impressions: [],
+        currencyCode: this.currencyCode,
+        eventFired: false,
+        productDataMap: {}
+      };
+    }
+
+    const collector = window.__nsProductImpressionCollector;
+    collector.instances.add(this.componentId);
   },
   async mounted() {
     await this.setCommonStrings();
   },
   beforeDestroy() {
-    if (this.trackingTimer) {
-      clearTimeout(this.trackingTimer);
+    if (window.__nsProductImpressionCollector) {
+      const collector = window.__nsProductImpressionCollector;
+      collector.instances.delete(this.componentId);
+      if (collector.componentsReadyTime) {
+        delete collector.componentsReadyTime[this.componentId];
+      }
     }
   },
   methods: {
@@ -305,18 +341,18 @@ export default {
           displayedTitle: safeTitleCopy
         };
 
-        if (this.trackingTimer) {
-          clearTimeout(this.trackingTimer);
-        }
-        this.trackingTimer = setTimeout(() => {
-          if (
-            !this.impressionTracked &&
-            Object.keys(this.loadedProductsMap).length > 0
-          ) {
-            this.trackProductImpressions();
-            this.impressionTracked = true;
-          }
-        }, 300);
+        const collector = window.__nsProductImpressionCollector;
+
+        collector.productDataMap[safeDisplayedSku] = {
+          product: product,
+          displayedTitle: safeTitleCopy,
+          prices: {
+            price: price,
+            unitPrice: unitPrice,
+            salesPrice: salesPrice
+          },
+          section: this.title || "No Title"
+        };
       }
       this.$emit("product-update", product);
     },
@@ -324,21 +360,29 @@ export default {
       this.limitedItemsFrozen = this.limitedItems;
 
       event.target.blur();
+
+      const collector = window.__nsProductImpressionCollector;
+      if (collector) {
+        collector.eventFired = false;
+        collector.componentsReadyTime = {};
+      }
+
       this.skusLimit += this.skusPerLoad;
     },
 
-    trackProductImpressions() {
-      const displayedSkus = this.displayedItems
-        .map(item => this.getItemSku(item))
-        .filter(sku => sku && this.loadedProductsMap[sku]);
+    fireConsolidatedImpressionEvent() {
+      const collector = window.__nsProductImpressionCollector;
 
-      const impressions = displayedSkus
-        .map((displayedSku, index) => {
-          const productData = this.loadedProductsMap[displayedSku];
-          const prices = this.cardPrices[displayedSku] || {};
+      if (collector.eventFired) {
+        return;
+      }
 
-          const product = productData.product;
-          const displayedTitle = productData.displayedTitle;
+      const impressions = Object.keys(collector.productDataMap)
+        .map((sku, index) => {
+          const data = collector.productDataMap[sku];
+          const product = data.product;
+          const displayedTitle = data.displayedTitle;
+          const prices = data.prices;
 
           const productImages =
             (product.getProductCarouselImages &&
@@ -351,7 +395,7 @@ export default {
             "";
 
           return {
-            id: displayedSku,
+            id: sku,
             name: displayedTitle || product.title || "",
             price:
               typeof prices.price !== "undefined" && prices.price !== null
@@ -384,13 +428,20 @@ export default {
         })
         .filter(Boolean);
 
-      events.publish(events.shop.PRODUCT_IMPRESSION, {
+      if (impressions.length === 0) {
+        return;
+      }
+
+      const eventData = {
         ecommerce: {
-          currencyCode: this.currencyCode,
+          currencyCode: collector.currencyCode,
           revenue: "",
-          impressions
+          impressions: impressions
         }
-      });
+      };
+
+      collector.eventFired = true;
+      events.publish(events.shop.PRODUCT_IMPRESSION, eventData);
     },
     async setCommonStrings() {
       if (!this.translations || !this.translations.loadMore) {

package/docs/CHANGELOG.md

@@ -1 +1 @@
-## [3.20.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.20.0...v3.20.1) (2026-04-22)
+## [3.20.2-mdtanl-307.1.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.20.1...v3.20.2-mdtanl-307.1.1) (2026-04-28)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/product-components",
-  "version": "3.20.1",
+  "version": "3.20.2-mdtanl-307.1.1",
   "description": "Nu Skin Product Components",
   "main": "index.js",
   "scripts": {