Localize the visitor group criterion
Describes how to localize your own visitor group criteria.
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>
Updated 4 months ago