Home > widget-integration > FilterController > registerSwatchOptionEvent

FilterController.registerSwatchOptionEvent property

Registers event listeners for swatch option interactions. Sets up click, hover, and keyboard events for individual swatch options.

This method handles: - Click or hover events to change product variant - Keyboard navigation (Enter/Space keys) for accessibility - Outside click detection to persist or reset variant selection - Product image updates based on variant selection

Signature:

registerSwatchOptionEvent: (event: any, productItem: any, swatch: any, option: any, options_with_values: any, images: any, defaultImages: any) => void;

Remarks

For click events, sets up outside click handling to manage selection persistence based on the global window.boostSDKeepVariantOnHoverOutside flag. Keyboard events prevent default behavior and trigger the same handler as clicks.

Example

Override to add custom swatch event tracking:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    registerSwatchOptionEvent(event, productItem, swatch, option,
                               options_with_values, images, defaultImages) {
      // Add analytics tracking before registering event
      option?.addEventListener(event, () => {
        this.trackSwatchInteraction({
          productId: productItem.dataset.productId,
          swatchValue: option.dataset.value,
          interactionType: event
        });
      });

      super.registerSwatchOptionEvent(event, productItem, swatch, option,
                                       options_with_values, images, defaultImages);
    }
  };
});