For dev - Pagination Component (App Lib V2)

1. Overview

1.1. 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.

1.2. 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 activeLoadPreviousPage to render a button to load previous pages.

2. 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>

3. Settings in javascript

Product List Settings

4. How to customize

See: Pagination Customization