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

Related Articles