Customizing the language switcher

When customizing the language switcher in HTML, a few aspects have to be considered in order to make the language switch work out of the box. Consider the following example:

 
Example
{{#availableLanguages}}
    <a
        id="switchLanguageTo-{{languageKey}}"
        class="iam-language-switcher-link {{#languageActive}}iam-active{{/languageActive}}"
        data-lang="{{languageKey}}"
        href="javascript:void(0)">
        {{languageText}}
    </a>
{{/availableLanguages}}

To loop over all available languages, use the availableLanguages macro. For each language, the following properties are available:

  • languageKey: denotes the language key, e.g. “de”
  • languageActive: whether or not the language is the one currently being used
  • languageText: the human-readable translation of the language. The text is inferred from a translation key general.language.languageKey, e.g. general.language.de

In order for the language switch to work properly, the following two constraints must be met as shown in the example above:

  1. The HTML element to be clicked by a user must have CSS class iam-language-switcher-link
  2. The same element must have an attribute named data-lang with the value of languageKey.