4
0
forked from crowetic/commerce

Filter by brand too

This commit is contained in:
Luis Alvarez 2020-10-13 20:16:43 -05:00
parent 63c0713151
commit fa625b5d06
4 changed files with 32 additions and 9 deletions

View File

@ -4,13 +4,17 @@ import type { ProductsHandlers } from '../products'
// Return current cart info // Return current cart info
const getProducts: ProductsHandlers['getProducts'] = async ({ const getProducts: ProductsHandlers['getProducts'] = async ({
res, res,
body: { search }, body: { search, category, brand },
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')
if (search) url.searchParams.set('keyword', search) if (search) url.searchParams.set('keyword', search)
if (category && Number.isInteger(Number(category)))
url.searchParams.set('categories:in', category)
if (brand && Number.isInteger(Number(brand)))
url.searchParams.set('brand_id', brand)
// 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')

View File

@ -13,7 +13,10 @@ export type SearchProductsData = {
} }
export type ProductsHandlers = { export type ProductsHandlers = {
getProducts: BigcommerceHandler<SearchProductsData, { search?: 'string' }> getProducts: BigcommerceHandler<
SearchProductsData,
{ search?: 'string'; category?: string; brand?: string }
>
} }
const METHODS = ['GET'] const METHODS = ['GET']

View File

@ -10,17 +10,23 @@ const defaultOpts = {
export type SearchProductsInput = { export type SearchProductsInput = {
search?: string search?: string
categoryId?: number
brandId?: number
} }
export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = ( export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
options, options,
{ search }, { search, categoryId, brandId },
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
const url = new URL(options?.url ?? defaultOpts.url, 'http://a') const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
if (search) url.searchParams.set('search', search) if (search) url.searchParams.set('search', search)
if (Number.isInteger(categoryId))
url.searchParams.set('category', String(categoryId))
if (Number.isInteger(categoryId))
url.searchParams.set('brand', String(brandId))
return fetch({ return fetch({
url: url.pathname + url.search, url: url.pathname + url.search,
@ -35,7 +41,11 @@ export function extendHook(
const useSearch = (input: SearchProductsInput = {}) => { const useSearch = (input: SearchProductsInput = {}) => {
const response = useCommerceSearch<SearchProductsData>( const response = useCommerceSearch<SearchProductsData>(
defaultOpts, defaultOpts,
[['search', input.search]], [
['search', input.search],
['categoryId', input.categoryId],
['brandId', input.brandId],
],
customFetcher, customFetcher,
{ revalidateOnFocus: false, ...swrOptions } { revalidateOnFocus: false, ...swrOptions }
) )

View File

@ -23,12 +23,18 @@ export default function Home({
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter() const router = useRouter()
const { q } = router.query const { q } = router.query
const { category, brand } = useSearchMeta(router.asPath)
const activeCategory = categories.find(
(cat) => getSlug(cat.path) === category
)
const activeBrand = brands.find(
(b) => getSlug(b.node.path) === `brands/${brand}`
)?.node
const { data } = useSearch({ const { data } = useSearch({
search: typeof q === 'string' ? q : '', search: typeof q === 'string' ? q : '',
categoryId: activeCategory?.entityId,
brandId: activeBrand?.entityId,
}) })
const { category, brand } = useSearchMeta(router.asPath)
console.log('Q', category, brand)
return ( return (
<Container> <Container>
@ -42,7 +48,7 @@ export default function Home({
<li <li
key={cat.path} key={cat.path}
className={cn('py-1 text-default', { className={cn('py-1 text-default', {
underline: getSlug(cat.path) === category, underline: activeCategory?.entityId === cat.entityId,
})} })}
> >
<Link href={getCategoryPath(getSlug(cat.path), brand)}> <Link href={getCategoryPath(getSlug(cat.path), brand)}>
@ -59,7 +65,7 @@ export default function Home({
<li <li
key={node.path} key={node.path}
className={cn('py-1 text-default', { className={cn('py-1 text-default', {
underline: getSlug(node.path) === `brands/${brand}`, underline: activeBrand?.entityId === node.entityId,
})} })}
> >
<Link href={getDesignerPath(getSlug(node.path), category)}> <Link href={getDesignerPath(getSlug(node.path), category)}>