add product to cart

framework/commerce/types/product.ts

@@ -1,3 +1,4 @@
+import { CurrencyCode } from './../../vendure/schema.d';
 import { FacetValueFilterInput, LogicalOperator, SearchResultSortParameter } from "@framework/schema"
 
 export type ProductImage = {
@@ -46,6 +47,21 @@ export type Product = {
   options: ProductOption[]
 }
 
+export type ProductCard = {
+  id: string
+  name: string
+  slug?: string
+  imageSrc: string
+  price: number
+  currencyCode: CurrencyCode
+  oldPrice?: number,
+  discount?: number
+  weight?: number
+  // TODO: collection
+  category?: string,
+  isNotSell?: boolean
+}
+
 export type SearchProductsBody = {
   search?: string
   categoryId?: string | number

framework/vendure/utils/normalize.ts

@@ -1,24 +1,23 @@
-import { Product } from '@commerce/types/product'
+import { Product, ProductCard } from '@commerce/types/product'
 import { Cart } from '@commerce/types/cart'
 import { CartFragment, SearchResultFragment } from '../schema'
 
-export function normalizeSearchResult(item: SearchResultFragment): Product {
+export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
-  const imageUrl = item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : ''
   return {
+
     id: item.productId,
     name: item.productName,
-    description: item.description,
     slug: item.slug,
-    path: item.slug,
+    imageSrc: item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : '',
-    images: imageUrl ? [{ url: imageUrl }] : [],
+    price: (item.priceWithTax as any).min / 100,
-    price: {
+    currencyCode: item.currencyCode,
-      // TODO: check price
+    
-      value: (item.priceWithTax as any).min / 100,
+    // TODO:
-      currencyCode: item.currencyCode,
+    // oldPrice: item.price
-    },
+    // discount
-    // TODO: check product option
+    // isNotSell
-    options: [],
+    // weight
-    sku: item.sku,
+    // category
   }
 }
 

pages/index.tsx

@@ -1,27 +1,29 @@
+import { ProductCard } from '@commerce/types/product';
 import { ProductVariables } from '@framework/api/operations/get-all-products';
 import { Facet, Product } from '@framework/schema';
 import commerce from '@lib/api/commerce';
 import { ifError } from 'assert';
 import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
-import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import { FeaturedProductsCarousel, FreshProducts, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
 import { FACET } from 'src/utils/constanst.utils';
 import { getAllFeaturedFacetId, getFacetIdByName, getFreshProductFacetId } from 'src/utils/funtion.utils';
 
 interface Props {
-  veggie: Product[],
+  veggie: ProductCard[],
   facets:Facet[]
+  freshProducts: ProductCard[],
+  featuredProducts: ProductCard[],
 }
-export default function Home({ veggie, facets }: Props) {
+export default function Home({ freshProducts, featuredProducts, veggie }: Props) {
-  // console.log("total: ", freshProducts.length, featuredProducts.length)
-  console.log("rs: ", veggie)
   return (
     <>
       <HomeBanner />
       <HomeFeature />
       <HomeCategories />
-      <HomeCollection />
+      <FreshProducts data={freshProducts}/>
+      <HomeCollection data = {veggie}/>
       <HomeVideo />
       <HomeSpice />
       <FeaturedProductsCarousel />
@@ -49,41 +51,45 @@ export async function getStaticProps({
   })
   
   const freshProductvariables: ProductVariables = {}
-  // const freshFacetId = getFreshProductFacetId(facets)
+  const freshFacetId = getFreshProductFacetId(facets)
-  const veggieId = getFacetIdByName(facets,FACET.CATEGORY.PARENT_NAME,FACET.CATEGORY.VEGGIE)
+  if (freshFacetId) {
-  console.log("veggieId",veggieId)
+    freshProductvariables.facetValueIds = [freshFacetId]
-  console.log("facets",facets)
-  if (veggieId) {
-    freshProductvariables.facetValueIds = [veggieId]
   }
-  // if (freshFacetId) {
-  //   freshProductvariables.facetValueIds = [freshFacetId]
-  // }
   const freshProductsPromise = commerce.getAllProducts({
     variables: freshProductvariables,
     config,
     preview,
   })
 
-  // const allFeaturedFacetId = getAllFeaturedFacetId(facets)
+  const veggieProductvariables: ProductVariables = {}
-  // const featuredProductsPromise = commerce.getAllProducts({
+  const veggieId = getFacetIdByName(facets,FACET.CATEGORY.PARENT_NAME,FACET.CATEGORY.VEGGIE)
-  //   variables: {
+  if (veggieId) {
-  //     facetValueIds: allFeaturedFacetId
+    veggieProductvariables.facetValueIds = [veggieId]
-  //   },
+  }
-  //   config,
+  const veggieProductsPromise = commerce.getAllProducts({
-  //   preview,
+    variables: veggieProductvariables,
-  // })
+    config,
+    preview,
+  })
+
+  const allFeaturedFacetId = getAllFeaturedFacetId(facets)
+  const featuredProductsPromise = commerce.getAllProducts({
+    variables: {
+      facetValueIds: allFeaturedFacetId
+    },
+    config,
+    preview,
+  })
 
 
   try {
-    const rs = await Promise.all([freshProductsPromise])
+    const rs = await Promise.all([veggieProductsPromise,featuredProductsPromise,freshProductsPromise])
-    // const rs = await Promise.all([freshProductsPromise, featuredProductsPromise])
 
     return {
       props: {
-        veggie: rs[0].products,
+        veggie: veggieId ? rs[0].products : [],
-        // featuredProducts: rs[1].products
+        featuredProducts: rs[1].products,
-        facets
+        freshProducts: freshFacetId ? rs[2].products : [],
       },
       revalidate: 60,
     }

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"

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`}>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
-          <div className={s.productImage}>
+          <a>
-            <ImgWithLink src={imageSrc} alt={name}/>
+            <div className={s.productImage}>
-          </div>
+              <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`}>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
-            <div className={s.productname}>{name} </div>
+            <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

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>
   )
 }

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={data}
-        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}
         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."

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',