1 files changed, 34 insertions, 7 deletions
diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9649fd21..0547c36e 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -5,8 +5,12 @@ import ProductDesktop from './ProductDesktop'
 import useAuth from '@/core/hooks/useAuth'
 import ProductMobile from './ProductMobile'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { gtagViewItem } from '@/core/utils/googleTag'
+import ProductDesktopVariant from './ProductDesktopVariant'
+import ProductMobileVariant from './ProductMobileVariant'
 
-const Product = ({ product }) => {
+const Product = ({ product, isVariant = false }) => {
   const auth = useAuth()
   const router = useRouter()
   const { wishlist } = useWishlist({ productId: product?.id })
@@ -26,12 +30,35 @@ const Product = ({ product }) => {
     wishlist.refetch()
   }
 
-  return (
-    <>
-      <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
-      <ProductDesktop products={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
-    </>
-  )
+  useEffect(() => {
+    if (isVariant == false) {
+      gtagViewItem(product.variants)
+    }
+  }, [product, isVariant])
+
+  if (isVariant == true) {
+    return (
+      <>
+        <ProductDesktopVariant
+          product={product}
+          wishlist={wishlist}
+          toggleWishlist={toggleWishlist}
+        />
+        <ProductMobileVariant
+          product={product}
+          wishlist={wishlist}
+          toggleWishlist={toggleWishlist}
+        />
+      </>
+    )
+  } else {
+    return (
+      <>
+        <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+        <ProductDesktop product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+      </>
+    )
+  }
 }
 
 export default Product