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 }
     )