forked from crowetic/commerce
Merge branch 'master' of github.com:okbel/e-comm-example
This commit is contained in:
commit
95965f9f49
@ -1,21 +1,46 @@
|
|||||||
import getAllProducts from '../../operations/get-all-products'
|
import getAllProducts, {
|
||||||
|
Products,
|
||||||
|
Product,
|
||||||
|
} from '../../operations/get-all-products'
|
||||||
import type { ProductsHandlers } from '../products'
|
import type { ProductsHandlers } from '../products'
|
||||||
|
|
||||||
|
const SORT: { [key: string]: string | undefined } = {
|
||||||
|
latest: 'date_modified',
|
||||||
|
trending: 'total_sold',
|
||||||
|
price: 'price',
|
||||||
|
}
|
||||||
|
const LIMIT = 12
|
||||||
|
|
||||||
// Return current cart info
|
// Return current cart info
|
||||||
const getProducts: ProductsHandlers['getProducts'] = async ({
|
const getProducts: ProductsHandlers['getProducts'] = async ({
|
||||||
res,
|
res,
|
||||||
body: { search, category, brand },
|
body: { search, category, brand, sort },
|
||||||
config,
|
config,
|
||||||
}) => {
|
}) => {
|
||||||
// Use a dummy base as we only care about the relative path
|
// Use a dummy base as we only care about the relative path
|
||||||
const url = new URL('/v3/catalog/products', 'http://a')
|
const url = new URL('/v3/catalog/products', 'http://a')
|
||||||
|
|
||||||
|
url.searchParams.set('is_visible', 'true')
|
||||||
|
url.searchParams.set('limit', String(LIMIT))
|
||||||
|
|
||||||
if (search) url.searchParams.set('keyword', search)
|
if (search) url.searchParams.set('keyword', search)
|
||||||
|
|
||||||
if (category && Number.isInteger(Number(category)))
|
if (category && Number.isInteger(Number(category)))
|
||||||
url.searchParams.set('categories:in', category)
|
url.searchParams.set('categories:in', category)
|
||||||
|
|
||||||
if (brand && Number.isInteger(Number(brand)))
|
if (brand && Number.isInteger(Number(brand)))
|
||||||
url.searchParams.set('brand_id', brand)
|
url.searchParams.set('brand_id', brand)
|
||||||
|
|
||||||
|
if (sort) {
|
||||||
|
const [_sort, direction] = sort.split('-')
|
||||||
|
const sortValue = SORT[_sort]
|
||||||
|
|
||||||
|
if (sortValue && direction) {
|
||||||
|
url.searchParams.set('sort', sortValue)
|
||||||
|
url.searchParams.set('direction', direction)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// We only want the id of each product
|
// We only want the id of each product
|
||||||
url.searchParams.set('include_fields', 'id')
|
url.searchParams.set('include_fields', 'id')
|
||||||
|
|
||||||
@ -25,7 +50,25 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
|
|||||||
const entityIds = data.map((p) => p.id)
|
const entityIds = data.map((p) => p.id)
|
||||||
const found = entityIds.length > 0
|
const found = entityIds.length > 0
|
||||||
// We want the GraphQL version of each product
|
// We want the GraphQL version of each product
|
||||||
const { products } = await getAllProducts({ variables: { entityIds } })
|
const graphqlData = await getAllProducts({
|
||||||
|
variables: { first: LIMIT, entityIds },
|
||||||
|
})
|
||||||
|
// Put the products in an object that we can use to get them by id
|
||||||
|
const productsById = graphqlData.products.reduce<{ [k: number]: Product }>(
|
||||||
|
(prods, p) => {
|
||||||
|
prods[p.node.entityId] = p
|
||||||
|
return prods
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
)
|
||||||
|
const products: Products = found ? [] : graphqlData.products
|
||||||
|
|
||||||
|
// Populate the products array with the graphql products, in the order
|
||||||
|
// assigned by the list of entity ids
|
||||||
|
entityIds.forEach((id) => {
|
||||||
|
const product = productsById[id]
|
||||||
|
if (product) products.push(product)
|
||||||
|
})
|
||||||
|
|
||||||
res.status(200).json({ data: { products, found } })
|
res.status(200).json({ data: { products, found } })
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,7 @@ export type SearchProductsData = {
|
|||||||
export type ProductsHandlers = {
|
export type ProductsHandlers = {
|
||||||
getProducts: BigcommerceHandler<
|
getProducts: BigcommerceHandler<
|
||||||
SearchProductsData,
|
SearchProductsData,
|
||||||
{ search?: 'string'; category?: string; brand?: string }
|
{ search?: 'string'; category?: string; brand?: string; sort?: string }
|
||||||
>
|
>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,11 +12,12 @@ export type SearchProductsInput = {
|
|||||||
search?: string
|
search?: string
|
||||||
categoryId?: number
|
categoryId?: number
|
||||||
brandId?: number
|
brandId?: number
|
||||||
|
sort?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
|
export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
|
||||||
options,
|
options,
|
||||||
{ search, categoryId, brandId },
|
{ search, categoryId, brandId, sort },
|
||||||
fetch
|
fetch
|
||||||
) => {
|
) => {
|
||||||
// Use a dummy base as we only care about the relative path
|
// Use a dummy base as we only care about the relative path
|
||||||
@ -27,6 +28,7 @@ export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
|
|||||||
url.searchParams.set('category', String(categoryId))
|
url.searchParams.set('category', String(categoryId))
|
||||||
if (Number.isInteger(categoryId))
|
if (Number.isInteger(categoryId))
|
||||||
url.searchParams.set('brand', String(brandId))
|
url.searchParams.set('brand', String(brandId))
|
||||||
|
if (sort) url.searchParams.set('sort', sort)
|
||||||
|
|
||||||
return fetch({
|
return fetch({
|
||||||
url: url.pathname + url.search,
|
url: url.pathname + url.search,
|
||||||
@ -45,6 +47,7 @@ export function extendHook(
|
|||||||
['search', input.search],
|
['search', input.search],
|
||||||
['categoryId', input.categoryId],
|
['categoryId', input.categoryId],
|
||||||
['brandId', input.brandId],
|
['brandId', input.brandId],
|
||||||
|
['sort', input.sort],
|
||||||
],
|
],
|
||||||
customFetcher,
|
customFetcher,
|
||||||
{ revalidateOnFocus: false, ...swrOptions }
|
{ revalidateOnFocus: false, ...swrOptions }
|
||||||
|
131
pages/search.tsx
131
pages/search.tsx
@ -1,4 +1,3 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
@ -8,6 +7,13 @@ import useSearch from '@lib/bigcommerce/products/use-search'
|
|||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { Container, Grid } from '@components/ui'
|
import { Container, Grid } from '@components/ui'
|
||||||
import { ProductCard } from '@components/product'
|
import { ProductCard } from '@components/product'
|
||||||
|
import {
|
||||||
|
filterQuery,
|
||||||
|
getCategoryPath,
|
||||||
|
getDesignerPath,
|
||||||
|
getSlug,
|
||||||
|
useSearchMeta,
|
||||||
|
} from '@utils/search'
|
||||||
|
|
||||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
const { categories, brands } = await getSiteInfo()
|
const { categories, brands } = await getSiteInfo()
|
||||||
@ -17,7 +23,14 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Home({
|
const SORT = Object.entries({
|
||||||
|
'latest-desc': 'Latest arrivals',
|
||||||
|
'trending-desc': 'Trending',
|
||||||
|
'price-asc': 'Price: Low to high',
|
||||||
|
'price-desc': 'Price: High to low',
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function Search({
|
||||||
categories,
|
categories,
|
||||||
brands,
|
brands,
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
@ -25,9 +38,8 @@ export default function Home({
|
|||||||
const { asPath } = router
|
const { asPath } = router
|
||||||
const { q, sort } = router.query
|
const { q, sort } = router.query
|
||||||
const query = filterQuery({ q, sort })
|
const query = filterQuery({ q, sort })
|
||||||
const pathname = asPath.split('?')[0]
|
|
||||||
|
|
||||||
const { category, brand } = useSearchMeta(asPath)
|
const { pathname, category, brand } = useSearchMeta(asPath)
|
||||||
const activeCategory = categories.find(
|
const activeCategory = categories.find(
|
||||||
(cat) => getSlug(cat.path) === category
|
(cat) => getSlug(cat.path) === category
|
||||||
)
|
)
|
||||||
@ -39,6 +51,7 @@ export default function Home({
|
|||||||
search: typeof q === 'string' ? q : '',
|
search: typeof q === 'string' ? q : '',
|
||||||
categoryId: activeCategory?.entityId,
|
categoryId: activeCategory?.entityId,
|
||||||
brandId: activeBrand?.entityId,
|
brandId: activeBrand?.entityId,
|
||||||
|
sort: typeof sort === 'string' ? sort : '',
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -114,62 +127,34 @@ export default function Home({
|
|||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
// TODO: add a proper loading state
|
||||||
<div>Searching...</div>
|
<div>Searching...</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul>
|
<ul>
|
||||||
<li className="py-1 text-primary font-bold tracking-wide">Sort</li>
|
<li className="py-1 text-primary font-bold tracking-wide">Sort</li>
|
||||||
<li className="py-1 text-default">
|
<li
|
||||||
<Link
|
className={cn('py-1 text-default', {
|
||||||
href={{
|
underline: !sort,
|
||||||
pathname,
|
})}
|
||||||
query: filterQuery({ q }),
|
>
|
||||||
}}
|
<Link href={{ pathname, query: filterQuery({ q }) }}>
|
||||||
>
|
|
||||||
<a>Relevance</a>
|
<a>Relevance</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-1 text-default">
|
{SORT.map(([key, text]) => (
|
||||||
<Link
|
<li
|
||||||
href={{
|
key={key}
|
||||||
pathname,
|
className={cn('py-1 text-default', {
|
||||||
query: filterQuery({ q, sort: 'latest-desc' }),
|
underline: sort === key,
|
||||||
}}
|
})}
|
||||||
>
|
>
|
||||||
<a>Latest arrivals</a>
|
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
|
||||||
</Link>
|
<a>{text}</a>
|
||||||
</li>
|
</Link>
|
||||||
<li className="py-1 text-default">
|
</li>
|
||||||
<Link
|
))}
|
||||||
href={{
|
|
||||||
pathname,
|
|
||||||
query: filterQuery({ q, sort: 'trending-desc' }),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a>Trending</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="py-1 text-default">
|
|
||||||
<Link
|
|
||||||
href={{
|
|
||||||
pathname,
|
|
||||||
query: filterQuery({ q, sort: 'price-asc' }),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a>Price: Low to high</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="py-1 text-default">
|
|
||||||
<Link
|
|
||||||
href={{
|
|
||||||
pathname,
|
|
||||||
query: filterQuery({ q, sort: 'price-desc' }),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<a>Price: High to low</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -177,48 +162,4 @@ export default function Home({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Home.Layout = Layout
|
Search.Layout = Layout
|
||||||
|
|
||||||
function useSearchMeta(asPath: string) {
|
|
||||||
const [category, setCategory] = useState<string | undefined>()
|
|
||||||
const [brand, setBrand] = useState<string | undefined>()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const parts = asPath.split('/')
|
|
||||||
|
|
||||||
let c = parts[2]
|
|
||||||
let b = parts[3]
|
|
||||||
|
|
||||||
if (c === 'designers') {
|
|
||||||
c = parts[4]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (c !== category) setCategory(c)
|
|
||||||
if (b !== brand) setBrand(b)
|
|
||||||
}, [asPath])
|
|
||||||
|
|
||||||
return { category, brand }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Removes empty query parameters from the query object
|
|
||||||
const filterQuery = (query: any) =>
|
|
||||||
Object.keys(query).reduce<any>((obj, key) => {
|
|
||||||
if (query[key]?.length) {
|
|
||||||
obj[key] = query[key]
|
|
||||||
}
|
|
||||||
return obj
|
|
||||||
}, {})
|
|
||||||
|
|
||||||
// Remove trailing and leading slash
|
|
||||||
const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
|
|
||||||
|
|
||||||
const getCategoryPath = (slug: string, brand?: string) =>
|
|
||||||
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
|
|
||||||
|
|
||||||
const getDesignerPath = (slug: string, category?: string) => {
|
|
||||||
const designer = slug.replace(/^brands/, 'designers')
|
|
||||||
|
|
||||||
return `/search${designer ? `/${designer}` : ''}${
|
|
||||||
category ? `/${category}` : ''
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
|
@ -17,7 +17,8 @@
|
|||||||
"paths": {
|
"paths": {
|
||||||
"@lib/*": ["lib/*"],
|
"@lib/*": ["lib/*"],
|
||||||
"@assets/*": ["assets/*"],
|
"@assets/*": ["assets/*"],
|
||||||
"@components/*": ["components/*"]
|
"@components/*": ["components/*"],
|
||||||
|
"@utils/*": ["utils/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
||||||
|
51
utils/search.tsx
Normal file
51
utils/search.tsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
export function useSearchMeta(asPath: string) {
|
||||||
|
const [pathname, setPathname] = useState<string>('/search')
|
||||||
|
const [category, setCategory] = useState<string | undefined>()
|
||||||
|
const [brand, setBrand] = useState<string | undefined>()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Only access asPath after hydration to avoid a server mismatch
|
||||||
|
const path = asPath.split('?')[0]
|
||||||
|
const parts = path.split('/')
|
||||||
|
|
||||||
|
console.log('P', parts)
|
||||||
|
|
||||||
|
let c = parts[2]
|
||||||
|
let b = parts[3]
|
||||||
|
|
||||||
|
if (c === 'designers') {
|
||||||
|
c = parts[4]
|
||||||
|
}
|
||||||
|
|
||||||
|
setPathname(path)
|
||||||
|
if (c !== category) setCategory(c)
|
||||||
|
if (b !== brand) setBrand(b)
|
||||||
|
}, [asPath])
|
||||||
|
|
||||||
|
return { pathname, category, brand }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Removes empty query parameters from the query object
|
||||||
|
export const filterQuery = (query: any) =>
|
||||||
|
Object.keys(query).reduce<any>((obj, key) => {
|
||||||
|
if (query[key]?.length) {
|
||||||
|
obj[key] = query[key]
|
||||||
|
}
|
||||||
|
return obj
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
// Remove trailing and leading slash
|
||||||
|
export const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
|
||||||
|
|
||||||
|
export const getCategoryPath = (slug: string, brand?: string) =>
|
||||||
|
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
|
||||||
|
|
||||||
|
export const getDesignerPath = (slug: string, category?: string) => {
|
||||||
|
const designer = slug.replace(/^brands/, 'designers')
|
||||||
|
|
||||||
|
return `/search${designer ? `/${designer}` : ''}${
|
||||||
|
category ? `/${category}` : ''
|
||||||
|
}`
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user