forked from crowetic/commerce
08a6b2efcf
* Filter products from the homepage grid display when they do not have and image. Provide a fallback/placeholder image for the ProductCard for when a product does not have an image. * Avoid repeating placeholder image reference and move to a variable * Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback. * Filter products from the homepage grid display when they do not have and image. Provide a fallback/placeholder image for the ProductCard for when a product does not have an image. * Avoid repeating placeholder image reference and move to a variable * Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback. * Remove comment about filter. Code removed so no longer needed. Co-authored-by: B <curciobelen@gmail.com>
115 lines
3.1 KiB
TypeScript
115 lines
3.1 KiB
TypeScript
import { Layout } from '@components/common'
|
||
import { Grid, Marquee, Hero } from '@components/ui'
|
||
import { ProductCard } from '@components/product'
|
||
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
|
||
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||
|
||
import { getConfig } from '@framework/api'
|
||
import getAllProducts from '@framework/product/get-all-products'
|
||
import getSiteInfo from '@framework/common/get-site-info'
|
||
import getAllPages from '@framework/common/get-all-pages'
|
||
|
||
export async function getStaticProps({
|
||
preview,
|
||
locale,
|
||
}: GetStaticPropsContext) {
|
||
const config = getConfig({ locale })
|
||
|
||
const { products } = await getAllProducts({
|
||
variables: { first: 12 },
|
||
config,
|
||
preview,
|
||
})
|
||
|
||
const { categories, brands } = await getSiteInfo({ config, preview })
|
||
const { pages } = await getAllPages({ config, preview })
|
||
|
||
return {
|
||
props: {
|
||
products,
|
||
categories,
|
||
brands,
|
||
pages,
|
||
},
|
||
revalidate: 14400,
|
||
}
|
||
}
|
||
|
||
export default function Home({
|
||
products,
|
||
brands,
|
||
categories,
|
||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||
return (
|
||
<>
|
||
<Grid>
|
||
{products.slice(0, 3).map((product, i) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
product={product}
|
||
imgProps={{
|
||
width: i === 0 ? 1080 : 540,
|
||
height: i === 0 ? 1080 : 540,
|
||
}}
|
||
/>
|
||
))}
|
||
</Grid>
|
||
<Marquee variant="secondary">
|
||
{products.slice(0, 3).map((product, i) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
product={product}
|
||
variant="slim"
|
||
imgProps={{
|
||
width: 320,
|
||
height: 320,
|
||
}}
|
||
/>
|
||
))}
|
||
</Marquee>
|
||
<Hero
|
||
headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
|
||
description="
|
||
The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
|
||
‘Carbon’ iteration, and now release details have been locked in for
|
||
this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
|
||
shoe was originally called ‘Abez’, which translated to ‘Tin’ in
|
||
Hebrew. It’s now undergone a name change, and will be referred to as
|
||
‘Natural’."
|
||
/>
|
||
<Grid layout="B">
|
||
{products.slice(0, 3).map((product, i) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
product={product}
|
||
imgProps={{
|
||
width: i === 0 ? 1080 : 540,
|
||
height: i === 0 ? 1080 : 540,
|
||
}}
|
||
/>
|
||
))}
|
||
</Grid>
|
||
<Marquee>
|
||
{products.slice(0, 3).map((product, i) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
product={product}
|
||
variant="slim"
|
||
imgProps={{
|
||
width: 320,
|
||
height: 320,
|
||
}}
|
||
/>
|
||
))}
|
||
</Marquee>
|
||
{/* <HomeAllProductsGrid
|
||
newestProducts={products}
|
||
categories={categories}
|
||
brands={brands}
|
||
/> */}
|
||
</>
|
||
)
|
||
}
|
||
|
||
Home.Layout = Layout
|