For dev - Filter Option Item Component

In this article

1. 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:

  • FilterOptionItemList
  • FilterOptionItemBox
  • FilterOptionItemSwatch
  • FilterOptionItemRange
  • FilterOptionItemRating

When overriding functions for FilterOptionItem, if you just want it to effect 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 

/**
 * On click the filter option item.
 * This checks for 'this.requestInstantly' field to see if we call API right away or just set 'this.selected=true'
 */
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();
		}
	}
}




/**
* Format the filter item label: remove prefix, captialize,...
* @returns {string}
*/
var originalBuildLabelFn = FilterOptionItem.prototype.buildLabel;
FilterOptionItem.prototype.buildLabel = function(event) {
	// Call the original function first
	var label = originalBuildLabelFn.call(this, event);


	// Your code here
	return label;
}<br>

To override only specific type of filter option, replace FilterOptionItem class in the above code with:

  • FilterOptionItemList
  • FilterOptionItemBox
  • FilterOptionItemSwatch
  • FilterOptionItemRating
  • FilterOptionItemMultiLevelCollections
  • FilterOptionItemMultiLevelTag

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 DOM
  • this.value: the filter option value
  • this.label: the label displayed on the DOM
  • this.docCount: the number of products available
  • this.isDisabled(): returns whether is value is disabled or not (For example: docCount = 0)
  • this.onApplyFilter(): selects the filter value & calls the filter API
  • this.onSelectFilter(): selects the filter value, but don't call API yet, until user clicks the Apply button
  • this.buildLabel(): build the filter item label, based on its value
  • ...

For a full list of functions, please see: App JS Doc

Related Articles