Overview

Filter Option Component is each filter option you created for the app, for example color, size,...

It's inside the filter tree with class boost-pfs-filter-option

Each Filter Option type (swatch, list, box, range,..) has its own subclass inherited from FilterOption:

FilterOptionList
FilterOptionBox
FilterOptionSwatch
FilterOptionRange
FilterOptionRating

When overriding functions for FilterOption, if you just want it to affect one type of filter option, you can just override that type.

Settings on DOM attribute

None

Settings in javascript

You can set these settings for the product list in boost-pfs-filter.js , like so

// Override Settings
var boostPFSFilterConfig = {
    general: {
        // Set the maximum number of products per page
        limit: boostPFSThemeConfig.custom.products_per_page,

        // Preloads products on initial page load
        loadProductFirst: true,

        // Defines the style for scrolling to the top of the page
        styleScrollToTop: 'style2'
    }
};

Filter display settings

How to customize

Override these functions in boost-pfs-filter.js to customize

/**
 * Modify the value list.
 * For example: add "All Collections" to the list.
 * It modifies the values array in-place.
 * @param {Array} values - The data.values array.
 */
var originalModifyFn = FilterOption.prototype.modifyValues;
FilterOption.prototype.modifyValues = function(values) {
    // Call the original function first
    originalModifyFn.call(this, values);
    // Add your custom code here
};

/**
 * Sort the values.
 * This is called if isSortValues() returns true.
 * It modifies the values array in-place.
 * @param {Array} values - The data.values array.
 */
var originalSortFn = FilterOption.prototype.sortValues;
FilterOption.prototype.sortValues = function(values) {
    // Call the original function first
    originalSortFn.call(this, values);
    // Add your custom code here
};

To override only specific type of filter option, replace FilterOption class in the above code with:

FilterOptionList
FilterOptionBox
FilterOptionSwatch
FilterOptionRange
FilterOptionRating
FilterOptionMultiLevelCollections
FilterOptionMultiLevelTag

You can access this parameter in the above function for all data related to the filter option, for example:

this.$element: the filter option element on the DOM
this.filterOptionId: the filter option id (not DOM id, it's just an ID in our database to differentiate filter options)
this.filterItems: a map of all filter values in the filter option. See: Filter Option Item Component
this.clearButton: the clear button for that filter option
this.applyButton: the apply button for that filter option
...

To change the elements in the filter option to other places: Use afterRender

Example: append the apply button or clear button outside of the filter option

/**
 * Append apply and clear buttons after rendering the filter option.
 */
FilterOption.prototype.afterRender = function() {
    // Append the apply button to the apply-button container
    jQ('.apply-button-container').append(this.applyButton.$element);

    // Append the clear button to the clear-button container
    jQ('.clear-button-container').append(this.clearButton.$element);
};

To append events after filter option is finished building: Use afterBindEvents

FilterOption.prototype.afterRender = function() {
    // Append the apply button to the apply-button container
    jQ('.apply-button-container').append(this.applyButton.$element);

    // Append the clear button to the clear-button container
    jQ('.clear-button-container').append(this.clearButton.$element);
};

For a full list of functions, please see: App JS Doc

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 Sorting Customization (App Lib V2)

For Dev - Callbacks after rendering products on collection/search page (App Lib V2)

For dev - App Lib V2 Customization

For dev - Filter Tree Mobile Component

For dev - Filter Option Item Component