commerce icon indicating copy to clipboard operation
commerce copied to clipboard

Category Pagination

Open kogan007 opened this issue 4 years ago • 3 comments

Not sure about other platforms, but for bigcommerce if anyone is curious it is really easy to create paginated category pages.

Just add a page query string to framework/bigcommerce/api/endpoints/catalog/get-products

if (page && Number.isInteger(Number(page))) url.searchParams.set('page', String(page))

then in use-search hook you add it as well. Then from any category page you can create pretty easy pagination using router or state

kogan007 avatar Aug 10 '21 14:08 kogan007

Not sure about other platforms, but for bigcommerce if anyone is curious it is really easy to create paginated category pages.

Just add a page query string to framework/bigcommerce/api/endpoints/catalog/get-products

if (page && Number.isInteger(Number(page))) url.searchParams.set('page', String(page))

then in use-search hook you add it as well. Then from any category page you can create pretty easy pagination using router or state

@kogan007 I'm new here, Can you give me your code?

realkhanhson avatar Aug 21 '21 10:08 realkhanhson

@Nazmer

framework/bigcommerce/api/endpoints/catalog/get-products add page to query params, mine looks like this body: { search, categoryId, brandId, sort, page, limit }

then where all the query params are being set add if (page && Number.isInteger(Number(page))) url.searchParams.set('page', String(page))

then in use-search.tsx you want to add page to the fetcher params and again add if (page && Number.isInteger(Number(page))) url.searchParams.set('page', String(page)) as a search param type SearchProductsInput needs a new field page?: number | string

then at the bottom add ['page', input.page],

you might have to change some types for type checking, not sure. but it shouldnt be too difficult. i did this a while ago so sorry for any confusion

kogan007 avatar Aug 21 '21 17:08 kogan007

Also if you check the bigcommerce api reference over at https://developer.bigcommerce.com/api-reference they have a lot of details about all the endpoints and objects, so what I did with mine was add the meta object to my return, so that I could see exactly which page I'm querying

kogan007 avatar Aug 21 '21 17:08 kogan007

Hey there! Thank you for opening this issue. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: https://github.com/vercel/commerce/pull/966

leerob avatar Apr 18 '23 02:04 leerob