Home > widget-integration > FilterTranslationService > getTranslatedFilterOption

FilterTranslationService.getTranslatedFilterOption() method

Retrieves a translated filter option label from the app's translation configuration.

Builds a translation key in the format 'filterOption|{filterId}|{optionKey}' and looks it up in the filterOptions translation object. Falls back to the provided default value or the original key if translation is not found.

Signature:

getTranslatedFilterOption(filterState: FilterOptionsProps, key: string, defaultValue?: string): string;

Parameters

Returns:

string

The translated label if found, otherwise the default value or key

Remarks

This is a critical extension point for customizing how filter options are translated. Common customizations include adding fallback languages, custom formatting, shop-specific label mappings, or dynamic translation logic based on context.

Example 1

Basic usage:

const translatedLabel = this.getTranslatedFilterOption(
  filterState,
  'red',
  'Red'
);

Example 2

Extend to add fallback language support:

window.boostWidgetIntegration.extend('FilterTranslationService', (FilterTranslationService) => {
  return class CustomFilterTranslationService extends FilterTranslationService {
    getTranslatedFilterOption(filterState, key, defaultValue) {
      // Try primary language
      let translated = super.getTranslatedFilterOption(filterState, key, defaultValue);

      // Fallback to secondary language if translation not found
      if (translated === (defaultValue ?? key)) {
        const secondaryKey = this.buildTranslationKey(
          filterState.filterId,
          `${key}_fr`
        );
        translated = this.lookupSecondaryTranslation(secondaryKey) ?? translated;
      }

      return translated;
    }
  };
});

Example 3

Extend to add translation logging:

window.boostWidgetIntegration.extend('FilterTranslationService', (FilterTranslationService) => {
  return class CustomFilterTranslationService extends FilterTranslationService {
    getTranslatedFilterOption(filterState, key, defaultValue) {
      const result = super.getTranslatedFilterOption(filterState, key, defaultValue);

      // Log missing translations for shop owner review
      if (result === (defaultValue ?? key)) {
        console.warn(
          `Missing translation: ${filterState.filterId}.${key}`,
          { filterState, key, defaultValue }
        );
      }

      return result;
    }
  };
});