feat(analytics): added products to add to cart event

components/cart/actions.ts

@@ -4,11 +4,14 @@ import { TAGS } from 'lib/constants';
 import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
+import { ShopifyAnalyticsProduct } from '@shopify/hydrogen-react';
+import { productToAnalytics } from '../../lib/utils';
 
 type AddItemResponse = {
   cartId?: string;
   success: boolean;
   message?: string;
+  products?: ShopifyAnalyticsProduct[];
 };
 
 export async function addItem(
@@ -17,6 +20,7 @@ export async function addItem(
 ): Promise<AddItemResponse> {
   let cartId = cookies().get('cartId')?.value;
   let cart;
+  const quantity = 1;
 
   if (cartId) {
     cart = await getCart(cartId);
@@ -33,12 +37,13 @@ export async function addItem(
   }
 
   try {
-    await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    const response = await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity }]);
     revalidateTag(TAGS.cart);
     return {
       success: true,
       message: 'Item added to cart',
-      cartId
+      cartId,
+      products: productToAnalytics(response.lines, quantity, selectedVariantId)
     };
   } catch (e) {
     return { success: false, message: 'Error adding item to cart' };

components/cart/add-to-cart.tsx

@@ -87,10 +87,12 @@ export function AddToCart({
   useEffect(() => {
     if (response?.success && response.cartId) {
       sendAddToCart({
-        cartId: response.cartId
+        cartId: response.cartId,
+        products: response.products,
+        totalValue: Number(response.products?.[0]?.price)
       });
     }
-  }, [response?.success, response?.cartId, sendAddToCart]);
+  }, [response?.success, response?.cartId, sendAddToCart, response?.products]);
 
   return (
     <form action={actionWithVariant}>

lib/shopify/fragments/cart.ts

@@ -37,6 +37,10 @@ const cartFragment = /* GraphQL */ `
                 name
                 value
               }
+              price {
+                amount
+                currencyCode
+              }
               product {
                 ...product
               }

lib/shopify/types.ts

@@ -21,6 +21,7 @@ export type CartItem = {
   merchandise: {
     id: string;
     title: string;
+    price: Money;
     selectedOptions: {
       name: string;
       value: string;

lib/utils.ts

@@ -1,4 +1,6 @@
 import { ReadonlyURLSearchParams } from 'next/navigation';
+import { Cart } from './shopify/types';
+import { ShopifyAnalyticsProduct } from '@shopify/hydrogen-react';
 
 export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
   const paramsString = params.toString();
@@ -37,3 +39,30 @@ export const validateEnvironmentVariables = () => {
     );
   }
 };
+
+/**
+ * This function takes a cart and a quantity and returns an array of ShopifyAnalyticsProduct objects.
+ * */
+export const productToAnalytics = (
+  cartItems: Cart['lines'],
+  quantity: number,
+  variantId: string
+) => {
+  const line = cartItems.find((line) => line.merchandise.id === variantId);
+  if (!line) return;
+
+  const { merchandise } = line;
+
+  if (!merchandise) return;
+
+  return [
+    {
+      productGid: merchandise?.product.id,
+      variantGid: variantId,
+      name: merchandise?.product.title,
+      variantName: merchandise?.title,
+      price: merchandise?.price.amount,
+      quantity
+    } as ShopifyAnalyticsProduct
+  ];
+};