Merge pull request #2558 from SalesforceCommerceCloud/bendvc/W-18647820_fix-einstein-add-to-cart

bendvc · web-flow · commit f61bfc960fec · 2025-06-17T15:16:44.000-07:00
[Einstein] Fix `addToCart` payload @@W-18647820@@
diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,7 +1,8 @@
 ## v7.0.0-dev.0 (May 20, 2025)
 
 - Improved the layout of product tiles in product scroll and product list [#2446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2446)
-- Updated 6 new languagues [#2495](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2495)
+- Updated 6 new languages [#2495](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2495)
+- Fix Einstein event tracking for `addToCart` event [#2558](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2558)
 
 ## v6.1.0 (May 22, 2025)
 
diff --git a/packages/template-retail-react-app/app/hooks/use-einstein.js b/packages/template-retail-react-app/app/hooks/use-einstein.js
@@ -56,42 +56,57 @@ export class EinsteinAPI {
      * Given a product or item source, returns the product data that Einstein requires
      */
     _constructEinsteinProduct(product) {
-        if (product.type && (product.type.master || product.type.variant)) {
-            // handle variants for PDP / viewProduct
-            // Assumes product is a Product object from SCAPI Shopper-Products:
-            // https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-products?meta=type%3AProduct
+        // Handle variants for PDP / viewProduct
+        // Assumes product is a Product object from SCAPI Shopper-Products:
+        // https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-products?meta=type%3AProduct
+        if (product.type) {
+            // In case of variant, send the "sku" attribute
+            if (product.type.variant) {
+                return {
+                    id: product.master.masterId,
+                    price: product.price,
+                    sku: product.id
+                }
+            }
+
+            // In case of variation group, send the "altId" and "type" attributes
+            if (product.type.variationGroup) {
+                return {
+                    altId: product.id,
+                    id: product.master.masterId,
+                    price: product.price,
+                    sku: product.id,
+                    type: 'vgroup'
+                }
+            }
+
+            // Handle non-variant products, like master, set, bundle, item.
+            // This code follows the implementation in the plugin_einstein_api.
+            // https://github.com/SalesforceCommerceCloud/plugin_einstein_api/blob/c8168d5b8e2e34bfb9413da73969d59b0f3adabd/plugin_einstein_api/cartridge/scripts/helpers/RecommendationsHelper.js#L315
             return {
-                id: product.master.masterId,
-                sku: product.id,
-                altId: '',
-                altIdType: ''
+                id: product.id,
+                price: product.price
             }
-        } else if (
-            product.productType &&
-            (product.productType.master ||
-                product.productType.variant ||
-                product.productType.set ||
-                product.productType.bundle ||
-                product.productType.variationGroup ||
-                product.productType.item)
-        ) {
-            // handle variants & sets for PLP / viewCategory & viewSearch
-            // Assumes product is a ProductSearchHit from SCAPI Shopper-Search:
-            // https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-search?meta=type%3AProductSearchHit
+        }
+
+        // Handle variants & sets for PLP / viewCategory & viewSearch
+        // Assumes product is a ProductSearchHit from SCAPI Shopper-Search:
+        // https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-search?meta=type%3AProductSearchHit
+        if (product.hitType) {
             return {
                 id: product.productId,
                 sku: product.productId, //TODO: Should we switch this to product.representedProduct.id once we allow non-master products in search results?
                 altId: '',
                 altIdType: ''
             }
-        } else {
-            // handles non-variants
-            return {
-                id: product.id,
-                sku: '',
-                altId: '',
-                altIdType: ''
-            }
+        }
+
+        // handles non-variants
+        return {
+            id: product.id,
+            sku: '',
+            altId: '',
+            altIdType: ''
         }
     }
 
@@ -100,13 +115,40 @@ export class EinsteinAPI {
      *
      * Assumes item is a ProductItemfrom SCAPI Shopper-Baskets:
      * https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=type%3AProductItem
+     *
+     * This code follows the implementation in the plugin_einstein_api.
+     * https://github.com/SalesforceCommerceCloud/plugin_einstein_api/blob/c8168d5b8e2e34bfb9413da73969d59b0f3adabd/plugin_einstein_api/cartridge/scripts/helpers/RecommendationsHelper.js#L315
      */
     _constructEinsteinItem(item) {
+        const {product, productId, price, quantity} = item
+
+        // In case of variant, send the "sku" attribute
+        if (product?.type?.variant) {
+            return {
+                id: product.master.masterId,
+                quantity: quantity,
+                price: price,
+                sku: product.id
+            }
+        }
+
+        // In case of variation group, send the "altId" and "type" attributes
+        if (product?.type?.variationGroup) {
+            return {
+                id: product.master.masterId,
+                quantity: quantity,
+                price: price,
+                sku: product.id,
+                type: 'vgroup',
+                altId: product.id
+            }
+        }
+
+        // Otherwise send default attributes.
         return {
-            id: item.productId,
-            sku: '',
-            price: item.price,
-            quantity: item.quantity
+            id: productId,
+            price: price,
+            quantity: quantity
         }
     }
 
diff --git a/packages/template-retail-react-app/app/hooks/use-einstein.test.js b/packages/template-retail-react-app/app/hooks/use-einstein.test.js
@@ -35,6 +35,78 @@ afterAll(() => {
 })
 
 describe('EinsteinAPI', () => {
+    test('_constructEinsteinProduct handles variationGroup product type', () => {
+        const variationGroupProduct = {
+            id: 'test-variation-group-id',
+            price: 99.99,
+            type: {
+                variationGroup: true
+            },
+            master: {
+                masterId: 'master-product-id'
+            }
+        }
+
+        const result = einsteinApi._constructEinsteinProduct(variationGroupProduct)
+
+        expect(result).toEqual({
+            altId: 'test-variation-group-id',
+            id: 'master-product-id',
+            price: 99.99,
+            sku: 'test-variation-group-id',
+            type: 'vgroup'
+        })
+    })
+
+    test('_constructEinsteinProduct handles variant product type', () => {
+        const variantProduct = {
+            id: 'test-variant-id',
+            price: 99.99,
+            type: {
+                variant: true
+            },
+            master: {
+                masterId: 'master-product-id'
+            }
+        }
+
+        const result = einsteinApi._constructEinsteinProduct(variantProduct)
+
+        expect(result).toEqual({
+            id: 'master-product-id',
+            price: 99.99,
+            sku: 'test-variant-id'
+        })
+    })
+
+    test('_constructEinsteinItem handles variationGroup product type', () => {
+        const variationGroupItem = {
+            product: {
+                id: 'test-variation-group-id',
+                type: {
+                    variationGroup: true
+                },
+                master: {
+                    masterId: 'master-product-id'
+                }
+            },
+            productId: 'test-variation-group-id',
+            price: 99.99,
+            quantity: 2
+        }
+
+        const result = einsteinApi._constructEinsteinItem(variationGroupItem)
+
+        expect(result).toEqual({
+            id: 'master-product-id',
+            quantity: 2,
+            price: 99.99,
+            sku: 'test-variation-group-id',
+            type: 'vgroup',
+            altId: 'test-variation-group-id'
+        })
+    })
+
     test('viewProduct sends expected api request', async () => {
         await einsteinApi.sendViewProduct(mockProduct, {cookieId: 'test-usid'})
 
@@ -46,7 +118,7 @@ describe('EinsteinAPI', () => {
                     'Content-Type': 'application/json',
                     'x-cq-client-id': 'test-id'
                 },
-                body: '{"product":{"id":"56736828M","sku":"56736828M","altId":"","altIdType":""},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+                body: '{"product":{"id":"56736828M","price":155},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
             }
         )
     })
@@ -158,12 +230,12 @@ describe('EinsteinAPI', () => {
                     'Content-Type': 'application/json',
                     'x-cq-client-id': 'test-id'
                 },
-                body: '{"products":[{"id":"682875719029M","sku":"","price":29.99,"quantity":1}],"amount":29.99,"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+                body: '{"products":[{"id":"682875719029M","price":29.99,"quantity":1}],"amount":29.99,"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
             }
         )
     })
 
-    test('checkouStep sends expected api request', async () => {
+    test('checkoutStep sends expected api request', async () => {
         const checkoutStepName = 'CheckoutStep'
         const checkoutStep = 0
         await einsteinApi.sendCheckoutStep(checkoutStepName, checkoutStep, mockBasket, {
@@ -192,7 +264,7 @@ describe('EinsteinAPI', () => {
                     'Content-Type': 'application/json',
                     'x-cq-client-id': 'test-id'
                 },
-                body: '{"products":[{"id":"883360544021M","sku":"","price":155,"quantity":1}],"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+                body: '{"products":[{"id":"883360544021M","price":155,"quantity":1}],"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
             }
         )
     })
@@ -209,7 +281,7 @@ describe('EinsteinAPI', () => {
                     'Content-Type': 'application/json',
                     'x-cq-client-id': 'test-id'
                 },
-                body: '{"recommenderName":"testRecommender","__recoUUID":"883360544021M","product":{"id":"56736828M","sku":"56736828M","altId":"","altIdType":""},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+                body: '{"recommenderName":"testRecommender","__recoUUID":"883360544021M","product":{"id":"56736828M","price":155},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
             }
         )
     })
@@ -249,4 +321,31 @@ describe('EinsteinAPI', () => {
             }
         )
     })
+
+    test('sendViewProduct handles variationGroup product type', async () => {
+        const variationGroupProduct = {
+            id: 'test-variation-group-id',
+            price: 99.99,
+            type: {
+                variationGroup: true
+            },
+            master: {
+                masterId: 'master-product-id'
+            }
+        }
+
+        await einsteinApi.sendViewProduct(variationGroupProduct, {cookieId: 'test-usid'})
+
+        expect(fetch).toHaveBeenCalledWith(
+            'http://localhost/test-path/v3/activities/test-site-id/viewProduct',
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-cq-client-id': 'test-id'
+                },
+                body: '{"product":{"altId":"test-variation-group-id","id":"master-product-id","price":99.99,"sku":"test-variation-group-id","type":"vgroup"},"cookieId":"test-usid","realm":"test","instanceType":"sbx"}'
+            }
+        )
+    })
 })
diff --git a/packages/template-retail-react-app/app/pages/product-detail/index.jsx b/packages/template-retail-react-app/app/pages/product-detail/index.jsx
@@ -304,7 +304,15 @@ const ProductDetail = () => {
 
             await addItemToNewOrExistingBasket(productItems)
 
-            einstein.sendAddToCart(productItems)
+            const productItemsForEinstein = productSelectionValues.map(
+                ({product, variant, quantity}) => ({
+                    product,
+                    productId: variant.productId,
+                    price: variant.price,
+                    quantity
+                })
+            )
+            einstein.sendAddToCart(productItemsForEinstein)
 
             // If the items were successfully added, set the return value to be used
             // by the add to cart modal.
