Product list pagination on Search results, Categories and Content Pages
Products listed in the search results, categories and content pages can be presented in pages of 12, 24 or 36 items per page. Going to a new page will reload the entire page.
However, it is possible to change the classic pagination method for a "load more" or "infinite scroll" that will use ajax to bring more products into the page turning the loading action a much quicker and user friendly process.
π Important: If you are running a custom design, your design may need changes to work with this feature. Test it throughly to be sure it's working with your design.
How to enable Load more or Infinite scroll?
From your Admin in Store Settings / General / Store Preferences under Product Display you can change the type of product pagination you wish to use on your store:
When enabled, users will still be able to see on which page they are at all times
Once they scroll past the top section, a fixed bar will be displayed at the bottom to continue showing the current page in view:
Load More
The Load More option will wait for user input at all times. New products will be loaded with ajax once this button is clicked
Infinite Scroll
Infinite scroll will automatically fetch for new products each time the user reaches the bottom section of the list
The bottom section always features a Show Footer button. This button is useful especially with infinite scroll when users are navigating through a category or search results page with many results and they decide to interrupt scrolling to go to the bottom of the page.
This button reveals the footer section at any time avoiding reaching the bottom of the page (that would request a new page of products)
FAQ
π Important: If you are running a custom design, your design may need changes to work with this feature. Test it throughly to be sure it's working with your design.
I am manipulating elements after page load, will products loaded with ajax be also changed?
No, if you are changing elements in the grid after page load, the same logic must be applied to the new elements by listening to the events product-loadmore-success
and product-loadmore-failed as described in https://docs.evolutionx.io/en/articles/4591648-storefront-javascript-events. These events when triggered will include in the details the list of SKUs of new products loaded so you can properly target them.
Which pages support load more / infinite scroll?
Search results, categories and content pages for both grid and list view on desktop and mobile.
How many products are loaded with each page load? Can it be changed?
The number of products fetched with each load is the number set for Default results per page in your Admin in Store Settings / General / Store Preferences / Product Display. Change that value to the default number of products per page and that is the number of products Load More / Infinite Scroll will fetch.
What happens if a user loads a page with a page number in the URL?
If a user opens a search results in page 3 for example, they will land on a page that will be displaying the products available on page 3 for the given result. If they keep scrolling / loading more, they will be getting more products for the following pages.
If the user wishes to see products from previous pages they can use the navigation buttons at the top to call for previous pages where they can go back to page 1 or the immediate page before.
Products loaded with ajax also bring the live inventory / live pricing data included?
Yes, you don't need to do anything, live data is called on a separate request. Live data will be fetched each time new products are loaded into the page. This method will allow users to keep scrolling and quickly see more products showing every time without having to wait for the live data to show. The usual spinners will be presented and the prices/inventory will be revealed once the request finishes. This is all asynchronous and each batch of new products will have its own independent request to fetch for its live data.