Home > widget-integration > FilterController > applySwatchSettings

FilterController.applySwatchSettings() method

Applies custom swatch settings from admin configuration to product items. Updates swatch displays with custom colors, images, and text based on settings.

This method processes swatch options and applies admin-configured settings including: - Custom text labels for variant options - Custom color codes (single or gradient) - Custom images for swatches - Mixed color and image displays

Signature:

protected applySwatchSettings(container: HTMLElement, options_with_values: any, swatch_settings: Record<string, any>): void;

Parameters

Returns:

void

Remarks

Swatch settings are keyed by lowercase variant values. The method handles three display types: text, product-image, and color-and-image. Settings can include color codes (supporting gradients with multiple colors) and image URLs.

Example 1

Override to add custom swatch validation:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    protected applySwatchSettings(container, options_with_values, swatch_settings) {
      // Validate settings before applying
      if (!this.validateSwatchSettings(swatch_settings)) {
        console.warn('Invalid swatch settings');
        return;
      }
      super.applySwatchSettings(container, options_with_values, swatch_settings);
    }
  };
});

Example 2

Add custom swatch transformations:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    protected applySwatchSettings(container, options_with_values, swatch_settings) {
      // Apply base settings
      super.applySwatchSettings(container, options_with_values, swatch_settings);

      // Add custom border for premium colors
      container.querySelectorAll('.boost-sd__radio-label').forEach(label => {
        if (this.isPremiumColor(label.style.backgroundColor)) {
          label.classList.add('premium-swatch');
        }
      });
    }
  };
});