For Dev - Pagination Customization (App Lib V2)
This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.
In this article
1. Functions to override
Override functions in boost-pfs-filter.js
- ProductPaginationDefault.prototype.compileTemplate
- ProductPaginationDefault.prototype.bindEvents (optional, if you don't use
<a>
tags on pagination element, then you need to rebind events)
ProductPaginationDefault.prototype.compileTemplate = function(totalProduct) { // Print all the data fields in pagination console.log(this); if (!totalProduct) totalProduct = this.totalProduct; // Get page info var currentPage = parseInt(Globals.queryParams.page); var totalPage = Math.ceil(totalProduct / Globals.queryParams.limit); // If it has only one page, clear Pagination if (totalPage <= 1) return ''; // Get Template var paginationHtml = boostPFSTemplate.paginateHtml; // Get the theme settings var themeSettings = boostPFSThemeConfig; // You custom code here //... return paginationHtml; } ProductPaginationDefault.prototype.bindEvents = function() { this.$element.on('click', function(){ // Print all the data fields in pagination console.log(this); }.bind(this)); }
- paginationHtml: the paginaiton HTML rebuilt based on the data
- boostPFSTemplate: the HTML template declared at the end of
sections/collection-template.liquid
orsections/collection-template-boost-pfs-filter.liquid
- boostPFSThemeConfig: the theme config, declared at the end of
sections/collection-template.liquid
orsections/collection-template-boost-pfs-filter.liquid
2. Example use case
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.
These fields are assigned to boostPFSTemplate JS variable at the end of collection-template-boost-pfs-filter.liquid
In boost-pfs-filter.js
we read the boostPFSTemplate.paginateHtml variable, and rebuilds pagination's HTML after filtering:
// Build Pagination ProductPaginationDefault.prototype.compileTemplate = function (totalProduct) { if (!totalProduct) totalProduct = this.totalProduct; // Get page info var currentPage = parseInt(Globals.queryParams.page); var totalPage = Math.ceil(totalProduct / Globals.queryParams.limit); // If it has only one page, clear Pagination if (totalPage <= 1) { return ''; } var paginationHtml = boostPFSTemplate.paginateHtml; // Build Previous var previousHtml = (currentPage > 1) ? boostPFSTemplate.previousActiveHtml : boostPFSTemplate.previousDisabledHtml; previousHtml = previousHtml.replace(/{{itemUrl}}/g, Utils.buildToolbarLink('page', currentPage, currentPage - 1)); paginationHtml = paginationHtml.replace(/{{previous}}/g, previousHtml); // Build Next var nextHtml = (currentPage < totalPage) ? boostPFSTemplate.nextActiveHtml : boostPFSTemplate.nextDisabledHtml; nextHtml = nextHtml.replace(/{{itemUrl}}/g, Utils.buildToolbarLink('page', currentPage, currentPage + 1)); paginationHtml = paginationHtml.replace(/{{next}}/g, nextHtml); // Create page items array var beforeCurrentPageArr = []; for (var iBefore = currentPage - 1; iBefore > currentPage - 3 && iBefore > 0; iBefore--) { beforeCurrentPageArr.unshift(iBefore); } if (currentPage - 4 > 0) { beforeCurrentPageArr.unshift('...'); } if (currentPage - 4 >= 0) { beforeCurrentPageArr.unshift(1); } beforeCurrentPageArr.push(currentPage); var afterCurrentPageArr = []; for (var iAfter = currentPage + 1; iAfter < currentPage + 3 && iAfter <= totalPage; iAfter++) { afterCurrentPageArr.push(iAfter); } if (currentPage + 3 < totalPage) { afterCurrentPageArr.push('...'); } if (currentPage + 3 <= totalPage) { afterCurrentPageArr.push(totalPage); } // Build page items var pageItemsHtml = ''; var pageArr = beforeCurrentPageArr.concat(afterCurrentPageArr); for (var iPage = 0; iPage < pageArr.length; iPage++) { if (pageArr[iPage] == '...') { pageItemsHtml += boostPFSTemplate.pageItemRemainHtml; } else { pageItemsHtml += (pageArr[iPage] == currentPage) ? boostPFSTemplate.pageItemSelectedHtml : boostPFSTemplate.pageItemHtml; } pageItemsHtml = pageItemsHtml.replace(/{{itemTitle}}/g, pageArr[iPage]); pageItemsHtml = pageItemsHtml.replace(/{{itemUrl}}/g, Utils.buildToolbarLink('page', currentPage, pageArr[iPage])); } paginationHtml = paginationHtml.replace(/{{pageItems}}/g, pageItemsHtml); return paginationHtml; };