Home > widget-integration > FilterTranslationService > translateWithComponent

FilterTranslationService.translateWithComponent() method

Replaces template variables in a string with values from an object.

Finds all {{key}} patterns in the string and replaces them with corresponding values from the provided object. Whitespace around keys is trimmed. Unknown keys are left unchanged in their original {{key}} format.

Signature:

translateWithComponent(str: string, obj: any): string;

Parameters

Returns:

string

The string with all known variables replaced, unknown variables unchanged

Example 1

Basic usage:

const result = this.translateWithComponent(
  'Showing {{count}} of {{total}} items',
  { count: 10, total: 50 }
);
// Returns: "Showing 10 of 50 items"

Example 2

Extend to add custom variable formatters:

window.boostWidgetIntegration.extend('FilterTranslationService', (FilterTranslationService) => {
  return class CustomFilterTranslationService extends FilterTranslationService {
    translateWithComponent(str, obj) {
      const enhanced = { ...obj };
      // Add currency formatting for price variables
      Object.keys(enhanced).forEach(key => {
        if (key.includes('price') && typeof enhanced[key] === 'number') {
          enhanced[key] = this.formatCurrency(enhanced[key]);
        }
      });
      return super.translateWithComponent(str, enhanced);
    }
  };
});