November Happy Hour will be moved to Thursday December 5th.

Loading...
Area: Optimizely CMS
Applies to versions: 12 and higher
Other versions:
ARCHIVED This content is retired and no longer maintained. See the version selector for other versions of this topic.

Localizing the visitor group criterion

Recommended reading 
Note: This documentation is for the preview version of the upcoming release of CMS 12/Commerce 14/Search & Navigation 14. Features included here might not be complete, and might be changed before becoming available in the public release. This documentation is provided for evaluation purposes only.

This topic describes how to localize your own visitor group criteria.

In this topic

VisitorGroupCriterion settings localization

If you want to localize either DisplayNameCategory, or Description when adding the VisitorGroupCriterion attribute, set the LanguagePath property. The property indicates a location in the language files, where the CMS looks for matching keys. If either DisplayNameCategory, 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>
Do you find this information helpful? Please log in to provide feedback.

Last updated: Jul 02, 2021

Recommended reading