1. SmartAdmin
  2. Core Plugins
  3. i18Next

i18Next EXTENSION i18next is a full-featured i18n javascript library for translating your webapplication.

About

I18next is an internationalization-framework written in and for JavaScript. But it's much more than that. i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

There are other variations and versions of this plugin that is a little more advanced. The one we used is a bit ancient and for a purpose of demonstration only.

Find in-depth, guidelines, tutorials and more on i18Next's Official Documentation

Integration demo

The plugin file is loaded via our lazyload script mechanism initApp.loadScript("js/my_lovely_script.js", myFunction);. This way the plugin and the language file is loaded on demand of the user only. This is triggered using the data attributes data-action="lang" data-lang="en"

Click on the buttons below to change the menu's language:

English Chinese (traditional)

Configuration options

The lang files are stored in the src/custom/lang directory. Each language will have its own file and structure looks like below:
Lang file layout
{
  "app": {
    "name": "SmartAdmin"
  },
  "nav": {
    "application_intel": "Analytics Intel",
    "application_intel_analytics_dashboard": "Analytics Dashboard",
    "application_intel_marketing_dashboard": "Marketing Dashboard",
  }
}
HTML indicators to trigger change
<nav>
    <span data-i18n="nav.application_intel"></span>
    <span data-i18n="nav.application_intel_analytics_dashboard"></span>
    <span data-i18n="nav.application_intel_marketing_dashboard"></span>
</nav>
Script
$.i18n.init({
    resGetPath: myapp_config.assetsUrl + '/media/data/__lng__.json',
    load: 'unspecific',
    fallbackLng: false,
    lng: applang
}, function (t){
    $('[data-i18n]').i18n();
});
Dependencies (if you wish to load it manually)
<script src="https://new2.websingles.at/assets/js/app.jquery.bundle.js"></script>
<script src="https://new2.websingles.at/assets/js/i18n/i18n.js"></script>