From 68f4e5beb526e5392416658f81d80ce1e6ae6aba Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 4 Oct 2021 15:07:09 +0700 Subject: [PATCH] :sparkles: feat: fresh products :%s --- framework/commerce/types/product.ts | 16 +++ framework/vendure/utils/normalize.ts | 27 ++-- pages/index.tsx | 5 +- public/assets/images/default_img.jpg | Bin 0 -> 4357 bytes .../common/ImgWithLink/ImgWithLink.tsx | 4 +- .../common/ProductCard/ProductCard.tsx | 31 +++-- .../home/FreshProducts/FreshProducts.tsx | 125 ------------------ src/utils/constanst.utils.ts | 3 + 8 files changed, 56 insertions(+), 155 deletions(-) create mode 100644 public/assets/images/default_img.jpg diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts index fec48a63d..39f594a7a 100644 --- a/framework/commerce/types/product.ts +++ b/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 diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts index b99aa5096..a5cb96c8a 100644 --- a/framework/vendure/utils/normalize.ts +++ b/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 { - const imageUrl = item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : '' +export function normalizeSearchResult(item: SearchResultFragment): ProductCard { return { + id: item.productId, name: item.productName, - description: item.description, slug: item.slug, - path: item.slug, - images: imageUrl ? [{ url: imageUrl }] : [], - price: { - // TODO: check price - value: (item.priceWithTax as any).min / 100, - currencyCode: item.currencyCode, - }, - // TODO: check product option - options: [], - sku: item.sku, + imageSrc: item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : '', + price: (item.priceWithTax as any).min / 100, + currencyCode: item.currencyCode, + + // TODO: + // oldPrice: item.price + // discount + // isNotSell + // weight + // category } } diff --git a/pages/index.tsx b/pages/index.tsx index 3082d1790..55988ada1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,7 +3,7 @@ import { Product } from '@framework/schema'; import commerce from '@lib/api/commerce'; 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 { getAllFeaturedFacetId, getFreshProductFacetId } from 'src/utils/funtion.utils'; @@ -13,13 +13,12 @@ interface Props { } export default function Home({ freshProducts, featuredProducts }: Props) { - console.log("total: ", freshProducts.length, featuredProducts.length) - console.log("rs: ", freshProducts, featuredProducts) return ( <> + diff --git a/public/assets/images/default_img.jpg b/public/assets/images/default_img.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f72d03596acd9adc6738829610afb1b1001cb2bf GIT binary patch literal 4357 zcmex=ggl;wax*+5%QU0q#I+tk#+z|_>i!5-O|{|6WZIT$}Ow=gp* zF)#@-G7B>PKf)jhbUFwC-3kLN%uI}IKq+kjppTeXSlF21@{CN(g2IM@EJlfiLL!Qe zL5)hr6P*@r1S%FmF#>E9NK_EnV2J1~1|DWcpaYl%8SEK;FM!!PN{@!XXb2DpflAY0 zsWT3?GQO`1-*?Y^r1`CLLYDeGrS%yd#pZeb`#*?sJWDH`6ME#apmp;F0%j2_&3NXz zOLmCm>@RMgc-f4P}`+#0+m#|oGOs^7qq+Z zEI(#`jpSbT&9T92PEQZa+j(hbxtR9cf`%0HKKZKseT$9?UJOK znpL=+Go;}2k2ARnSBP~RK6Pxtb;_3%kKA8uDGS5JQX*W9?K;A{06=M@iMexErZL95&B@ol+xi)JNzbg*pn4PN52tJ_@tHs33U zL>Zgkr&nxr-*aXwiJNiTyH9#0#r`JctqHT0o;xc&cl$Y| zW?tIupALp6c3wEK^WwJL{Zk~j{R`kJ(kn62E6JUm|C9|V#4OW2m#2HKG*G1@P>A6; zMDtCcN|H1?ugY4sR$ah1bk)k9ba$@&fBUx_xZi%MdRy}0m$tVl4F(2|X9hESr>X9i zh?$`4C$9WsrHr4j@TLPoG0#`;+5(DCR-23WM3*d|WqoLayVag*t38a@+twD$u{PhD zr`a*{+58_D1iA8VcP+~5%lOZ*vH{|t+{3Sf#qQW`W#0XtVf|a9*&x!u{Na~*Z)be? zJrfXJ48OaSA!;62{rY`) zci11pp3n7<9o!8KE&Mio^u1kYam;d|g$=E}#oT?dcjwDjZ=VMC8cQEg&OdzKq;^AQ zQo(xO2O>*$o)0h0)GNMvhpTe&9&Jx>itH<`_*Pm04o!`%+5D&0)-F6dJO0)B6?qH{ zMtk$+PtC1;xPoJL!LKWE+uNV|&HDgk@x2Eop;OdOM+{6}i@BCrO?%Gua^AZ2ZsO{z z8zMki=&B2_4p<6wdx7S&z7K0vL8+<9^6KN8S06BY>4wIyo4C6w_p(o-;2j~})f?Zt zf1GmU_>$&h+tya>*V^)}_g>WYM|0Ar*}s|q@+9L?u|J|d$0ogDEC0_Be=F4-L?+~e zGJ+u}aW#NLf)awUT~KbLPDp(JA@xi@uC;z<4{gs??cTQ0zUA1ZV?gg50A++NQ$Pue zKkDa~Y#oK=_BT%|Z4A3xz0wqS=ATKM>#-E$;Y;YRW^ zRZa(GVC8At3+%CIG6LDQN%z literal 0 HcmV?d00001 diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx index 4f61946e0..a31a14832 100644 --- 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 (
- {alt}
- -
- -
+ + +
+ +
+ + { + category &&
{category}
+ }
- -
{name}
+ + +
{name}
+
{weight}
-
{price}
+
{price} {currencyCode}
@@ -80,4 +89,4 @@ const ProductCard = ({ ) } -export default ProductCard +export default ProductCardComponent diff --git a/src/components/modules/home/FreshProducts/FreshProducts.tsx b/src/components/modules/home/FreshProducts/FreshProducts.tsx index b06138079..586a572dd 100644 --- a/src/components/modules/home/FreshProducts/FreshProducts.tsx +++ b/src/components/modules/home/FreshProducts/FreshProducts.tsx @@ -1,99 +1,9 @@ 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[] } -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) => { return ( @@ -106,41 +16,6 @@ const FreshProducts = ({data}: FreshProductsProps) => { subtitle="Last call! Shop deep deals on 100+ bulk picks while you can." category={"veggie"} /> - - - - -
) } diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index f66d6a7ea..e6ae9fabc 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -1,4 +1,7 @@ +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',