Product Delivery
Targeted Sales
Collicitudin vel metus scelerisque ante commodo.
In Progress25% Completed
i18n query string examples
i18next is a very popular internationalization library for browser or any other javascript environment (eg. node.js). i18next is exported in UMD format and can be loaded via commonjs, requirejs (AMD) or will be added to global scope window.i18next.
This example demonstrates how to switch language using query string parameter change. i18next language detection plugin use to detect user language in the browser with support for: 1. querystring, 2. cookie, 3. localStorage, 4. navigator, 5. htmlTag. Every time on click or change event, i18next loads json file with selected language and initialize translation on a new page load. To change the language on click, use <a href="?lng=en">EN</a>
markup.
<div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right">
<a href="?lng=en" class="dropdown-item">
<i class="flag-icon flag-icon-us"></i> English
</a>
<a href="?lng=es" class="dropdown-item">
<i class="flag-icon flag-icon-es"></i> Spanish
</a>
<a href="?lng=pt" class="dropdown-item">
<i class="flag-icon flag-icon-pt"></i> Portuguese
</a>
<a href="?lng=fr" class="dropdown-item">
<i class="flag-icon flag-icon-fr"></i> French
</a>
</div>
i18next
.use(window.i18nextBrowserLanguageDetector)
.use(window.i18nextXHRBackend)
.init({
debug: true,
detection: {
lookupQuerystring: 'lng',
},
fallbackLng: false,
backend: {
loadPath: "robust-assets/locales/{{lng}}/{{ns}}.json",
},
returnObjects: true
},
function (err, t) {
// Initialize Localization
jqueryI18next.init(i18next, $);
$('.main-menu').localize();
});