add product to cart

2025-07-27 04:01:23 +00:00 · 2021-10-06 08:35:55 +07:00
parent e12c43f393 6ad8f75c67
commit 7ade05a5af
9 changed files with 103 additions and 198 deletions
--- a/src/components/common/ImgWithLink/ImgWithLink.tsx
+++ b/src/components/common/ImgWithLink/ImgWithLink.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import s from './ImgWithLink.module.scss'
 import Image from 'next/image'
-import { BLUR_DATA_IMG } from 'src/utils/constanst.utils'
+import { BLUR_DATA_IMG, DEFAULT_IMG } from 'src/utils/constanst.utils'

 export interface ImgWithLinkProps {
    src: string,
@@ -12,7 +12,7 @@ export interface ImgWithLinkProps {
 const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps) => {
    return (
        <div className={s.imgWithLink}>
-            <Image src={src} alt={alt}
+            <Image src={src || DEFAULT_IMG.src} alt={alt}
                layout="fill"
                className={s.imgWithLink}
                placeholder="blur"
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -1,8 +1,8 @@
+import { ProductCard } from '@commerce/types/product'
 import Link from 'next/link'
 import React from 'react'
 import { IconBuy } from 'src/components/icons'
 import { ROUTE } from 'src/utils/constanst.utils'
-import { ProductProps } from 'src/utils/types.utils'
 import { ImgWithLink } from '..'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
@@ -11,16 +11,18 @@ import LabelCommon from '../LabelCommon/LabelCommon'
 import s from './ProductCard.module.scss'
 import ProductNotSell from './ProductNotSell/ProductNotSell'

-export interface ProductCardProps extends ProductProps {
+export interface ProductCardProps extends ProductCard {
  buttonText?: string
  isSingleButton?: boolean,
 }

-const ProductCard = ({
+const ProductCardComponent = ({
  category,
  name,
+  slug,
  weight,
  price,
+  currencyCode,
  buttonText = 'Buy Now',
  imageSrc,
  isNotSell,
@@ -35,24 +37,31 @@ const ProductCard = ({
  return (
    <div className={s.productCardWarpper}>
      <div className={s.cardTop}>
-        <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
-          <div className={s.productImage}>
-            <ImgWithLink src={imageSrc} alt={name}/>
-          </div>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+          <a>
+            <div className={s.productImage}>
+              <ImgWithLink src={imageSrc} alt={name}/>
+            </div>
+          </a>
        </Link>
+        {
+          category &&
        <div className={s.productLabel}>
          <LabelCommon shape="half">{category}</LabelCommon>
        </div>
+        }
      </div>
      <div className={s.cardMid}>
        <div className={s.cardMidTop}>
-          <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
-            <div className={s.productname}>{name} </div>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+            <a>
+              <div className={s.productname}>{name} </div>
+            </a>
          </Link>
          <div className={s.productWeight}>{weight}</div>
        </div>
        <div className={s.cardMidBot}>
-          <div className={s.productPrice}>{price}</div>
+          <div className={s.productPrice}>{price} {currencyCode}</div>
          <div className={s.wishList}>
            <ItemWishList />
          </div>
@@ -80,4 +89,4 @@ const ProductCard = ({
  )
 }

-export default ProductCard
+export default ProductCardComponent
--- a/src/components/modules/home/FreshProducts/FreshProducts.tsx
+++ b/src/components/modules/home/FreshProducts/FreshProducts.tsx
@@ -1,101 +1,15 @@
+import { ProductCard } from '@commerce/types/product'
 import { Product } from '@framework/schema'
 import React from 'react'
 import { CollectionCarcousel } from '..'
-import image5 from '../../../../../public/assets/images/image5.png'
-import image6 from '../../../../../public/assets/images/image6.png'
-import image7 from '../../../../../public/assets/images/image7.png'
-import image8 from '../../../../../public/assets/images/image8.png'
 interface FreshProductsProps {
-  data: Product[]
+  data: ProductCard[]
 }
-const dataTest = [
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-]

-const FreshProducts = ({data}: FreshProductsProps) => {
+const FreshProducts = ({ data }: FreshProductsProps) => {
+  if (data.length === 0) {
+    return null
+  }
  return (
    <div className="w-full">
      <CollectionCarcousel
@@ -106,41 +20,6 @@ const FreshProducts = ({data}: FreshProductsProps) => {
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
        category={"veggie"}
      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-2"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-3"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-4"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-5"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
-        itemKey="product-6"
-        title="VEGGIE"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
    </div>
  )
 }
--- a/src/components/modules/home/HomeCollection/HomeCollection.tsx
+++ b/src/components/modules/home/HomeCollection/HomeCollection.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
+import { ProductCard } from '@commerce/types/product'
 import { CollectionCarcousel } from '..'
 import image5 from '../../../../../public/assets/images/image5.png'
 import image6 from '../../../../../public/assets/images/image6.png'
 import image7 from '../../../../../public/assets/images/image7.png'
 import image8 from '../../../../../public/assets/images/image8.png'
-interface HomeCollectionProps {}
+interface HomeCollectionProps {
+  data: ProductCard[]
+}
 const dataTest = [
  {
    name: 'Tomato',
@@ -92,47 +95,39 @@ const dataTest = [
  },
 ]

-const HomeCollection = (props: HomeCollectionProps) => {
+const HomeCollection = ({data}: HomeCollectionProps) => {
  return (
    <div className="w-full">
      <CollectionCarcousel
-        type="highlight"
-        data={dataTest}
-        itemKey="product-1"
-        title="Fresh Products Today"
-        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-        category={"veggie"}
-      />
-      <CollectionCarcousel
-        data={dataTest}
+        data={data}
        itemKey="product-2"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
        category={"veggie"}
      />
      <CollectionCarcousel
-        data={dataTest}
+        data={data}
        itemKey="product-3"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
        category={"veggie"}
      />
      <CollectionCarcousel
-        data={dataTest}
+        data={data}
        itemKey="product-4"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
        category={"veggie"}
      />
      <CollectionCarcousel
-        data={dataTest}
+        data={data}
        itemKey="product-5"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
        category={"veggie"}
      />
      <CollectionCarcousel
-        data={dataTest}
+        data={data}
        itemKey="product-6"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1,6 +1,7 @@
-import { FacetConstant } from "./types.utils"
+import DefaultImg from '../../public/assets/images/default_img.jpg'

 export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII='
+export const DEFAULT_IMG = DefaultImg

 export const SOCIAL_LINKS = {
    FB: 'FB',