Language on init

In this example English language is set on init. If language is set on init, resources will be resolved in this order: first - languageCode plus countryCode, eg. 'en-US'; second - alternative look it up in languageCode only, eg. 'en'; third - finally look it up in definded fallback language, default: 'dev'. Basically, lng option sets a specified language that is loaded on every initialization. With basic settings all options will be reset on a new init.

Set language on init:

Example markup:

<!-- Basic markup -->
<ul class="dropdown-menu">
	<li>
		<a class="english">
			<img src="assets/images/flags/gb.png" alt=""> English
		</a>
	</li>
	<li>
		<a class="ukrainian">
			<img src="assets/images/flags/ua.png" alt=""> Ukrainian
		</a>
	</li>
</ul>

JS code example:

/* Set init options */
i18n.init({
	resGetPath: 'assets/locales/__lng__.json',
	load: 'unspecific',
	lng: 'en', // set language on init
	useCookie: true,
	fallbackLng: false
}, function () {

	// Run translation
	$('body').i18n();

});
i18next library
Overview

Internationalization and localization are means of adapting web applications to different languages, regional differences and technical requirements of a target market. Internationalization is the process of designing an application so that it can potentially be adapted to various languages and regions. Localization is the process of adapting internationalized application for a specific region or language by adding locale-specific components and translating text. Framework template uses i18next library for internationalization and localization.

Main i18next benefits:

  • Support of variables
  • Support of nesting
  • Support of context
  • Support of multiple plural forms
  • Gettext support
  • Sprintf support
  • Detect language
  • Graceful translation lookup
  • Custom post processing
  • Post missing resources to server
  • Resource caching in browser
  • Fetch resources from server
Basic usage

i18next is a full-featured i18n javascript library for translating your web application. By default, Framework template supports language switching in 2 different ways, language detection according to the user navigator language and fallback languages. All plugin settings also support and use cookies by default. For demonstration purposes, main structure of this page was translated to russian, ukrainian and default english languages. You can change current language by choosing it in the dropdown menu located in top navbar.

Page markup:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="[PATH]/jquery.js" /> // optional
		<script type="text/javascript" src="[PATH]/i18next.min.js" />
	</head>
	<body>
		<ul class="navigation">
			<li><a href="#" data-i18n="nav.dash.main"></a></li>
			<li><a href="#" data-i18n="nav.email.main"></a></li>
			<li><a href="#" data-i18n="nav.snippets.main"></a></li>
		</ul>
	</body>
</html>

Loaded resource file (assets/locales/*.json):

{
	"app": {
		"name": "Framework template"
	},
	"nav": {
	    "dash": {
	        "main": "Dashboards"
	    },
	    "email": {
	        "main": "Email templates"
	    },
	    "snippets": {
	        "main": "Snippets"
	    }
	}
}

Javascript code:

// Initialize i18next
$.i18n.init({
	resGetPath: 'assets/js/locales/__lng__.json',
	debug: true,
	load: 'unspecific',
	fallbackLng: false
}, function (t) {
	$('body').i18n(); // translate nav
});

// Change language on button click
$('.russian').on('click', function () {
	i18n.setLng('ru', function() {
	    $('body').i18n();
	});
})
Set language on init and after init

The plugin allows you to set specified language on init and after init. If language is set on init, resources will be resolved in this order: 1) try languageCode plus countryCode, eg. 'en-US'; 2) alternative look it up in languageCode only, eg. 'en'; 3) finally look it up in definded fallback language, default: 'dev'.
If language is not set explicitly, i18next tries to detect the user language by: 1) querystring parameter ?setLng=en-US; 2) cookie; 3) language set in navigator.

On init example:

i18n.init({ lng: 'en-US' }, function(t) {
	$('body').i18n();
});

After init example:

i18n.setLng('en-US', function(t) {
	$('body').i18n();
});
Library options
i18n.init({
	detectLngQS: 'lang'
});
The current locale to set will be looked up in the new parameter: ?lang=en-US. Default is ?setLng=en-US.
i18n.init({
	cookieName: 'lang' // default 'i18next'
});
The current locale to set and looked up in the given cookie parameter.
i18n.init({
	cookieDomain: '*.mydomain.com'
});
Sets the cookie domain to given value.
i18n.init({
	useCookie: false
});
Use this only if your sure that language will be provided by the other lookup options or set programatically.
i18n.init({
	preload: ['de-DE', 'fr']
});
The additional languages will be preloaded on init.
i18n.preload([lngs], callback)
The additional languages will be preloaded after init by calling this function.
i18n.init({
	lngWhitelist: ['de-DE', 'de', 'fr']
});
Only specified languages will be allowed to load.
// Single 
i18n.loadNamespace('myNamespace', function() {
	// loaded
});

// or multiple
i18n.loadNamespaces([
	'myNamespace1',
	'myNamespace2'
], function() {
	// loaded
});
The additional namespaces will be loaded.
// Single 
i18n.init({
	fallbackLng: 'en'
});

// or multiple
i18n.init({
	fallbackLng: ['fr', 'en']
});
If not set it will default to 'dev'. If turned on, all missing key/values will be sent to this language.
i18n.init({
	fallbackLng: false
});
As the fallbackLng will default to 'dev' you can turn it off by setting the option value to false. This will prevent loading the fallbacks resource file and any futher look up of missing value inside a fallback file.
i18n.init({
	load: 'current'
});
If load option is set to current i18next will load the current set language (this could be a specific (en-US) or unspecific (en) resource file).
i18n.init({
	load: 'unspecific'
});
If set to unspecific i18next will always load the unspecific resource file (eg. en instead of en-US).
i18n.init({ 
	useLocalStorage: true | false,
	localStorageExpirationTime: 86400000 // in ms, default 1 week
});
Caching is turned off by default. If the resouces in a given language had been stored to localStorage they won't be fetched / reloaded from online until set localStorageExpirationTime expired. So if they had been cached once and you add new resources, they won't be reloaded until expired. But you can easily remove the values from localstorage by calling, eg.: localStorage.removeItem("res_en" ).
i18n.init({
	fallbackOnNull: true | false
});
Default is true.
i18n.init({
	fallbackOnEmpty: true | false
});
Default is false.
i18n.init({
	debug: true
});
If something went wrong you might find some helpful information on console log.