From ff5c75bbc5ae4b94091dc7476d312b7886caee3b Mon Sep 17 00:00:00 2001
From: oybek <digital@oybek.dev>
Date: Mon, 1 Apr 2024 18:28:57 +0400
Subject: [PATCH] feat(analytics): added products to add to cart event

---
 components/cart/actions.ts      |  9 +++++++--
 components/cart/add-to-cart.tsx |  6 ++++--
 lib/shopify/fragments/cart.ts   |  4 ++++
 lib/shopify/types.ts            |  1 +
 lib/utils.ts                    | 29 +++++++++++++++++++++++++++++
 5 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/components/cart/actions.ts b/components/cart/actions.ts
index d6cb7ba76..0f43f1990 100644
--- a/components/cart/actions.ts
+++ b/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' };
diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index affeaf341..da5cf9fe2 100644
--- a/components/cart/add-to-cart.tsx
+++ b/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}>
diff --git a/lib/shopify/fragments/cart.ts b/lib/shopify/fragments/cart.ts
index fc5c838dd..d6c89d3f3 100644
--- a/lib/shopify/fragments/cart.ts
+++ b/lib/shopify/fragments/cart.ts
@@ -37,6 +37,10 @@ const cartFragment = /* GraphQL */ `
                 name
                 value
               }
+              price {
+                amount
+                currencyCode
+              }
               product {
                 ...product
               }
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 23dc02d46..3afb70da9 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -21,6 +21,7 @@ export type CartItem = {
   merchandise: {
     id: string;
     title: string;
+    price: Money;
     selectedOptions: {
       name: string;
       value: string;
diff --git a/lib/utils.ts b/lib/utils.ts
index 69b76d29b..0745ef39a 100644
--- a/lib/utils.ts
+++ b/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
+  ];
+};