Localize the visitor group criterion

VisitorGroupCriterion settings localization

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

Client-side localization

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

Your component will be 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 backend and put the result in the state. The translationsLoaded property indicates when the call is complete.

Second, you can use the localization 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 EnumSelectionFactory and want the names translated, add matching keys under the enumerators part of the language files. 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>