For Dev - Display Type Customization (App Lib V2)

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 from list value to grid 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');
	}