⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
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;
// Your 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 databoostPFSTemplate: the HTML template declared at the end ofsections/collection-template.liquidorsections/collection-template-boost-pfs-filter.liquidboostPFSThemeConfig: the theme config, declared at the end ofsections/collection-template.liquidorsections/collection-template-boost-pfs-filter.liquid
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;
// Calculate pagination info
var currentPage = parseInt(Globals.queryParams.page);
var totalPage = Math.ceil(totalProduct / Globals.queryParams.limit);
// Clear Pagination if only one page exists
if (totalPage <= 1) {
return '';
}
var paginationHtml = boostPFSTemplate.paginateHtml;
// Build Previous button
var previousHtml = (currentPage > 1) ? boostPFSTemplate.previousActiveHtml : boostPFSTemplate.previousDisabledHtml;
previousHtml = previousHtml.replace(/{{itemUrl}}/g, Utils.buildToolbarLink('page', currentPage - 1));
paginationHtml = paginationHtml.replace(/{{previous}}/g, previousHtml);
// Build Next button
var nextHtml = (currentPage < totalPage) ? boostPFSTemplate.nextActiveHtml : boostPFSTemplate.nextDisabledHtml;
nextHtml = nextHtml.replace(/{{itemUrl}}/g, Utils.buildToolbarLink('page', currentPage + 1));
paginationHtml = paginationHtml.replace(/{{next}}/g, nextHtml);
// Build page items array
var pageItemsHtml = '', beforeCurrentPageArr = [], afterCurrentPageArr = [];
for (var iBefore = currentPage - 2; iBefore < currentPage; iBefore++) {
if (iBefore > 0) beforeCurrentPageArr.push(iBefore);
}
for (var iAfter = currentPage + 1; iAfter <= currentPage + 2 && iAfter <= totalPage; iAfter++) {
afterCurrentPageArr.push(iAfter);
}
// Handle start and end ellipsis for large page counts
if (currentPage - 3 > 0) beforeCurrentPageArr.unshift('...');
if (currentPage > 1) beforeCurrentPageArr.unshift(1);
if (currentPage + 3 < totalPage) afterCurrentPageArr.push('...');
if (currentPage + 2 < totalPage) afterCurrentPageArr.push(totalPage);
// Concatenate all page elements
var allPages = beforeCurrentPageArr.concat(currentPage, afterCurrentPageArr);
allPages.forEach(function(page) {
if (page === '...') {
pageItemsHtml += boostPFSTemplate.pageItemRemainHtml;
} else {
var pageHtml = (page === currentPage) ? boostPFSTemplate.pageItemSelectedHtml : boostPFSTemplate.pageItemHtml;
pageItemsHtml += pageHtml.replace(/{{itemTitle}}/g, page).replace(/{{itemUrl}}/g, Utils.buildToolbarLink('page', page));
}
});
paginationHtml = paginationHtml.replace(/{{pageItems}}/g, pageItemsHtml);
return paginationHtml;
};
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].