For Dev - Pagination Customization (App Lib V2)

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 or sections/collection-template-boost-pfs-filter.liquid
• boostPFSThemeConfig: the theme config, declared at the end of sections/collection-template.liquid or sections/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;
	};