Skip to main content
For dev - Filter Option Component
Thomas Ta avatar
Written by Thomas Ta
Updated over 5 months ago

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].

Did this answer your question?