fixed code

pkE2024 · May 11, 2024 · 602988d · 602988d
1 parent a9b0fb3
commit 602988d
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 10 deletions.
diff --git a/components/cart/add-to-cart-button.tsx b/components/cart/add-to-cart-button.tsx
@@ -4,10 +4,11 @@ import clsx from 'clsx';
 // import { addItem } from 'components/cart/actions';
 import { Product, ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
-import { useFormStatus } from 'react-dom';
 import { useAppDispatch } from 'store/hooks';
 import { cartActions } from 'store/actions/cart.action';
 import { v4 as uuidv4 } from 'uuid';
+import { trackEvent } from 'utils/mixpanel';
+import { useFormStatus } from 'react-dom';
 
 function SubmitButton({
   availableForSale,
@@ -65,6 +66,16 @@ function SubmitButton({
             tempId: uuidv4()
           })
         );
+        trackEvent('Add To Cart', {
+          Product_Name: product.title,
+          Product_Url: '',
+          Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+          Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+          Source: '',
+          Category: '',
+          Tags: product.tags,
+          Variant_SKU: ''
+        });
       }}
       aria-label="Add to cart"
       aria-disabled={pending}
@@ -87,7 +98,7 @@ export function AddToCartButton({
   variants: any[];
   availableForSale: boolean;
   buttonClasses: string;
-  product: Product;
+  product: any;
 }) {
   const searchParams = useSearchParams();
   const defaultVariantId = variants[0]?.id;

diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
@@ -7,14 +7,25 @@ import clsx from 'clsx';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
 import { useFormStatus } from 'react-dom';
+import { trackEvent } from 'utils/mixpanel';
 
-function SubmitButton({ removeIcon, item }: { removeIcon?: boolean; item?: CartItem }) {
+function SubmitButton({ removeIcon, product }: { removeIcon?: boolean; product?: any }) {
   const { pending } = useFormStatus();
   const dispatch = useAppDispatch();
   return (
     <button
       type="submit"
       onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        trackEvent('Removed From Cart', {
+          Product_Name: product.title,
+          Product_Url: '',
+          Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+          Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+          Source: '',
+          Category: '',
+          Tags: product.tags,
+          Variant_SKU: ''
+        });
         if (pending) e.preventDefault();
         dispatch(cartActions.removeCart({ lineId: item?.id }));
       }}

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
@@ -14,7 +14,7 @@ import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
 import { ShoppingBagIcon } from '@heroicons/react/24/outline';
 import { useAppSelector } from 'store/hooks';
-
+import { trackEvent } from 'utils/mixpanel';
 import { useCart } from '@/lib/hooks/use-cart';
 
 type MerchandiseSearchParams = {
@@ -184,12 +184,16 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                       />
                     </div>
                   </div>
-                  <a
+                  <Link
                     href={carts.checkoutUrl}
                     className="block w-full  bg-black p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      trackEvent('Checkout Started');
+                    }}
                   >
                     Proceed to Checkout
-                  </a>
+                  </Link>
                 </div>
               )}
             </Dialog.Panel>

diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
@@ -1,8 +1,10 @@
+'use client';
 import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import { AddToCartButton } from '@/components/cart/add-to-cart-button';
+import { trackEvent } from 'utils/mixpanel';
 
 export function GridTileImage({
   isInteractive = true,
@@ -40,7 +42,21 @@ export function GridTileImage({
           <div className="flex h-full w-full flex-col">
             <div className="relative">
               <div className=" h-full w-full overflow-hidden object-cover">
-                <Link href={`/product/${product?.handle}`}>
+                <Link
+                  href={`/product/${product?.handle}`}
+                  onClick={() => {
+                    trackEvent('Product Clicked', {
+                      Product_Name: product.title,
+                      Product_Url: '',
+                      Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+                      Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+                      Source: '',
+                      Category: '',
+                      Tags: product.tags,
+                      Variant_SKU: ''
+                    });
+                  }}
+                >
                   <Image
                     className={clsx(
                       ' relative aspect-square h-full min-h-[200px] w-full object-cover  md:min-h-[300px]',
@@ -104,7 +120,7 @@ export function GridTileImage({
               <Suspense fallback={null}>
                 <AddToCartButton
                   product={product}
-                  variants={product.variants}
+                  variants={product?.variants}
                   availableForSale={product?.availableForSale || false}
                   buttonClasses={
                     'relative flex  flex-1 text-sm hover:text-purple-400  items-center justify-center text-base bg-black border border-black text-white  md:px-8 uppercase tracking-wide font-normal md:font-semibold'

diff --git a/components/product/product-card.tsx b/components/product/product-card.tsx
@@ -1,6 +1,8 @@
+'use client';
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
+import { trackEvent } from 'utils/mixpanel';
 
 const ProductCard = ({ product }: { product: any }) => {
   return (
@@ -72,7 +74,21 @@ const ProductCard = ({ product }: { product: any }) => {
         </div>
       </div>
       <div className="flex w-full items-center justify-center overflow-hidden rounded-b-sm bg-black p-4">
-        <Link href="/products/purify-glow-cleanser-mask">
+        <Link
+          href="/products/purify-glow-cleanser-mask"
+          onClick={() => {
+            trackEvent('Add to cart', {
+              Product_Name: product.title,
+              Product_Url: '',
+              Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+              Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+              Source: '',
+              Category: '',
+              Tags: product.tags,
+              Variant_SKU: ''
+            });
+          }}
+        >
           <span className=" flex self-center text-center text-[8px] font-semibold uppercase text-white md:text-xs">
             Add to cart
           </span>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "embla-carousel-autoplay": "^8.0.2",
     "embla-carousel-react": "^8.0.2",
     "geist": "^1.3.0",
+    "mixpanel-browser": "^2.50.0",
     "next": "^14.3.0-canary.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -63,6 +64,7 @@
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.12",
+    "@types/mixpanel-browser": "^2.49.0",
     "@types/node": "20.12.7",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",

diff --git a/utils/mixpanel.ts b/utils/mixpanel.ts
@@ -0,0 +1,17 @@
+// utils/mixpanel.ts
+import mixpanel from 'mixpanel-browser';
+
+mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN!, {
+  debug: true,
+  loaded: () => {
+    console.log('Mixpanel loaded!');
+  }
+});
+
+export const trackEvent = (name: string, props?: Record<string, unknown>): void => {
+  if (typeof window !== 'undefined') {
+    mixpanel.track(name, props);
+  }
+};
+
+export default mixpanel;