ms.languages

This widget is used to manage the languages of the store. Here you can get the list of all the languages enabled in your store along with their code, name and native names.

Variables
Examples

Variables

languages

It provides the list of all the languages enabled in the store from admin panel.

code	The ISO 2 digit code of the language
nativeName	Native name of the language
name	English name of the language

Examples

Show language dropdown (vuejs themes)

<div class="language-dropdown dropdown">
    <span role="button" class="d-inline-flex align-items-center justify-content-between border-0 bg-transparent py-2" data-bs-toggle="dropdown">
        <span v-if="ms.user.language">{{ms.settings.language_details[ms.user.language].nativeName}}</span>
        <i class="bi bi-chevron-down ms-2 lh-1"></i>
    </span>
    <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
        <li v-if="ms.user.language" class="selected-langauge">
             <span role="button" class="dropdown-item d-flex align-items-center" role="button">
                <span class="dropdown-radio me-2 border border-4 border-primary rounded-circle overflow-hidden d-block" style="height:15px;width:15px;"></span>
                <span class="dropdown-value">{{ms.settings.language_details[ms.user.language].nativeName}}</span>
            </span>
        </li>
        <li><hr class="dropdown-divider" /></li>
        <template v-for="language in ms.settings.languages">
            <li v-if="language != ms.user.language" :class="{'selected-langauge':language == ms.user.language}">
                 <span role="button" class="dropdown-item d-flex py-2 align-items-center" role="button" @click="ms.setPreferences({language})">
                    <span class="dropdown-radio me-2 border border-dark rounded-circle overflow-hidden d-block" :class="{'border-4':language == ms.user.language}" style="height:15px;width:15px;"></span>
                    <span class="dropdown-value">{{ms.settings.language_details[language].nativeName}} - <span class="lang fw-bold text-dark">{{language}}</span></span>
                </span>
            </li>
        </template>
    </ul>
</div>

Show language dropdown (angular themes)

<span ms-widget="ms.languages">
    <select data-ng-model="selected_language" ng-init="selected_language=base_language"
            class="ms-bg-none ms-br-none"
            data-ng-change="setLanguage(selected_language)"
            data-ng-options="language for language in  languages">
    </select>
</span>