Add recommendations block with ACDL

.eslintignore

@@ -1,5 +1,6 @@
 helix-importer-ui
 scripts/preact.js
 scripts/htm.js
+scripts/acdl
 tools/picker
-scripts/widgets
+scripts/widgets

blocks/product-details/product-details.js

@@ -113,7 +113,7 @@
   };
 
   onAddToWishlist = async () => {
     console.debug('onAddToWishlist', this.state.product.sku);
   };
 
   onQuantityChanged = (quantity) => {
@@ -148,8 +148,16 @@
     if (!loading && product) {
       setJsonLdProduct(product);
       document.title = product.name;
-      // TODO: productId not exposed by catalog service as number
-      window.adobeDataLayer.push({ productContext: { productId: 0, ...product } }, { event: 'product-page-view' });
+      window.adobeDataLayer.push((dl) => {
+        dl.push({
+          productContext: {
+            productId: parseInt(product.externalId, 10) || 0,
+            ...product,
+          },
+        });
+        // TODO: Remove eventInfo once collector is updated
+        dl.push({ event: 'product-page-view', eventInfo: { ...dl.getState() } });
+      });
     }
   }
 

blocks/product-list-page-custom/ProductList.js

@@ -47,7 +47,10 @@ class ProductCard extends Component {
   }
 
   onProductClick(product) {
-    window.adobeDataLayer.push({ event: 'search-product-click', eventInfo: { searchUnitId: 'searchUnitId', sku: product.sku } });
+    window.adobeDataLayer.push((dl) => {
+      // TODO: Remove eventInfo once collector is updated
+      dl.push({ event: 'search-product-click', eventInfo: { ...dl.getState(), searchUnitId: 'searchUnitId', sku: product.sku } });
+    });
   }
 
   render({ product, loading, index }) {

blocks/product-list-page-custom/product-list-page-custom.js

@@ -146,7 +146,9 @@
       } else {
         searchInputContext.units[index] = unit;
       }
-      dl.push({ searchInputContext }, { event: 'search-request-sent', eventInfo: { searchUnitId } });
+      dl.push({ searchInputContext });
+      // TODO: Remove eventInfo once collector is updated
+      dl.push({ event: 'search-request-sent', eventInfo: { ...dl.getState(), searchUnitId } });
     });
 
     const response = await performCatalogServiceQuery(productSearchQuery(state.type === 'category'), variables);
@@ -164,7 +166,7 @@
       facets: response.productSearch.facets.filter((facet) => facet.attribute !== 'categories'),
     };
   } catch (e) {
     console.error('Error loading products', e);
     return {
       pages: 1,
       products: {
@@ -389,22 +391,24 @@
         } else {
           searchResultsContext.units[index] = searchResultUnit;
         }
-        dl.push({ searchResultsContext }, { event: 'search-response-received', eventInfo: { searchUnitId } });
+        dl.push({ searchResultsContext });
+        // TODO: Remove eventInfo once collector is updated
+        dl.push({ event: 'search-response-received', eventInfo: { ...dl.getState(), searchUnitId } });
         if (this.props.type === 'search') {
-          dl.push({ event: 'search-results-view', eventInfo: { searchUnitId } });
+          // TODO: Remove eventInfo once collector is updated
+          dl.push({ event: 'search-results-view', eventInfo: { ...dl.getState(), searchUnitId } });
         } else {
-          dl.push(
-            { event: 'category-results-view', eventInfo: { searchUnitId } },
-            {
-              categoryContext: {
-                name: this.state.category.name,
-                urlKey: this.state.category.urlKey,
-                urlPath: this.state.category.urlPath,
-              },
+          dl.push({
+            categoryContext: {
+              name: this.state.category.name,
+              urlKey: this.state.category.urlKey,
+              urlPath: this.state.category.urlPath,
             },
-          );
+          });
+          // TODO: Remove eventInfo once collector is updated
+          dl.push({ event: 'category-results-view', eventInfo: { ...dl.getState(), searchUnitId } });
         }
-        dl.push({ event: 'page-view' });
+        dl.push({ event: 'page-view', eventInfo: { ...dl.getState() } });
       });
     }
   };

blocks/product-recommendations/product-recommendations.css

@@ -0,0 +1,80 @@
+main .section>div.product-recommendations-wrapper {
+    max-width: 100%;
+    padding: 0;
+    text-align: left;
+    margin: 0 0 5rem;
+}
+
+.product-recommendations {
+    overflow: hidden;
+    min-height: 512px;
+}
+
+.product-recommendations .scrollable {
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    padding-bottom: 1rem;
+}
+
+.product-recommendations .product-grid {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    gap: 2rem;
+    margin: 0;
+}
+
+.product-recommendations .product-grid-item img {
+    width: 100%;
+}
+
+.product-recommendations .product-grid .product-grid-item a {
+    text-decoration: none;
+}
+
+.product-recommendations .product-grid .product-grid-item a:hover,
+.product-recommendations .product-grid .product-grid-item a:focus {
+    text-decoration: underline;
+}
+
+.product-recommendations .product-grid .product-grid-item span {
+    overflow: hidden;
+    box-sizing: border-box;
+    margin: 0;
+    padding: .5rem 1rem 0 0;
+    display: inline-block;
+}
+
+.product-recommendations .product-grid picture {
+    background: none;
+    display: block;
+    width: 300px;
+    aspect-ratio: 1 / 1.25;
+}
+
+.product-recommendations .product-grid img {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    object-fit: contain;
+    background: none;
+}
+
+.product-recommendations .product-grid .placeholder {
+    background-color: var(--color-neutral-500);
+    scroll-snap-align: start;
+}
+
+.product-recommendations .product-grid .placeholder img {
+    display: none;
+}
+
+.product-recommendations .product-grid-item {
+    margin: 0;
+    scroll-snap-align: start;
+}
+
+@media (width >= 900px) {
+    .product-recommendations {
+        min-height: 534px;
+    }
+}

blocks/product-recommendations/product-recommendations.js

@@ -0,0 +1,214 @@
+/* eslint-disable no-underscore-dangle */
+import { performCatalogServiceQuery } from '../../scripts/commerce.js';
+import { getConfigValue } from '../../scripts/configs.js';
+
+const recommendationsQuery = `query GetRecommendations(
+  $pageType: PageType!
+  $category: String
+  $currentSku: String
+  $cartSkus: [String]
+  $userPurchaseHistory: [PurchaseHistory]
+  $userViewHistory: [ViewHistory]
+) {
+  recommendations(
+    cartSkus: $cartSkus
+    category: $category
+    currentSku: $currentSku
+    pageType: $pageType
+    userPurchaseHistory: $userPurchaseHistory
+    userViewHistory: $userViewHistory
+  ) {
+    results {
+      displayOrder
+      pageType
+      productsView {
+        name
+        sku
+        url
+        images {
+          url
+        }
+        externalId
+        __typename
+      }
+      storefrontLabel
+      totalProducts
+      typeId
+      unitId
+      unitName
+    }
+    totalResults
+  }
+}`;
+
+let recommendationsPromise;
+
+function renderPlaceholder(block) {
+  block.innerHTML = `<h2></h2>
+  <div class="scrollable">
+    <div class="product-grid">
+      ${[...Array(5)].map(() => `
+        <div class="placeholder">
+          <picture><img width="300" height="375" src="" /></picture>
+        </div>
+      `).join('')}
+    </div>
+  </div>`;
+}
+
+function renderItem(unitId, product) {
+  const urlKey = product.url.split('/').pop().replace('.html', '');
+  const image = product.images[0]?.url;
+
+  const clickHandler = () => {
+    window.adobeDataLayer.push((dl) => {
+      dl.push({ event: 'recs-item-click', eventInfo: { ...dl.getState(), unitId, productId: parseInt(product.externalId, 10) || 0 } });
+    });
+  };
+
+  const item = document.createRange().createContextualFragment(`<div class="product-grid-item">
+    <a href="/products/${urlKey}/${product.sku.toLowerCase()}">
+      <picture>
+        <source type="image/webp" srcset="${image}?width=300&format=webply&optimize=medium" />
+        <img loading="lazy" alt="${product.name}" width="300" height="375" src="${image}?width=300&format=jpg&optimize=medium" />
+      </picture>
+      <span>${product.name}</span>
+    </a>
+  </div>`);
+  item.querySelector('a').addEventListener('click', clickHandler);
+
+  return item;
+}
+
+function renderItems(block, recommendations) {
+  // Render only first recommendation
+  const [recommendation] = recommendations.results;
+  if (!recommendation) {
+    // Hide block content if no recommendations are available
+    block.textContent = '';
+    return;
+  }
+
+  window.adobeDataLayer.push((dl) => {
+    dl.push({ event: 'recs-unit-impression-render', eventInfo: { ...dl.getState(), unitId: recommendation.unitId } });
+  });
+
+  // Title
+  block.querySelector('h2').textContent = recommendation.storefrontLabel;
+
+  // Grid
+  const grid = block.querySelector('.product-grid');
+  grid.innerHTML = '';
+  const { productsView } = recommendation;
+  productsView.forEach((product) => {
+    grid.appendChild(renderItem(recommendation.unitId, product));
+  });
+
+  const inViewObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        window.adobeDataLayer.push((dl) => {
+          dl.push({ event: 'recs-unit-view', eventInfo: { ...dl.getState(), unitId: recommendation.unitId } });
+        });
+        inViewObserver.disconnect();
+      }
+    });
+  });
+  inViewObserver.observe(block);
+}
+
+const mapUnit = (unit) => ({
+  ...unit,
+  unitType: 'primary',
+  searchTime: 0,
+  primaryProducts: unit.totalProducts,
+  backupProducts: 0,
+  products: unit.productsView.map((product, index) => ({
+    ...product,
+    rank: index,
+    score: 0,
+    productId: parseInt(product.externalId, 10) || 0,
+    type: '?',
+    queryType: product.__typename,
+  })),
+});
+
+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 === 'Cart' && !context.cartSkus)) {
+    return;
+  }
+
+  if (recommendationsPromise) {
+    return;
+  }
+
+  const storeViewCode = await getConfigValue('commerce-store-view-code');
+  // Get product view history
+  try {
+    const viewHistory = window.localStorage.getItem(`${storeViewCode}:productViewHistory`) || '[]';
+    context.userViewHistory = JSON.parse(viewHistory);
+  } catch (e) {
+    window.localStorage.removeItem('productViewHistory');
+    console.error('Error parsing product view history', e);
+  }
+
+  // Get purchase history
+  try {
+    const purchaseHistory = window.localStorage.getItem(`${storeViewCode}:purchaseHistory`) || '[]';
+    context.userPurchaseHistory = JSON.parse(purchaseHistory);
+  } catch (e) {
+    window.localStorage.removeItem('purchaseHistory');
+    console.error('Error parsing purchase history', e);
+  }
+
+  window.adobeDataLayer.push((dl) => {
+    dl.push({ event: 'recs-api-request-sent', eventInfo: { ...dl.getState() } });
+  });
+
+  recommendationsPromise = performCatalogServiceQuery(recommendationsQuery, context);
+  const { recommendations } = await recommendationsPromise;
+
+  window.adobeDataLayer.push((dl) => {
+    dl.push({ recommendationsContext: { units: recommendations.results.map(mapUnit) } });
+    dl.push({ event: 'recs-api-response-received', eventInfo: { ...dl.getState() } });
+  });
+
+  renderItems(block, recommendations);
+}
+
+export default async function decorate(block) {
+  renderPlaceholder(block);
+
+  const context = {};
+
+  function handleProductChanges({ productContext }) {
+    context.currentSku = productContext.sku;
+    loadRecommendation(block, context);
+  }
+
+  function handleCategoryChanges({ categoryContext }) {
+    context.category = categoryContext.name;
+    loadRecommendation(block, context);
+  }
+
+  function handlePageTypeChanges({ pageContext }) {
+    context.pageType = pageContext.pageType;
+    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' });
+  });
+}