Add recommendations block with ACDL (#11)

* Add recommendations block with ACDL2 * Fix array issue for product views * Fix enrichment position * Update recommendations context * Add schema validation for events * Fix ACDL2 and product view history bugs * Fix CLS * Use base design system * Update styles * Replace ACDL2 with mainline ACDL * Add viewHistory and cartSkus * Add storefront events to recommendations block * Optimize recommendations context * Add PLP widget version that uses ACDL * Add categoryContext to PLP * Remove optional category url path from PLP * Add categoryIds filter * Update autocomplete widget
hlxsites · Mar 15, 2024 · 6e764c1 · 6e764c1
1 parent bd7dc07
commit 6e764c1
Show file tree

Hide file tree

Showing 28 changed files with 999 additions and 34 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,6 @@
 helix-importer-ui
 scripts/preact.js
 scripts/htm.js
+scripts/acdl
 tools/picker
-scripts/widgets
+scripts/widgets
diff --git a/blocks/header/searchbar.js b/blocks/header/searchbar.js
@@ -7,7 +7,7 @@ import { getConfigValue } from '../../scripts/configs.js';
 
   const storeDetails = {
     environmentId: await getConfigValue('commerce-environment-id'),
-    environmentType: (await getConfigValue('commerce-environment-id')).includes('sandbox') ? 'testing' : '',
+    environmentType: (await getConfigValue('commerce-endpoint')).includes('sandbox') ? 'testing' : '',
     apiKey: await getConfigValue('commerce-x-api-key'),
     websiteCode: await getConfigValue('commerce-website-code'),
     storeCode: await getConfigValue('commerce-store-code'),
@@ -27,7 +27,7 @@ import { getConfigValue } from '../../scripts/configs.js';
     context: {
       customerGroup: await getConfigValue('commerce-customer-group'),
     },
-    route: ({ sku }) => `/products/missing-url-key/${sku}`, // TODO: We need urlKey as parameter as well!
+    route: ({ sku, urlKey }) => `/products/${urlKey}/${sku}`,
     searchRoute: {
       route: '/search',
       query: 'q',

diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
@@ -148,8 +148,16 @@ class ProductDetailPage extends Component {
     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() } });
+      });
     }
   }
 

diff --git a/blocks/product-list-page-custom/ProductList.js b/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 }) {

diff --git a/blocks/product-list-page-custom/product-list-page-custom.js b/blocks/product-list-page-custom/product-list-page-custom.js
@@ -146,7 +146,9 @@ async function loadCategory(state) {
       } 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);
@@ -389,22 +391,24 @@ class ProductListPage extends Component {
         } 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() } });
       });
     }
   };

diff --git a/blocks/product-list-page/product-list-page.js b/blocks/product-list-page/product-list-page.js
@@ -2,7 +2,7 @@ import { loadScript, readBlockConfig } from '../../scripts/aem.js';
 import { getConfigValue } from '../../scripts/configs.js';
 
 export default async function decorate(block) {
-  const { urlpath, category, type } = readBlockConfig(block);
+  const { category, type } = readBlockConfig(block);
   block.textContent = '';
 
   const widgetProd = '/scripts/widgets/search.js';
@@ -44,7 +44,7 @@ export default async function decorate(block) {
 
   if (type !== 'search') {
     storeDetails.config.categoryName = document.querySelector('.default-content-wrapper > h1')?.innerText;
-    storeDetails.config.currentCategoryUrlPath = urlpath;
+    storeDetails.config.currentCategoryId = category;
 
     // Enable enrichment
     block.dataset.category = category;

diff --git a/blocks/product-recommendations/product-recommendations.css b/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;
+    }
+}