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 DisplayName, Category, 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 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>
Do you find this information helpful? Please log in to provide feedback.
Last updated: Jul 02, 2021