Home > widget-integration > FilterRender > renderRefineBy

FilterRender.renderRefineBy() method

Renders the "Refine By" section showing active filter selections.

Displays all currently selected filters as removable tags, allowing users to see and clear their active selections. Includes a "Clear All" button when multiple filters are selected.

Signature:

renderRefineBy(): Promise<void>;

Returns:

Promise<void>

Remarks

The refine-by section appears in both desktop and mobile views, with different DOM locations. This method updates both simultaneously. Override to customize the display of selected filters.

Example

Override to add custom refine-by styling:

async renderRefineBy() {
  await super.renderRefineBy();

  // Group selected filters by type
  const refineBy = document.querySelector('.boost-sd__refine-by');
  if (refineBy) {
    const tags = refineBy.querySelectorAll('.boost-sd__refine-by-item');
    this.groupFilterTags(tags);
  }
}