Add viewHistory and cartSkus

Author: herzog31

blocks/product-recommendations/product-recommendations.js

@@ -90,30 +90,23 @@ async function loadRecommendation(block, context) {
   // Only proceed if all required data is available
   if (!context.pageType
     || (context.pageType === 'Product' && !context.currentSku)
-    || (context.pageType === 'Category' && !context.category)) {
+    || (context.pageType === 'Category' && !context.category)
+    || (context.pageType === 'Cart' && !context.cartSkus)) {
     return;
   }
 
   if (recommendationsPromise) {
     return;
   }
 
-  // Get user view history
-  // TODO
-  /* let productViews = window
-    .adobeDataLayer.getState('productContext', [-10, 0], { flatten: false }) || [];
-  if (!Array.isArray(productViews) && productViews) {
-    productViews = [productViews];
+  // Get product view history
+  try {
+    const viewHistory = window.sessionStorage.getItem('productViewHistory') || '[]';
+    context.userViewHistory = JSON.parse(viewHistory).map((sku) => ({ sku }));
+  } catch (e) {
+    window.sessionStorage.removeItem('productViewHistory');
+    console.error('Error parsing product view history', e);
   }
-  context.userViewHistory = productViews
-    .map(({ sku }) => ({ sku }))
-    .reduce((acc, current) => {
-      const x = acc.find((p) => p.sku === current.sku);
-      if (!x) {
-        return acc.concat([current]);
-      }
-      return acc;
-    }, []); */
 
   recommendationsPromise = performCatalogServiceQuery(recommendationsQuery, context);
   const { recommendations } = await recommendationsPromise;
@@ -140,9 +133,15 @@ export default async function decorate(block) {
     loadRecommendation(block, context);
   }
 
+  function handleCartChanges({ shoppingCartContext }) {
+    context.cartSkus = shoppingCartContext.items.map(({ product }) => product.sku);
+    loadRecommendation(block, context);
+  }
+
   window.adobeDataLayer.push((dl) => {
     dl.addEventListener('adobeDataLayer:change', handlePageTypeChanges, { path: 'pageContext' });
     dl.addEventListener('adobeDataLayer:change', handleProductChanges, { path: 'productContext' });
     dl.addEventListener('adobeDataLayer:change', handleCategoryChanges, { path: 'categoryContext' });
+    dl.addEventListener('adobeDataLayer:change', handleCartChanges, { path: 'shoppingCartContext' });
   });
 }

scripts/commerce.js

@@ -335,6 +335,18 @@ export async function getProduct(sku) {
   return productPromise;
 }
 
+// TODO: Listen to placeOrder events to store purchase history
+// Store product view history in session storage
+window.adobeDataLayer.push((dl) => {
+  dl.addEventListener('adobeDataLayer:change', (event) => {
+    const viewHistory = JSON.parse(window.sessionStorage.getItem('productViewHistory') || '[]');
+    if (!viewHistory.includes(event.productContext.sku)) {
+      viewHistory.push(event.productContext.sku);
+      window.sessionStorage.setItem('productViewHistory', JSON.stringify(viewHistory.slice(-10)));
+    }
+  }, { path: 'productContext' });
+});
+
 /* PLP specific functionality */
 
 // TODO