For Dev - Product Sorting 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
  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