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 DOMthis.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 Componentthis.clearButton
: the clear button for that filter optionthis.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].