Home > widget-integration > FilterController > handleProductSwatches

FilterController.handleProductSwatches() method

Initializes and manages product variant swatches on product items. Handles swatch interactions, variant image updates, and hover behaviors.

Sets up swatch functionality including: - Detecting enabled swatch configurations (up to 3 swatch types) - Registering click and hover event listeners on swatch options - Updating product images when variants are selected - Managing selected state UI - Handling keyboard navigation (Enter/Space keys) - Outside click handling to preserve/reset variant selection

Signature:

handleProductSwatches(): void;

Returns:

void

Remarks

This method checks theme settings to determine which swatches are enabled (swatches.1, swatches.2, swatches.3) and only initializes enabled ones. Swatch behavior differs based on whether interaction is click or hover.

The global flag window.boostSDKeepVariantOnHoverOutside controls whether variant selections persist when hovering outside the product item.

Example 1

Override to customize swatch behavior:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    handleProductSwatches() {
      super.handleProductSwatches();

      // Add custom swatch analytics tracking
      document.querySelectorAll('.boost-sd__radio-label').forEach(swatch => {
        swatch.addEventListener('click', () => {
          this.trackSwatchSelection(swatch.dataset.value);
        });
      });
    }
  };
});

Example 2

Modify swatch image update behavior:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    handleProductSwatches() {
      // Override to add zoom effect on swatch hover
      const originalHandler = super.handleProductSwatches.bind(this);
      originalHandler();

      document.querySelectorAll('.boost-sd__product-swatch-item').forEach(swatch => {
        swatch.addEventListener('mouseenter', (e) => {
          e.currentTarget.closest('.boost-sd__product-image')?.classList.add('zoom');
        });
      });
    }
  };
});