Pagination is the process of splitting the contents of a website, or a section of contents from a website, into pages. In our scope pagination is represented by default on PLP but it is often integrated into the blog, Instagram shop, etc.
In some cases, there will be the implementation of load more and/or infinite scroll functionality. Some designs may have an integrated combination of before mentioned variants.
<aside> ℹ️ Usually, styling this element takes from-to: 3-5h
</aside>
Pagination can be found on PLP under the ProductList.
Pagination may be implemented differently depending on the project. For the time being, by default, you will encounter a bar with buttons with the corresponding page numbers
The pagination should be displayed accounting for the following:
Another type of ‘pagination’ is the ‘Load/Show/Shop more’ button showing a number of products to be loaded after clicking on it
There is also an approach to split list items into chunks and load them on demand using the ‘infinite scroll’ technique that loads content continuously as the user scrolls down the page.
For the load more functionality button and its hover state should be displayed and also load previous button before Product list when page except for 1st is loaded.
The Pagination component (SPWA v 5.1.0) is responsible for rendering pagination. Page size, anchor text should be configured in the BE.
export const mapStateToProps = (state) => ({
paginationFrame: state.ConfigReducer.pagination_frame,
paginationFrameSkip: state.ConfigReducer.pagination_frame_skip,
anchorTextPrevious: state.ConfigReducer.anchor_text_for_previous,
anchorTextNext: state.ConfigReducer.anchor_text_for_next
});
<aside>
⚠️ When installing the package add it to the devDependencies, not dependencies**.**
</aside>
Currently, the load more feature is available as a reusable extension, so you should pay attention to its compatibility with your ScandiPWA version. For instance, the extension may plug into wrong namespaces or core method names has been changed.
To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.
How to override JavaScript classes?
By default, Scandipwa apps use infinite scrolling instead of pagination in mobile view. If in case a contract needs mobile pagination. One can disable the default behavior by:
CategoryProductList container.isInfiniteLoaderEnabled: false to the containerProps method.The final code would be something like this:
export class CategoryProductListContainer extends SourceCategoryProductListContainer {
containerProps() {
return {
...super.containerProps(),
isInfiniteLoaderEnabled: false
};
}
}
Please note that this only disables the infinite scrolling behavior, the pagination links are hidden by default for the mobile view, you’ll have to show it as well in the CategoryPagination component.