Pagination issue

[chillpilllike]

I have store of 5000 products, the pagination doesnt show the products correctly. the products are visible only till fourth page then no products are visible. that too fourth page doesnt show 12 products in full that is set to default.

[Patrick3131]

Have you increased the limit in getProductsListWithSort?

const {
    response: { products, count },
  } = await getProductsList({
    pageParam: 0,
    queryParams: {
      ...queryParams,
      limit: 100,
    },
    countryCode,
  })

[thetutlage]

@Patrick3131

Can you please help debug the issue further? For example, can you check what API endpoint is called and what parameter as sent to the API when you navigating between the pages.

Also it will be nice to isolate if the issue is with the storefront or the API.

[chillpilllike]

I’ve increased the product display limit to show 48 products per page instead of 12. Currently, products display up to the 3rd page (48+48+6).

The product import process has reached 20,000 items and continues to grow may be till 500,000

As Patrick3131 suggested, the limit was originally set to 100. However, increasing it causes the backend to consume significant CPU resources 100% for API calls, leading to storefront crashes when store page is opened.

Given the large and growing inventory, what’s the best approach to ensure customers can browse store pages smoothly?

[Patrick3131]

I think one way to go would be to request the first 48 products, or even just one:

http://localhost:9000/store/products?limit=1

The count parameter will tell you how many total products you have in your store.

count The total number of items.

Now when requesting your products you have to calculate the offset depending on which page you are.

offset The number of items skipped before retrieving the returned items.

[chillpilllike]

May I know what to change in which file?

[sradevski]

@chillpilllike can you please check if the URL changes when you go eg. to the 5th or 6th page? Can you share the network requests and what is being requested when things don't work?

[ARA1985]

Hello.

This is a feature of the paging implementation on the category page. To simplify, the algorithm is as follows - when the page is loaded for the first time, you get the first 100 products via API. Further paging and sorting is performed exactly by these 100 products.

This is a very strange approach. The reason is that the store API doesn't have the ability to send requests to sort products by price and availability. They do it themselves, on the nextjs side.

The simplest solution is to initially load all products at the first access, if you need additional types of sorting, which are not available on the store API side.

For the getProductsListWithSort function, you should specify limit > 100

But it will slow down the work of this page.