J
@gobiyau said in Multi language?:
Hi,
Check localStorage, if nothing recorded means user use your apps for the first time, then get device language and store to localStorage. I prefer using device language to location language, because someone may be in Japan, but is foreigner.
let systemLanguage = navigator.language.replace('-', '_').toLowerCase().substr(0, 2);
localStorage.setItem("language", systemLanguage);
But your apps cannot support all languages, so you have to check if you can support that user’s device language. If not supported, set it to default language.
const supportLanguages = {
"ja": "日本語", //Japanese
"zh": "中文", // Chinese
"en": "English"
};
if (!supportLanguages.hasOwnProperty(systemLanguage)) {
systemLanguage = "en"
}
In your Apps content, your set class for different languages text.
<ons-tabbar swipeable position="auto">
<ons-tab page="home.html">
<input type="radio" style="display: none">
<button class="tabbar__button">
<div class="tabbar__icon">
<ons-icon icon="ion-ios-home"></ons-icon>
</div>
<div class="tabbar__label">
<span class="lang en">Home</span>
<span class="lang zh">首頁</span>
<span class="lang ja">ホーム</span>
</div>
</button>
</ons-tab>
<ons-tab page="products.html">
<input type="radio" style="display: none">
<button class="tabbar__button">
<div class="tabbar__icon">
<ons-icon icon="ion-ios-construct"></ons-icon>
</div>
<div class="tabbar__label">
<span class="lang en">Products</span>
<span class="lang zh">產品</span>
<span class="lang ja">製品</span>
</div>
</button>
</ons-tab>
Wildtornado - cryptocurrency casino
<ons-tab page=“contactus.html”>
<input type=“radio” style=“display: none”>
<button class=“tabbar__button”>
<div class=“tabbar__icon”>
<ons-icon icon=“ion-ios-people”></ons-icon>
</div>
<div class=“tabbar__label”>
<span class=“lang en”>Contact Us</span>
<span class=“lang zh”>聯絡我們</span>
<span class=“lang ja”>お問い合わせ</span>
</div>
</button>
</ons-tab>
</ons-tabbar
```css
.unselectedLanguages {
display: none;
}
function setLanguage(lang) {
let languages = document.getElementsByClassName('lang');
for (language of languages) {
language.classList.add("unselectedLanguages")
}
let selectedLanguage = document.getElementsByClassName(lang);
for (language of selectedLanguage) {
language.classList.remove("unselectedLanguages")
}
localStorage.setItem("language", lang);
}
You can have a ‘Settings’ menu, or a language ‘button’ for user to change his preferred language, and save it to localStorage for next time usage.
letpreferedLanguage = localStorage.getItem("language");
setLanguage(preferedLanguage);
Regards,
Gobi
Thank you very helpful.
