For Dev - Display Type Customization
In this article
1. Functions to override
Override function in boost-pfs-filter.js
:
- ProductDisplayType.prototype.compileTemplate
- ProductDisplayType.prototype.bindEvents (optional, if you don't use
<a>
tags on display type elements, then you need to rebind events)
// For Toolbar - Build Display type ProductDisplayType.prototype.compileTemplate = function () { var itemHtml = '<span>' + boostPFSThemeConfig.label.toolbar_viewas + '</span>'; // Your code here //... return itemHtml; };
- itemHtml: the display type HTML rebuilt based on the data
- Utils.buildToolbarLink('display', 'list', 'grid'): build an URL with the
display
param changed fromlist
value togrid
value
2. Example use case
In boost-pfs-filter.js
we read the boostPFSTemplate.sortingHtml variable, and rebuilds sorting's HTML
// For Toolbar - Build Display type ProductDisplayType.prototype.compileTemplate = function () { var itemHtml = '<span>' + boostPFSThemeConfig.label.toolbar_viewas + '</span>'; // Build URLs with different "display" param, but keep every other params the same itemHtml += '<a href="' + Utils.buildToolbarLink('display', 'list', 'grid') + '" title="Grid view" class="{{class.productDisplayType}}-item {{class.productDisplayType}}-grid" data-view="grid"><span class="icon-fallback-text"></span></a>'; itemHtml += '<a href="' + Utils.buildToolbarLink('display', 'grid', 'list') + '" title="List view" class="{{class.productDisplayType}}-item {{class.productDisplayType}}-list" data-view="list"><span class="icon-fallback-text"></span></a>'; itemHtml = itemHtml.replace(/{{class.productDisplayType}}/g, Class.productDisplayType); return itemHtml; }; // Bind display type event ProductDisplayType.prototype.bindEvents = function() { jQ(Selector.topDisplayType + ' a').on('click', onClickDisplayType.bind(this)); } function onClickDisplayType(event) { event.preventDefault(); Globals.internalClick = true; // Update the active item var $targetEl = jQ(event.currentTarget); $targetEl.siblings().removeClass('active'); $targetEl.addClass('active'); var displayValue = $targetEl.data('display'); if (displayValue) { FilterApi.setParam('display', displayValue); } else { var newUrl = $targetEl.attr('href'); FilterApi.updateParamsFromUrl(newUrl); } // Apply filter FilterApi.applyFilter('display'); }