Filter by brand too

lib/bigcommerce/api/catalog/handlers/get-products.ts

@@ -4,13 +4,17 @@ import type { ProductsHandlers } from '../products'
 // Return current cart info
 const getProducts: ProductsHandlers['getProducts'] = async ({
   res,
-  body: { search },
+  body: { search, category, brand },
   config,
 }) => {
   // Use a dummy base as we only care about the relative path
   const url = new URL('/v3/catalog/products', 'http://a')
 
   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
   url.searchParams.set('include_fields', 'id')

lib/bigcommerce/api/catalog/products.ts

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

lib/bigcommerce/products/use-search.tsx

@@ -10,17 +10,23 @@ const defaultOpts = {
 
 export type SearchProductsInput = {
   search?: string
+  categoryId?: number
+  brandId?: number
 }
 
 export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
   options,
-  { search },
+  { search, categoryId, brandId },
   fetch
 ) => {
   // Use a dummy base as we only care about the relative path
   const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
 
   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({
     url: url.pathname + url.search,
@@ -35,7 +41,11 @@ export function extendHook(
   const useSearch = (input: SearchProductsInput = {}) => {
     const response = useCommerceSearch<SearchProductsData>(
       defaultOpts,
-      [['search', input.search]],
+      [
+        ['search', input.search],
+        ['categoryId', input.categoryId],
+        ['brandId', input.brandId],
+      ],
       customFetcher,
       { revalidateOnFocus: false, ...swrOptions }
     )

pages/search.tsx

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