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:

copy

{{#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.