2020-10-19 13:49:02 -05:00
|
|
|
|
import { useMemo } from 'react'
|
2020-10-01 20:40:40 -05:00
|
|
|
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
2020-10-25 15:14:54 -05:00
|
|
|
|
import { getConfig } from '@lib/bigcommerce/api'
|
2020-10-02 14:51:36 -03:00
|
|
|
|
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
|
2020-10-19 13:49:02 -05:00
|
|
|
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
|
|
|
|
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
|
|
|
|
import rangeMap from '@lib/range-map'
|
2020-10-01 20:40:40 -05:00
|
|
|
|
import { Layout } from '@components/core'
|
2020-10-04 16:34:22 -03:00
|
|
|
|
import { Grid, Marquee, Hero } from '@components/ui'
|
|
|
|
|
import { ProductCard } from '@components/product'
|
2020-10-26 20:02:29 -03:00
|
|
|
|
import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
|
2020-09-30 13:36:02 -05:00
|
|
|
|
|
2020-10-24 16:10:31 -05:00
|
|
|
|
export async function getStaticProps({
|
|
|
|
|
preview,
|
|
|
|
|
locale,
|
|
|
|
|
}: GetStaticPropsContext) {
|
2020-10-25 15:14:54 -05:00
|
|
|
|
const config = getConfig({ locale })
|
2020-10-24 16:10:31 -05:00
|
|
|
|
|
2020-10-19 11:47:39 -05:00
|
|
|
|
const { products: featuredProducts } = await getAllProducts({
|
2020-10-19 13:49:02 -05:00
|
|
|
|
variables: { field: 'featuredProducts', first: 6 },
|
2020-10-25 15:14:54 -05:00
|
|
|
|
config,
|
2020-10-19 13:49:02 -05:00
|
|
|
|
})
|
|
|
|
|
const { products: bestSellingProducts } = await getAllProducts({
|
|
|
|
|
variables: { field: 'bestSellingProducts', first: 6 },
|
2020-10-25 15:14:54 -05:00
|
|
|
|
config,
|
2020-10-19 13:49:02 -05:00
|
|
|
|
})
|
|
|
|
|
const { products: newestProducts } = await getAllProducts({
|
|
|
|
|
variables: { field: 'newestProducts', first: 12 },
|
2020-10-25 15:14:54 -05:00
|
|
|
|
config,
|
2020-10-19 11:47:39 -05:00
|
|
|
|
})
|
2020-10-25 15:14:54 -05:00
|
|
|
|
const { categories, brands } = await getSiteInfo({ config })
|
|
|
|
|
const { pages } = await getAllPages({ config })
|
2020-10-05 11:44:14 -03:00
|
|
|
|
|
2020-09-30 13:36:02 -05:00
|
|
|
|
return {
|
2020-10-19 13:49:02 -05:00
|
|
|
|
props: {
|
|
|
|
|
featuredProducts,
|
|
|
|
|
bestSellingProducts,
|
|
|
|
|
newestProducts,
|
|
|
|
|
categories,
|
|
|
|
|
brands,
|
|
|
|
|
pages,
|
|
|
|
|
},
|
|
|
|
|
revalidate: 10,
|
2020-10-01 20:40:40 -05:00
|
|
|
|
}
|
2020-09-30 13:36:02 -05:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-19 13:49:02 -05:00
|
|
|
|
const nonNullable = (v: any) => v
|
|
|
|
|
|
2020-09-30 13:36:02 -05:00
|
|
|
|
export default function Home({
|
2020-10-19 11:47:39 -05:00
|
|
|
|
featuredProducts,
|
2020-10-19 13:49:02 -05:00
|
|
|
|
bestSellingProducts,
|
|
|
|
|
newestProducts,
|
2020-10-08 18:48:28 -05:00
|
|
|
|
categories,
|
2020-10-10 14:19:05 -05:00
|
|
|
|
brands,
|
2020-09-30 13:36:02 -05:00
|
|
|
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
2020-10-19 13:49:02 -05:00
|
|
|
|
const { featured, bestSelling } = useMemo(() => {
|
|
|
|
|
// Create a copy of products that we can mutate
|
|
|
|
|
const products = [...newestProducts]
|
|
|
|
|
// If the lists of featured and best selling products don't have enough
|
|
|
|
|
// products, then fill them with products from the products list, this
|
|
|
|
|
// is useful for new commerce sites that don't have a lot of products
|
|
|
|
|
return {
|
|
|
|
|
featured: rangeMap(
|
|
|
|
|
6,
|
|
|
|
|
(i) => featuredProducts[i] ?? products.shift()
|
|
|
|
|
).filter(nonNullable),
|
|
|
|
|
bestSelling: rangeMap(
|
|
|
|
|
6,
|
|
|
|
|
(i) => bestSellingProducts[i] ?? products.shift()
|
|
|
|
|
).filter(nonNullable),
|
|
|
|
|
}
|
2020-10-25 19:12:43 -05:00
|
|
|
|
}, [newestProducts, featuredProducts, bestSellingProducts])
|
2020-10-19 13:49:02 -05:00
|
|
|
|
|
2020-10-03 11:33:31 -03:00
|
|
|
|
return (
|
2020-10-21 19:22:27 -03:00
|
|
|
|
<div>
|
2020-10-16 12:46:02 -03:00
|
|
|
|
<Grid>
|
2020-10-21 21:28:28 -05:00
|
|
|
|
{featured.slice(0, 3).map(({ node }, i) => (
|
|
|
|
|
<ProductCard
|
|
|
|
|
key={node.path}
|
|
|
|
|
product={node}
|
|
|
|
|
// The first image is the largest one in the grid
|
2020-10-26 20:41:01 -03:00
|
|
|
|
imgWidth={i === 0 ? 1600 : 820}
|
|
|
|
|
imgHeight={i === 0 ? 1600 : 820}
|
2020-10-21 21:28:28 -05:00
|
|
|
|
priority
|
|
|
|
|
/>
|
2020-10-16 12:46:02 -03:00
|
|
|
|
))}
|
|
|
|
|
</Grid>
|
|
|
|
|
<Marquee variant="secondary">
|
2020-10-19 13:49:02 -05:00
|
|
|
|
{bestSelling.slice(0, 3).map(({ node }) => (
|
2020-10-21 21:28:28 -05:00
|
|
|
|
<ProductCard
|
|
|
|
|
key={node.path}
|
|
|
|
|
product={node}
|
|
|
|
|
variant="slim"
|
|
|
|
|
imgWidth={320}
|
|
|
|
|
imgHeight={320}
|
|
|
|
|
/>
|
2020-10-16 12:46:02 -03:00
|
|
|
|
))}
|
|
|
|
|
</Marquee>
|
2020-10-04 17:47:05 -03:00
|
|
|
|
<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’."
|
|
|
|
|
/>
|
2020-10-16 12:46:02 -03:00
|
|
|
|
<Grid layout="B">
|
2020-10-21 21:28:28 -05:00
|
|
|
|
{featured.slice(3, 6).map(({ node }, i) => (
|
|
|
|
|
<ProductCard
|
|
|
|
|
key={node.path}
|
|
|
|
|
product={node}
|
|
|
|
|
// The second image is the largest one in the grid
|
2020-10-21 22:02:02 -05:00
|
|
|
|
imgWidth={i === 1 ? 1600 : 820}
|
|
|
|
|
imgHeight={i === 1 ? 1600 : 820}
|
2020-10-21 21:28:28 -05:00
|
|
|
|
/>
|
2020-10-16 12:46:02 -03:00
|
|
|
|
))}
|
|
|
|
|
</Grid>
|
|
|
|
|
<Marquee>
|
2020-10-19 13:49:02 -05:00
|
|
|
|
{bestSelling.slice(3, 6).map(({ node }) => (
|
2020-10-21 21:28:28 -05:00
|
|
|
|
<ProductCard
|
|
|
|
|
key={node.path}
|
|
|
|
|
product={node}
|
|
|
|
|
variant="slim"
|
|
|
|
|
imgWidth={320}
|
|
|
|
|
imgHeight={320}
|
|
|
|
|
/>
|
2020-10-16 12:46:02 -03:00
|
|
|
|
))}
|
|
|
|
|
</Marquee>
|
2020-10-26 20:02:29 -03:00
|
|
|
|
<HomeAllProductsGrid
|
|
|
|
|
categories={categories}
|
|
|
|
|
brands={brands}
|
|
|
|
|
newestProducts={newestProducts}
|
|
|
|
|
/>
|
2020-10-12 10:46:17 -03:00
|
|
|
|
</div>
|
2020-10-03 11:33:31 -03:00
|
|
|
|
)
|
2020-09-30 11:44:38 -05:00
|
|
|
|
}
|
2020-10-01 21:30:08 -05:00
|
|
|
|
|
|
|
|
|
Home.Layout = Layout
|