cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Added sort option to the UI

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-14 11:50:38 -05:00
parent 398feac176
commit cdb2cbdebd
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/bigcommerce/products/use-search.tsx
View File

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

5
pages/search.tsx
View File

@ -17,7 +17,7 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
} }
} }
export default function Home({ export default function Search({
categories, categories,
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
@ -39,6 +39,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 (
@ -178,7 +179,7 @@ export default function Home({
) )
} }
Home.Layout = Layout Search.Layout = Layout
function useSearchMeta(asPath: string) { function useSearchMeta(asPath: string) {
const [category, setCategory] = useState<string | undefined>() const [category, setCategory] = useState<string | undefined>()