Add watermark on product card image

1 files changed, 8 insertions, 2 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index fa555bcf..0b42d28a 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -6,6 +6,7 @@ import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import ImageNext from 'next/image'
 import { useRouter } from 'next/router'
+import { useMemo } from 'react'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const router = useRouter()
@@ -16,6 +17,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
     url: createSlug('/shop/product/', product.name, product.id, true)
   })
 
+  const image = useMemo(() => {
+    if (product.image) return product.image + '?watermark=true'
+    return '/images/noimage.jpeg'
+  }, [product.image])
+
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[300px] md:h-[350px]'>
@@ -24,7 +30,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           className='border-b border-gray_r-4 relative'
         >
           <Image
-            src={product?.image}
+            src={image}
             alt={product?.name}
             className='w-full object-contain object-center h-36 sm:h-48'
           />
@@ -150,7 +156,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             className='relative'
           >
             <Image
-              src={product?.image}
+              src={image}
               alt={product?.name}
               className='w-full object-contain object-center h-36'
             />