For Dev - Product Sorting Customization

In this article
  1. Functions to override
  2. Example use case

1. Functions to override

Override function in boost-pfs-filter.js:

  • ProductSorting.prototype.compileTemplate
  • ProductSorting.prototype.bindEvents (optional, if you don't use <select> tags on sorting element, then you need to rebind events)
ProductSorting.prototype.compileTemplate = function(totalProduct) {
	// Get list of sorting values
	var sortingArr = Utils.getSortingList();
	// Get current sorting value
	var paramSort = Globals.queryParams.sort || '';
	// Get sorting template
	var sortingHtml = boostPFSTemplate.sortingHtml;
	// Your code here
	//...
	return sortingHtml;
}

ProductSorting.prototype.bindEvents = function() {
	// Example binding click event
	this.$element.on('click', function(){
		// Your code here
	});
}
  • sortingHtml: 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 Sorting Template as below:

  • sortingHtml : the html of Sorting.

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

In boost-pfs-filter.js we read the boostPFSTemplate.sortingHtml variable, and rebuilds sorting's HTML 
// Build Sorting
ProductSorting.prototype.compileTemplate = function () {
   var html = '';
   if (boostPFSThemeConfig.custom.show_sorting && boostPFSTemplate.hasOwnProperty('sortingHtml')) {
      var sortingArr = Utils.getSortingList();
      if (sortingArr) {
         var paramSort = Globals.queryParams.sort || '';
	 // Build content
	 var sortingItemsHtml = '';
	 for (var k in sortingArr) {
	    activeClass = '';
	    if (paramSort == k) {
	       activeClass = 'boost-pfs-filter-sort-item-active';
	    }
	    sortingItemsHtml += '<li><a href="#" data-sort="' + k + '" class="' + activeClass + '">' + sortingArr[k] + '</a></li>';
	 }
	 html = boostPFSTemplate.sortingHtml.replace(/{{sortingItems}}/g, sortingItemsHtml);
      }
   }
   return html;
};

// Build Sorting event
ProductSorting.prototype.bindEvents = function () {
   var _this = this;
   jQ('.boost-pfs-filter-filter-dropdown a').click(function (e) {
      e.preventDefault();
      FilterApi.setParam('sort', jQ(this).data('sort'));
      FilterApi.setParam('page', 1);
      FilterApi.applyFilter('sort');
   });

   jQ(".boost-pfs-filter-custom-sorting > button").click(function () {
      if (!jQ('.boost-pfs-filter-filter-dropdown').is(':animated')) {
         jQ('.boost-pfs-filter-filter-dropdown').toggle().parent().toggleClass('boost-pfs-filter-sort-active');
      }
   });

   jQ(Selector.filterTreeMobileButton).click(function () {
      jQ('.boost-pfs-filter-top-sorting-mobile .boost-pfs-filter-filter-dropdown').hide();
   });
	};

Related Articles