Overview
Filter Option Item Component is each value for the filter option you created, for example color - Red, color - Blue, size - M,...
It's inside each filter option with class boost-pfs-filter-option-item
Each Filter Option Item type (swatch, list, box, range,..) has its own subclass inherited from FilterOptionItem:
FilterOptionItemListFilterOptionItemBoxFilterOptionItemSwatchFilterOptionItemRangeFilterOptionItemRating
When overriding functions for FilterOptionItem, if you just want it to effect 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: {
// Number of products per page
limit: boostPFSThemeConfig.custom.products_per_page,
// Load products immediately on page load
loadProductFirst: true,
// Scroll-to-top button style
styleScrollToTop: 'style2'
}
};
Filter display settings
How to customize
Override these functions in boost-pfs-filter.js to customize
/**
* Handles click events on filter option items.
* Checks whether to instantly request API or just set selection.
*/
FilterOptionItem.prototype.onClick = function(event) {
if (event) {
event.preventDefault();
}
if (!this.isDisabled()) {
if (this.requestInstantly || this.parent.filterType == FilterOptionEnum.FilterType.COLLECTION) {
this.onApplyFilter();
} else {
this.onSelectFilter();
}
}
}
/**
* Formats the filter item label by removing prefixes and capitalizing.
* @returns {string} Formatted label
*/
var originalBuildLabelFn = FilterOptionItem.prototype.buildLabel;
FilterOptionItem.prototype.buildLabel = function() {
var label = originalBuildLabelFn.call(this);
// Insert custom code here to further manipulate `label`
return label;
}
To override only specific type of filter option, replace FilterOptionItem class in the above code with:
FilterOptionItemListFilterOptionItemBoxFilterOptionItemSwatchFilterOptionItemRatingFilterOptionItemMultiLevelCollectionsFilterOptionItemMultiLevelTag
You can access this parameter in the above function for all data related to the filter option, for example:
this.$element: the filter option item element on the DOMthis.value: the filter option valuethis.label: the label displayed on the DOMthis.docCount: the number of products availablethis.isDisabled(): returns whether is value is disabled or not (For example: docCount = 0)this.onApplyFilter(): selects the filter value & calls the filter APIthis.onSelectFilter(): selects the filter value, but don't call API yet, until user clicks the Apply buttonthis.buildLabel(): build the filter item label, based on its value...
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].