Home > widget-integration > FilterController > handleProductImageSwatch

FilterController.handleProductImageSwatch() method

Handles product image-based swatch display. Applies custom images or colors to product image swatches.

Signature:

protected handleProductImageSwatch(label: HTMLElement, swatchObj: {
		imageUrl?: string;
		colorCodes?: string[];
	}): void;

Parameters

Returns:

void

Remarks

Product image swatches prioritize custom images over colors. If no background image exists, applies either the custom image or color codes from settings.

Example

Override to add image loading optimization:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    protected handleProductImageSwatch(label, swatchObj) {
      if (swatchObj.imageUrl) {
        // Preload image for better UX
        const img = new Image();
        img.onload = () => {
          super.handleProductImageSwatch(label, swatchObj);
        };
        img.src = swatchObj.imageUrl;
      } else {
        super.handleProductImageSwatch(label, swatchObj);
      }
    }
  };
});