Home > widget-integration > FilterTranslationService > getToggleSelector

FilterTranslationService.getToggleSelector() method

Generates a CSS selector for a filter toggle element.

Sanitizes the ID by replacing colons with underscores and properly escapes special characters for use in CSS selectors. Appends the configured suffix (default: '-toggle') to create the final selector.

Signature:

getToggleSelector(id: string, suffix?: string): string;

Parameters

Returns:

string

CSS ID selector string in format '#escaped-id-suffix'

Remarks

Uses CSS.escape() for proper escaping of special characters in IDs. Colons are replaced before escaping to handle namespaced IDs.

Example 1

Basic usage:

const selector = this.getToggleSelector('color:red');
// Returns: "#color_red-toggle"
const element = document.querySelector(selector);

Example 2

Extend to customize selector format:

window.boostWidgetIntegration.extend('FilterTranslationService', (FilterTranslationService) => {
  return class CustomFilterTranslationService extends FilterTranslationService {
    getToggleSelector(id, suffix = '-filter-btn') {
      // Use custom suffix for shop's HTML structure
      return super.getToggleSelector(id, suffix);
    }
  };
});