For dev - Filter Option Component
In this article
1. 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.
2. Settings on DOM attribute
None
3. Settings in javascript
You can set these settings for the product list in boost-pfs-filter.js
, like so
// Override Settings var boostPFSFilterConfig = { general: { // Settings list limit: boostPFSThemeConfig.custom.products_per_page loadProductFirst: true, styleScrollToTop: 'style2' } };<br>
Filter display settings
4. How to customize
Override these functions in boost-pfs-filter.js
to customize
/** * Modify the value list. * For example: add collection All 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); // Your 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); // Your code here }<br>
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
FilterOption.prototype.afterRender = function() { jQ('.apply-button-container').append(this.applyButton.$element); jQ('.clear-button-container').append(this.clearButton.$element); } <br>
To append events after filter option is finished building: Use afterBindEvents
FilterOption.prototype.afterRender = function() { jQ('.apply-button-container').append(this.applyButton.$element); jQ('.clear-button-container').append(this.clearButton.$element); }<br>
For a full list of functions, please see: App JS Doc