Home > widget-integration > FilterTranslationService > applyTranslationsToRefineBy

FilterTranslationService.applyTranslationsToRefineBy() method

Applies translations to the "refine by" selected filters display.

Updates the labels of selected filters with their translated values. This is used to display translated filter names in the active filters / "refine by" section of the UI.

Signature:

applyTranslationsToRefineBy(selectedFilters: any[]): void;

Parameters

Returns:

void

Remarks

This method modifies the provided array in place by updating the data.label property of each filter. Only processes filters with valid data.key and data.label string properties.

Example 1

Basic usage:

const selectedFilters = [
  { data: { key: 'red', label: 'Red' } },
  { data: { key: 'large', label: 'Large' } }
];
this.applyTranslationsToRefineBy(selectedFilters);

Example 2

Extend to add custom formatting:

window.boostWidgetIntegration.extend('FilterTranslationService', (FilterTranslationService) => {
  return class CustomFilterTranslationService extends FilterTranslationService {
    applyTranslationsToRefineBy(selectedFilters) {
      super.applyTranslationsToRefineBy(selectedFilters);

      // Add custom prefix for VIP customers
      if (this.isVipCustomer()) {
        selectedFilters.forEach(filter => {
          if (filter.data?.label) {
            filter.data.label = `⭐ ${filter.data.label}`;
          }
        });
      }
    }
  };
});