Pagination Component


1. Overview

1.1. Structure

Go to snippets/boost-pfs-filter-html.liquid file, find the Pagination Template as below:

https://d33v4339jhl8k0.cloudfront.net/docs/assets/590652f62c7d3a057f88b05d/images/5f0c31ec2c7d3a10cbaa80c5/file-uVNZaBGNXF.png

  • 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

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.

4. How to customize

See: Pagination Customization