4
0
forked from crowetic/commerce

Filtered products for the landing

This commit is contained in:
Luis Alvarez 2020-10-19 13:49:02 -05:00
parent f4bc27666b
commit e5ee8caaec
2 changed files with 56 additions and 12 deletions

7
lib/range-map.ts Normal file
View File

@ -0,0 +1,7 @@
export default function rangeMap(n: number, fn: (i: number) => any) {
const arr = []
while (n > arr.length) {
arr.push(fn(arr.length))
}
return arr
}

View File

@ -1,39 +1,76 @@
import { useMemo } from 'react'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products' import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
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'
import { Layout } from '@components/core' import { Layout } from '@components/core'
import { Grid, Marquee, Hero } from '@components/ui' import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product' import { ProductCard } from '@components/product'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
export async function getStaticProps({ preview }: GetStaticPropsContext) { export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { pages } = await getAllPages()
const { products } = await getAllProducts()
const { products: featuredProducts } = await getAllProducts({ const { products: featuredProducts } = await getAllProducts({
variables: { field: 'featuredProducts', first: 3 }, variables: { field: 'featuredProducts', first: 6 },
})
const { products: bestSellingProducts } = await getAllProducts({
variables: { field: 'bestSellingProducts', first: 6 },
})
const { products: newestProducts } = await getAllProducts({
variables: { field: 'newestProducts', first: 12 },
}) })
const { categories, brands } = await getSiteInfo() const { categories, brands } = await getSiteInfo()
const { pages } = await getAllPages()
return { return {
props: { pages, products, featuredProducts, categories, brands }, props: {
featuredProducts,
bestSellingProducts,
newestProducts,
categories,
brands,
pages,
},
revalidate: 10,
} }
} }
const nonNullable = (v: any) => v
export default function Home({ export default function Home({
products,
featuredProducts, featuredProducts,
bestSellingProducts,
newestProducts,
categories, categories,
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
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),
}
// Props from getStaticProps won't change
}, [])
return ( return (
<div className="mt-3"> <div className="mt-3">
<Grid> <Grid>
{featuredProducts.map(({ node }) => ( {featured.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} /> <ProductCard key={node.path} product={node} />
))} ))}
</Grid> </Grid>
<Marquee variant="secondary"> <Marquee variant="secondary">
{products.slice(0, 3).map(({ node }) => ( {bestSelling.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" /> <ProductCard key={node.path} product={node} variant="slim" />
))} ))}
</Marquee> </Marquee>
@ -48,12 +85,12 @@ export default function Home({
Natural." Natural."
/> />
<Grid layout="B"> <Grid layout="B">
{products.slice(3, 6).map(({ node }) => ( {featured.slice(3, 6).map(({ node }) => (
<ProductCard key={node.path} product={node} /> <ProductCard key={node.path} product={node} />
))} ))}
</Grid> </Grid>
<Marquee> <Marquee>
{products.slice(0, 3).map(({ node }) => ( {bestSelling.slice(3, 6).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" /> <ProductCard key={node.path} product={node} variant="slim" />
))} ))}
</Marquee> </Marquee>
@ -84,7 +121,7 @@ export default function Home({
</div> </div>
<div className="flex-1"> <div className="flex-1">
<Grid layout="normal"> <Grid layout="normal">
{products.map(({ node }) => ( {newestProducts.map(({ node }) => (
<ProductCard key={node.path} product={node} variant="simple" /> <ProductCard key={node.path} product={node} variant="simple" />
))} ))}
</Grid> </Grid>