Home > widget-integration > FilterController > handleSwatchOption

FilterController.handleSwatchOption() method

Handles swatch option selection and updates product images. Manages variant image changes and selected state when user interacts with swatches.

This method: - Identifies the variant option from the swatch type - Updates product images based on variant selection - Handles cases where variants have no specific images - Manages selected label state (visual indicator) - Falls back to default images when variant has no image

Signature:

protected handleSwatchOption(params: {
		productItem: any;
		swatch: any;
		option: any;
		options_with_values: any;
		images: any;
		defaultImages?: any;
	}): void;

Parameters

Returns:

void

Remarks

This method is called when users click or hover over swatches. It finds the matching variant from options_with_values using the swatch type (name or original_name), then updates product images based on the variant's image position.

Example 1

Override to add custom image transition effects:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    protected handleSwatchOption(params) {
      // Add fade effect before image change
      const productImages = params.productItem.querySelectorAll('.boost-sd__product-image img');
      productImages.forEach(img => img.classList.add('fading'));

      super.handleSwatchOption(params);

      // Remove fade class after transition
      setTimeout(() => {
        productImages.forEach(img => img.classList.remove('fading'));
      }, 300);
    }
  };
});

Example 2

Add analytics tracking for swatch selections:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    protected handleSwatchOption(params) {
      // Track swatch selection
      const swatchValue = params.option.querySelector('.boost-sd__radio-input')?.value;
      this.trackSwatchSelection({
        productId: params.productItem.dataset.productId,
        variant: swatchValue
      });

      super.handleSwatchOption(params);
    }
  };
});