forked from crowetic/commerce
Restored Index Agnostic
This commit is contained in:
parent
812535caff
commit
e9dfda1e86
@ -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}
|
||||||
|
|
||||||
|
{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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
29
framework/types.d.ts
vendored
@ -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
|
|
||||||
// }
|
|
||||||
|
@ -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}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user