Merge branch 'main' into robots2

hlxsites · Nov 18, 2024 · 7ec4383 · 7ec4383
2 parents 24c39a4 + f8e50e1
commit 7ec4383
Show file tree

Hide file tree

Showing 9 changed files with 705 additions and 517 deletions.
diff --git a/blocks/product-details-custom/product-details-custom.js b/blocks/product-details-custom/product-details-custom.js
@@ -13,7 +13,9 @@ import {
   performCatalogServiceQuery,
   refineProductQuery,
   setJsonLd,
-  loadErrorPage, variantsQuery,
+  loadErrorPage,
+  variantsQuery,
+  mapProductAcdl,
 } from '../../scripts/commerce.js';
 import { readBlockConfig } from '../../scripts/aem.js';
 
@@ -166,10 +168,7 @@ class ProductDetailPage extends Component {
       document.title = product.name;
       window.adobeDataLayer.push((dl) => {
         dl.push({
-          productContext: {
-            productId: parseInt(product.externalId, 10) || 0,
-            ...product,
-          },
+          productContext: mapProductAcdl(product),
         });
         // TODO: Remove eventInfo once collector is updated
         dl.push({ event: 'product-page-view', eventInfo: { ...dl.getState() } });

diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
@@ -136,40 +136,7 @@ export default async function decorate(block) {
 
   const langDefinitions = {
     default: {
-      PDP: {
-        Product: {
-          Incrementer: { label: placeholders.pdpProductIncrementer },
-          OutOfStock: { label: placeholders.pdpProductOutofstock },
-          AddToCart: { label: placeholders.pdpProductAddtocart },
-          Details: { label: placeholders.pdpProductDetails },
-          RegularPrice: { label: placeholders.pdpProductRegularprice },
-          SpecialPrice: { label: placeholders.pdpProductSpecialprice },
-          PriceRange: {
-            From: { label: placeholders.pdpProductPricerangeFrom },
-            To: { label: placeholders.pdpProductPricerangeTo },
-          },
-          Image: { label: placeholders.pdpProductImage },
-        },
-        Swatches: {
-          Required: { label: placeholders.pdpSwatchesRequired },
-        },
-        Carousel: {
-          label: placeholders.pdpCarousel,
-          Next: { label: placeholders.pdpCarouselNext },
-          Previous: { label: placeholders.pdpCarouselPrevious },
-          Slide: { label: placeholders.pdpCarouselSlide },
-          Controls: {
-            label: placeholders.pdpCarouselControls,
-            Button: { label: placeholders.pdpCarouselControlsButton },
-          },
-        },
-        Overlay: {
-          Close: { label: placeholders.pdpOverlayClose },
-        },
-      },
-      Custom: {
-        AddingToCart: { label: placeholders.pdpCustomAddingtocart },
-      },
+      ...placeholders,
     },
   };
 

diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js
@@ -27,10 +27,10 @@ const recommendationsQuery = `query GetRecommendations(
       productsView {
         name
         sku
-        url
         images {
           url
         }
+        urlKey
         externalId
         __typename
       }
@@ -60,7 +60,6 @@ function renderPlaceholder(block) {
 }
 
 function renderItem(unitId, product) {
-  const urlKey = product.url.split('/').pop().replace('.html', '');
   let image = product.images[0]?.url;
   image = image.replace('http://', '//');
 
@@ -71,7 +70,7 @@ function renderItem(unitId, product) {
   };
 
   const item = document.createRange().createContextualFragment(`<div class="product-grid-item">
-    <a href="/products/${urlKey}/${product.sku}">
+    <a href="/products/${product.urlKey}/${product.sku}">
       <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" />
@@ -121,21 +120,33 @@ function renderItems(block, results) {
   inViewObserver.observe(block);
 }
 
+const mapProduct = (product, index) => ({
+  rank: index,
+  score: 0,
+  sku: product.sku,
+  name: product.name,
+  productId: parseInt(product.externalId, 10) || 0,
+  type: product.__typename,
+  visibility: undefined,
+  categories: [],
+  weight: 0,
+  image: product.images.length > 0 ? product.images[0].url : undefined,
+  url: new URL(`/products/${product.urlKey}/${product.sku}`, window.location.origin).toString(),
+  queryType: 'primary',
+});
+
 const mapUnit = (unit) => ({
-  ...unit,
+  unitId: unit.unitId,
+  unitName: unit.unitName,
   unitType: 'primary',
   searchTime: 0,
+  totalProducts: unit.totalProducts,
   primaryProducts: unit.totalProducts,
   backupProducts: 0,
-  products: unit.productsView.map((product, index) => ({
-    ...product,
-    rank: index,
-    score: 0,
-    productId: parseInt(product.externalId, 10) || 0,
-    type: product.__typename,
-    queryType: 'primary',
-  })),
+  products: unit.productsView.map(mapProduct),
   pagePlacement: '',
+  typeId: unit.typeId,
+
 });
 
 async function loadRecommendation(block, context, visibility, filters) {
@@ -226,7 +237,9 @@ export default async function decorate(block) {
   }
 
   function handleCartChanges({ shoppingCartContext }) {
-    context.cartSkus = shoppingCartContext?.items?.map(({ product }) => product.sku);
+    context.cartSkus = shoppingCartContext?.totalQuantity === 0
+      ? []
+      : shoppingCartContext?.items?.map(({ product }) => product.sku);
     loadRecommendation(block, context, visibility, filters);
   }
 

diff --git a/blocks/product-teaser/product-teaser.js b/blocks/product-teaser/product-teaser.js
@@ -1,11 +1,12 @@
 import { readBlockConfig } from '../../scripts/aem.js';
-import { performCatalogServiceQuery, renderPrice } from '../../scripts/commerce.js';
+import { performCatalogServiceQuery, renderPrice, mapProductAcdl } from '../../scripts/commerce.js';
 
 const productTeaserQuery = `query productTeaser($sku: String!) {
   products(skus: [$sku]) {
     sku
     urlKey
     name
+    externalId
     addToCartAllowed
     __typename
     images(roles: ["small_image"]) {
@@ -123,7 +124,7 @@ function renderProduct(product, config, block) {
     addToCartButton.addEventListener('click', async () => {
       const { cartApi } = await import('../../scripts/minicart/api.js');
       // TODO: productId not exposed by catalog service as number
-      window.adobeDataLayer.push({ productContext: { productId: 0, ...product } });
+      window.adobeDataLayer.push({ productContext: mapProductAcdl(product) });
       cartApi.addToCart(product.sku, [], 1, 'product-teaser');
     });
   }