⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
Overview
Structure
Go to snippets/boost-pfs-filter-html.liquid file, find the Pagination Template as below:
previousActiveHtml: the previous button when it is active (current page is greater than 1)previousDisabledHtml: the previous button when it is disabled (current page is greater than 1)nextActiveHtml: the next button when it is active (current page is not the last page)previousDisabledHtml: the next button when it is disabled (current page is the last page)pageItemHtml: the page numbers when it is not selected.pageItemSelectedHtml: the page numbers when it is selected.pageItemRemainHtml: three dots to show that there are a lot of pages.paginateHtml: the container of Pagination.
How it runs
The pagination is rebuild when the page is loaded, or when filtering.
There are 3 types of pagination
Default pagination (pagination with page number 1234...)
Load more: load more on clicking button
Infinite: load more on scroll
For load more and infinite load:
When going to product page then clicking back button, only the current page will be loaded.
In this case, there is a setting
activeLoadPreviousPageto render a button to load previous pages.
DOM element
Pagination Component renders the pagination on .boost-pfs-filter-load-more and .boost-pfs-filter-bottom-pagination on collection/search page
For example: You will find a div with class boost-pfs-filter-products in sections/collection-template-boost-pfs-filter.liquid
<div class="boost-pfs-filter-bottom-pagination boost-pfs-filter-bottom-pagination-default">
{%- if paginate.pages > 1 -%}
{%- include 'boost-pfs-filter-pagination' -%}
{%- endif -%}
</div>
<div class="boost-pfs-filter-load-more"></div>
Load Previous Pages button renders the on .boost-pfs-filter-btn-load-previous-page-wrapper You can place this div at the top of product list.
<div class="boost-pfs-filter-btn-load-previous-page-wrapper"></div>
Settings in javascript
Product List Settings
Name | Type | Values | Default | Description |
paginationType | string | 'default' 'infinite' 'load_more' false | 'default | Pagination type to use. |
activeLoadPreviousPage | boolean | true false | false | When set to true, place the this div above product list to render the button. |
paginationTypeAdvanced | boolean | true false | true | Append "page" param to url with paginationType infinite and load_more. |
How to customize
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].