Home > widget-integration > FilterRender > renderFullFilterOption

FilterRender.renderFullFilterOption() method

Renders a complete filter option with all its values and controls.

Main rendering method that orchestrates the display of a single filter option, including its title, values, search box (if enabled), and view more controls. Routes to specialized rendering methods based on display type.

Signature:

renderFullFilterOption(dom: HTMLElement, option: any): Promise<void>;

Parameters

Returns:

Promise<void>

Remarks

This method handles all filter display types: list, box, swatch, rating, range, multi-level collections, and multi-level tags. It also manages collapse state and view more functionality.

Example

Override to add custom filter option decoration:

async renderFullFilterOption(dom, option) {
  await super.renderFullFilterOption(dom, option);

  // Add "Popular" badge to certain filters
  if (this.isPopularFilter(option.filterType)) {
    const title = dom.querySelector('.boost-sd__filter-option-title');
    title?.insertAdjacentHTML('beforeend',
      '<span class="badge">Popular</span>'
    );
  }
}