Localize the audience criterion

4 min

VisitorGroupCriterion settings localization

If you want to localize DisplayName, Category, or Description when adding the VisitorGroupCriterion attribute for audiences, set the LanguagePath property. The property indicates a location in the language files where the Optimizely Content Management System (CMS) looks for matching keys. The translation is used in the user interface if DisplayName, Category, or Description keys are found.

Client-side localization

Custom components are described in Editor templates; this section only describes the front-end localization functionality.

Your component is passed three properties regarding localization:

initLocalization(path: string): any;
translationsLoaded: boolean;
localization(key: string, fallbackText?: string, values?: any[]): string

First, you must call the initLocalization with the path to the XML node you want to fetch. For example, initLocalization(‘path.to.xml.node’). This triggers a call to the backend and puts the result in the state. The translationsLoaded property indicates when the call is complete.

You can use the localize function to translate your strings like this:

localize('path.to.xml.node')
localize('path.to.xml.node', 'My fallback text')
localize('path.to.xml.node', 'My fallback text', valuesToInsertIntoPlacholders)

Code sample:

<page>
  <amount>out of {0} pages</amount>
</page>
    
initLocalization('page');
const value = 10;
localize('amount', 'My fallback text', [value]) 
    
// Results in "out of 10 pages"

Enumeration localization

If you use the EnumSelectionFactoryadd matching keys under the enumerators part of the language files and want the names translated. For an enum called EPiServer.Sample.Criteria.Answer, the keys can look similar to the following code:

<enums>
  <episerver>
     <sample>
        <criteria>
           <answer>
             <yes>Oh yes!</yes>
             <no>No way!</no>
           </answer>
        </criteria>
     </sample>
  </episerver>
</enums>