Polyglot.js is a tiny and powerful JavaScript i18n library from Airbnb.
This is a yii2-extension that helps integrating polyglot.js into your yii2 application.
First install extension through composer:
php composer.phar require --prefer-dist devgroup/yii2-polyglot
Create directory where you will place your translation js files.
For example, if we our app is based on yii2-app-advanced - create directory common/polyglot.js/
.
Now create your js translation files under this directory.
Naming format is common/polyglot.js/%LANGUAGE%.js
, where %LANGUAGE%
is your Yii::$app->language
, for example common/polyglot.js/ru-RU.js
.
An example of js file contents(:en: version file common/polyglot.js/en-US.js
:
polyglot.extend({
"nav": {
"hello": "Hello",
"hello_name": "Hello, %{name}",
"sidebar": {
"welcome": "Welcome"
}
}
});
And an example for :ru: version file common/polyglot.js/ru-RU.js
:
polyglot.extend({
"nav": {
"hello": "Привет",
"hello_name": "Привет, %{name}",
"sidebar": {
"welcome": "Бобро пожаловать"
}
}
});
Now add a special yii2 application param PolyglotTranslationPath
with your js translation path as value
into your config file(ie. common/config/params.php
):
<?php
return [
'adminEmail' => 'admin@example.com',
'supportEmail' => 'support@example.com',
'user.passwordResetTokenExpire' => 3600,
/**
* This is a path where your js translation files are stored
* You can use yii2 aliases here(@app, @common, etc.)
*/
'PolyglotTranslationPath' => '@common/polyglot.js'
];
And the final thing is to register CurrentTranslation
inside your layout view or add it as AssetBundle dependency.
For adding CurrentTranslation
into your view just add the one line into
views/layouts/main.php
near your AppAsset::register
call:
DevGroup\Polyglot\CurrentTranslation::register($this);
For adding CurrentTranslation
as dependency for your AppAssetBundle
modify your assets/AppAsset.php
:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $sourcePath = '@frontend/assets/dist/';
public $css = [
'styles/main.min.css',
];
public $js = [
'scripts/main.js',
];
public $depends = [
'yii\web\JqueryAsset',
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
/// !!! This is a dependency to CurrentTranslation !!!
'DevGroup\Polyglot\CurrentTranslation',
];
}
That's it. Now on every request you will get:
polyglot
variable will be initialized with current locale(Yii::$app->language
).<body>
tag.Now you can use Polyglot.js
as it is described in official documentation:
polyglot.t("nav.sidebar.welcome");
=> "Бобро пожаловать"
Comments