forked from crowetic/commerce
Filtered products for the landing
This commit is contained in:
parent
f4bc27666b
commit
e5ee8caaec
7
lib/range-map.ts
Normal file
7
lib/range-map.ts
Normal 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
|
||||||
|
}
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user