⚠️ 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:

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() {
    // Start with the toolbar label
    var itemHtml = '<span>' + boostPFSThemeConfig.label.toolbar_viewas + '</span>';

    // Insert your custom code here
    //...

    // Return the compiled HTML
    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

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() {
    // Start with the toolbar label
    var itemHtml = '<span>' + boostPFSThemeConfig.label.toolbar_viewas + '</span>';

    // Build URLs for different display types while keeping other parameters 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');
}

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

For dev - Product List Component (App Lib V2)

For Dev - Customization overview (App Lib V2)

For Dev - Product List Customization (App Lib V2)

For Dev - Product Sorting Customization (App Lib V2)

For dev - App Lib V2 Customization