⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.
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 custom 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 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 Sorting Template as below:
sortingHtml: the html of Sorting.
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 || '';
var sortingItemsHtml = '';
for (var k in sortingArr) {
var 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();
});
};
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].