Home > widget-integration > FilterRender > renderOptionSwatchTemplate

FilterRender.renderOptionSwatchTemplate() method

Renders filter option values using the swatch template.

Generates HTML for color/image swatch filter options. Supports different swatch shapes (circle/square) and layout types (grid/list).

Signature:

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

Parameters

Returns:

Promise<void>

Remarks

Swatches can display solid colors, gradients, or images. The template system automatically generates appropriate CSS based on swatch data.

Example

Override to add swatch tooltips:

async renderOptionSwatchTemplate(params) {
  await super.renderOptionSwatchTemplate(params);
  // Add color name tooltips
  params.dom.querySelectorAll('.boost-sd__swatch').forEach(swatch => {
    const colorName = swatch.getAttribute('data-color-name');
    swatch.title = colorName;
  });
}