crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-04-23 19:37:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
Belen Curcio 2021-01-07 11:19:28 -03:00
parent f7956f8d01
commit 812535caff
3 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/product/ProductCard/FUTURE_ProductCard.tsx
View File

@ -13,6 +13,7 @@ interface Props {
} }
const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => { const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
const firstImage = product.images[0]
return ( return (
<a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}> <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
{variant === 'slim' ? ( {variant === 'slim' ? (
@ -36,14 +37,16 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
</div> </div>
</div> </div>
<div className={s.imageContainer}> <div className={s.imageContainer}>
<Image {firstImage.src && (
alt={product.name} <Image
className={s.productImage} alt={product.name}
src={product.images[0].src} className={s.productImage}
height={540} src={firstImage.src}
width={540} height={540}
{...imgProps} width={540}
/> {...imgProps}
/>
)}
</div> </div>
</> </>
)} )}

4
framework/types.d.ts vendored
View File

@ -2,13 +2,13 @@ interface Product {
id: string | number id: string | number
name: string name: string
description: string description: string
images: Images[] images: Image[]
slug: string slug: string
price: string price: string
variantId: string variantId: string
} }
interface Images { interface Image {
src: string src: string
alt?: string alt?: string
} }

21
pages/index.tsx
View File

@ -12,6 +12,7 @@ import getAllPages from '@framework/api/operations/get-all-pages'
// Outputs from providers should already be normalized // Outputs from providers should already be normalized
// TODO (bc) move this to the provider // TODO (bc) move this to the provider
function normalize(arr: any[]) { function normalize(arr: any[]) {
// Normalizes products arr response and flattens node edges // Normalizes products arr response and flattens node edges
return arr.map( return arr.map(
@ -19,9 +20,15 @@ function normalize(arr: any[]) {
node: { entityId: id, images, variants, productOptions, ...rest }, node: { entityId: id, images, variants, productOptions, ...rest },
}) => ({ }) => ({
id, id,
images: images.edges, images: images.edges.map(
variants: variants.edges, ({ node: { urlOriginal, altText, ...rest } }: any) => ({
productOptions: productOptions.edges, url: urlOriginal,
alt: altText,
...rest,
})
),
variants: variants.edges.map(({ node }: any) => node),
productOptions: productOptions.edges.map(({ node }: any) => node),
...rest, ...rest,
}) })
) )
@ -41,7 +48,7 @@ export async function getStaticProps({
const products = normalize(rawProducts) const products = normalize(rawProducts)
console.log(products) // console.log(products)
const { categories, brands } = await getSiteInfo({ config, preview }) const { categories, brands } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview }) const { pages } = await getAllPages({ config, preview })
@ -65,10 +72,10 @@ export default function Home({
return ( return (
<div> <div>
<Grid> <Grid>
{products.slice(0, 3).map(({ p }, i) => ( {products.slice(0, 3).map((product, i) => (
<ProductCard <ProductCard
key={p.id} key={product.id}
product={p} product={product}
imgProps={{ imgProps={{
width: i === 0 ? 1080 : 540, width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540, height: i === 0 ? 1080 : 540,