4
0
forked from crowetic/commerce

Restored Index Agnostic

This commit is contained in:
Belen Curcio 2021-01-07 11:58:00 -03:00
parent 812535caff
commit e9dfda1e86
4 changed files with 101 additions and 71 deletions

View File

@ -1,5 +1,6 @@
import { FC } from 'react' import { FC } from 'react'
import cn from 'classnames' import cn from 'classnames'
import Link from 'next/link'
import Image, { ImageProps } from 'next/image' import Image, { ImageProps } from 'next/image'
import s from './ProductCard.module.css' import s from './ProductCard.module.css'
// Restore Wishlist func // Restore Wishlist func
@ -13,44 +14,63 @@ 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)}> <Link href={`product/${product.slug}`}>
{variant === 'slim' ? ( <a
<div className="relative overflow-hidden box-border"> className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20"> >
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words"> {variant === 'slim' ? (
{product.name} <div className="relative overflow-hidden box-border">
</span> <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
{/* Image */} <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
</div> {product.name}
</div> </span>
) : (
<>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>{product.price}</span>
</div> </div>
</div> {product.images[0] && (
<div className={s.imageContainer}>
{firstImage.src && (
<Image <Image
quality="85"
alt={product.name} alt={product.name}
className={s.productImage} src={product.images[0].url}
src={firstImage.src} height={320}
height={540} width={320}
width={540} layout="fixed"
{...imgProps} {...imgProps}
/> />
)} )}
</div> </div>
</> ) : (
)} <>
</a> <div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>
{product.prices[0].value}
&nbsp;
{product.prices[0].currencyCode}
</span>
</div>
</div>
<div className={s.imageContainer}>
{product.images[0] && (
<Image
alt={product.name}
className={s.productImage}
src={product.images[0].url}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
)}
</div>
</>
)}
</a>
</Link>
) )
} }

View File

@ -1,15 +1,16 @@
.root { .root {
@apply w-full; @apply w-full relative;
height: 320px;
min-width: 100%; min-width: 100%;
} }
.container { .container {
@apply flex flex-row items-center; @apply flex flex-row items-center;
}
& > * { .container > * {
@apply flex-1 px-16 py-4; @apply relative flex-1 px-16 py-4 h-full;
width: 430px; min-height: 320px;
}
} }
.primary { .primary {

29
framework/types.d.ts vendored
View File

@ -1,25 +1,20 @@
interface ProductImage {
url: string
alt?: string
}
interface Product { interface Product {
id: string | number id: string | number
name: string name: string
description: string description: string
images: Image[] images: ProductImage[]
prices: ProductPrice[]
slug: string slug: string
price: string path?: string
variantId: string
} }
interface Image { interface ProductPrice {
src: string value: number | string
alt?: string currencyCode: 'USD' | 'ARS'
type?: 'price' | 'retail' | 'sale' | string
} }
// interface NextImageProps {
// src: string
// width: number | string
// height: number | string
// layout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
// priority?: boolean
// loading?: 'eager' | 'lazy'
// sizes?: string
// alt?: string
// }

View File

@ -13,13 +13,23 @@ 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 productsNormalizer(arr: any[]) {
// Normalizes products arr response and flattens node edges // Normalizes products arr response and flattens node edges
return arr.map( return arr.map(
({ ({
node: { entityId: id, images, variants, productOptions, ...rest }, node: {
entityId: id,
images,
variants,
productOptions,
prices,
path,
...rest
},
}) => ({ }) => ({
id, id,
path,
slug: path.slice(1, -1),
images: images.edges.map( images: images.edges.map(
({ node: { urlOriginal, altText, ...rest } }: any) => ({ ({ node: { urlOriginal, altText, ...rest } }: any) => ({
url: urlOriginal, url: urlOriginal,
@ -29,6 +39,12 @@ function normalize(arr: any[]) {
), ),
variants: variants.edges.map(({ node }: any) => node), variants: variants.edges.map(({ node }: any) => node),
productOptions: productOptions.edges.map(({ node }: any) => node), productOptions: productOptions.edges.map(({ node }: any) => node),
prices: [
{
value: prices.price.value,
currencyCode: prices.price.currencyCode,
},
],
...rest, ...rest,
}) })
) )
@ -46,10 +62,8 @@ export async function getStaticProps({
preview, preview,
}) })
const products = normalize(rawProducts) // Remove normalizer and send to framework provider.
const products = productsNormalizer(rawProducts)
// 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 })
@ -83,11 +97,11 @@ export default function Home({
/> />
))} ))}
</Grid> </Grid>
{/* <Marquee variant="secondary"> <Marquee variant="secondary">
{bestSelling.slice(3, 6).map(({ node }) => ( {products.slice(0, 3).map((product, i) => (
<ProductCard <ProductCard
key={node.path} key={product.id}
product={node} product={product}
variant="slim" variant="slim"
imgProps={{ imgProps={{
width: 320, width: 320,
@ -107,22 +121,22 @@ export default function Home({
Natural." Natural."
/> />
<Grid layout="B"> <Grid layout="B">
{featured.slice(3, 6).map(({ node }, i) => ( {products.slice(0, 3).map((product, i) => (
<ProductCard <ProductCard
key={node.path} key={product.id}
product={node} product={product}
imgProps={{ imgProps={{
width: i === 1 ? 1080 : 540, width: i === 0 ? 1080 : 540,
height: i === 1 ? 1080 : 540, height: i === 0 ? 1080 : 540,
}} }}
/> />
))} ))}
</Grid> </Grid>
<Marquee> <Marquee>
{bestSelling.slice(0, 3).map(({ node }) => ( {products.slice(0, 3).map((product, i) => (
<ProductCard <ProductCard
key={node.path} key={product.id}
product={node} product={product}
variant="slim" variant="slim"
imgProps={{ imgProps={{
width: 320, width: 320,
@ -130,7 +144,7 @@ export default function Home({
}} }}
/> />
))} ))}
</Marquee> */} </Marquee>
{/* <HomeAllProductsGrid {/* <HomeAllProductsGrid
newestProducts={newestProducts} newestProducts={newestProducts}
categories={categories} categories={categories}