Home > widget-integration > FilterRender > renderOptionBoxTemplate

FilterRender.renderOptionBoxTemplate() method

Renders filter option values using the box/grid template.

Generates HTML for box-style filter options displayed in a grid layout. Commonly used for visual filters like size or style options.

Signature:

renderOptionBoxTemplate(params: {
		option: any;
		values: any[];
		dom: HTMLElement;
		label: string;
		selectedKeys: Record<string, boolean>;
		classNameSelected: string;
		classNameUnselected: string;
	}): Promise<void>;

Parameters

Returns:

Promise<void>

Remarks

Uses the filterOptionBoxTemplate from template system. Box layout provides larger click targets and better visual hierarchy.

Example

Override to customize box styling:

async renderOptionBoxTemplate(params) {
  await super.renderOptionBoxTemplate(params);
  // Add hover effects to boxes
  params.dom.querySelectorAll('.boost-sd__filter-option-box-item').forEach(box => {
    box.addEventListener('mouseenter', () => this.showPreview(box));
  });
}