For Dev - Product Sorting Customization
In this article
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
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 Sorting Template as below:
- sortingHtml : the html of Sorting.
// 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(); }); };