Yii 2.0: yii2-language-picker

Yii2 Language Picker Widget
10 followers

Yii2 Language Picker

Introduction

The widget provides an easy to use language selector which makes it possible to change the language of our website easily. The language change can take place synchronously or asynchronously (through Ajax). The default method is asynchronous (through an Ajax call), however when this method fails for any reason (e.g. JavaScript is blocked on the client side) the new language will actualise synchronously through an automatic page reload.

The language switcher is fully customisable. However, the pre-defined options provide a dropdown list (DropDownList), and a link-based list (ButtonList). Both versions can display the name of the chosen language and the corresponding flag (icon).

Installation

Composer

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist lajax/yii2-language-picker "1.*"

or add

"lajax/yii2-language-picker": "1.*"

to the require section of your composer.json file.

Config:

Identifier of the language element. e.g.: en, en-US

Minimal configuration (icons only)

'language' => 'en',
'bootstrap' => ['languagepicker'],
'components' => [
    'languagepicker' => [
        'class' => 'lajax\languagepicker\Component',
        'languages' => ['en', 'de', 'fr']                   // List of available languages (icons only)
    ]
],

Minimal configuration (icons and text)

'language' => 'en',
'bootstrap' => ['languagepicker'],
'components' => [
    'languagepicker' => [
        'class' => 'lajax\languagepicker\Component',        // List of available languages (icons and text)
        'languages' => ['en' => 'English', 'de' => 'Deutsch', 'fr' => 'Français']
    ]
],

Full configuration (icons only)

'language' => 'en-US',
'bootstrap' => ['languagepicker'],
'components' => [
    'languagepicker' => [
        'class' => 'lajax\languagepicker\Component',
        'languages' => ['en-US', 'de-DE', 'fr-FR'],         // List of available languages (icons only)
        'cookieName' => 'language',                         // Name of the cookie.
        'expireDays' => 64,                                 // The expiration time of the cookie is 64 days.
        'callback' => function() {
            if (!\Yii::$app->user->isGuest) {
                $user = \Yii::$app->user->identity;
                $user->language = \Yii::$app->language;
                $user->save();
            }
        }
    ]
],

Yii2-translate-manager integration

Minimal configuration (icons only)

'language' => 'en',
'bootstrap' => ['languagepicker'],
'components' => [
    'languagepicker' => [
        'class' => 'lajax\languagepicker\Component',
        'languages' => function () {                        // List of available languages (icons only)
            return array_keys(\lajax\translatemanager\models\Language::getLanguageNames(true));
        }
    ]
],

Full configuration (icons and text)

'language' => 'en-US',
'bootstrap' => ['languagepicker'],
'components' => [
    'languagepicker' => [
        'class' => 'lajax\languagepicker\Component',
        'languages' => function () {                        // List of available languages (icons and text)
            return \lajax\translatemanager\models\Language::getLanguageNames(true);
        },
        'cookieName' => 'language',                         // Name of the cookie.
        'expireDays' => 64,                                 // The expiration time of the cookie is 64 days.
        'callback' => function() {
            if (!\Yii::$app->user->isGuest) {
                $user = \Yii::$app->user->identity;
                $user->language = \Yii::$app->language;
                $user->save();
            }
        }
    ]
],

IMPORTANT

To use the widget, the value of the enablePrettyUrl property in the urlManager configuration must be true, and the value of showScriptName false.

example:

'components' => [
    // ...
    'urlManager' => [
        'enablePrettyUrl' => true,
        'showScriptName' => false,
        'rules' => [
            // your rules go here
        ],
        // ...
    ],
    // ...
]

Using of urlManager.

Usage

Displaying language selector

Displaying pre-defined languate picker buttons (icons and text or icons only):

<?= \lajax\languagepicker\widgets\LanguagePicker::widget([
    'skin' => \lajax\languagepicker\widgets\LanguagePicker::SKIN_BUTTON,
    'size' => \lajax\languagepicker\widgets\LanguagePicker::SIZE_SMALL
]); ?>

Displaying pre-defined languate picker dropdown list (icons and text or icons only):

<?= \lajax\languagepicker\widgets\LanguagePicker::widget([
    'skin' => \lajax\languagepicker\widgets\LanguagePicker::SKIN_DROPDOWN,
    'size' => \lajax\languagepicker\widgets\LanguagePicker::SIZE_LARGE
]); ?>

Customising the language picker:

<?= \lajax\languagepicker\widgets\LanguagePicker::widget([
    'itemTemplate' => '<li><a href="{link}" title="{language}"><i id="{language}"></i> {name}</a></li>',
    'activeItemTemplate' => '<a href="{link}" title="{language}"><i id="{language}"></i> {name}</a>',
    'parentTemplate' => '<div class="language-picker dropdown-list {size}"><div>{activeItem}<ul>{items}</ul></div></div>',
    'languageAsset' => 'lajax\languagepicker\bundles\LanguageLargeIconsAsset',      // StyleSheets
    'languagePluginAsset' => 'lajax\languagepicker\bundles\LanguagePluginAsset',    // JavaScripts
]); ?>

Add Language Picker into the Bootstrap Navbar

<?php
NavBar::begin([
    // ...
]);
echo Nav::widget([
    // ...
]);
?>
<div class="navbar-text pull-right">
    <?=
    \lajax\languagepicker\widgets\LanguagePicker::widget([
        'skin' => \lajax\languagepicker\widgets\LanguagePicker::SKIN_DROPDOWN,
        'size' => \lajax\languagepicker\widgets\LanguagePicker::SIZE_LARGE
    ]);
    ?>
</div>
<?php NavBar::end(); ?>

Screenshots

Buttons icons and text

Buttons icons and text

Buttons icons only

Buttons icons only

Buttons text only

Buttons text only

DropDown icons and text

DropDown icons and text

DropDown icons only

DropDown icons only

DropDown text only

DropDown text only

Links

Total 9 comments

#20025 report it
alexdran at 2017/02/08 04:40am
problem with Yii console

Hello, first of all thank you for your component I have however a problem with yii command

Exception 'yii\base\UnknownPropertyException' with message 'Getting unknown property: yii\console\Request::cookies'

in /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/base/Component.php:147 Stack trace:

0 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/lajax/yii2-language-picker/Component.php(129): yii\base\Component->__get('cookies')

1 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/lajax/yii2-language-picker/Component.php(113): lajax\languagepicker\Component->initLanguage()

2 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/base/Object.php(107): lajax\languagepicker\Component->init()

3 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/lajax/yii2-language-picker/Component.php(104): yii\base\Object->__construct(Array)

4 [internal function]: lajax\languagepicker\Component->__construct(Array)

5 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/di/Container.php(381): ReflectionClass->newInstanceArgs(Array)

6 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/di/Container.php(156): yii\di\Container->build('lajax\languagep...', Array, Array)

7 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/BaseYii.php(344): yii\di\Container->get('lajax\languagep...', Array, Array)

8 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/di/ServiceLocator.php(135): yii\BaseYii::createObject(Array)

9 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/base/Application.php(307): yii\di\ServiceLocator->get('languagepicker')

10 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/base/Application.php(272): yii\base\Application->bootstrap()

11 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/console/Application.php(124): yii\base\Application->init()

12 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/base/Object.php(107): yii\console\Application->init()

13 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/base/Application.php(205): yii\base\Object->__construct(Array)

14 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/vendor/yiisoft/yii2/console/Application.php(89): yii\base\Application->__construct(Array)

15 /Applications/XAMPP/xamppfiles/htdocs/HeyConference/_protected/yii(28): yii\console\Application->__construct(Array)

16 {main}

it disappear adding a return in line /** * Setting the language of the site. */ public function initLanguage() {return;

bypassing the component

any idea how to solve this in a proper way ? thank you in advance, alessandro

#19373 report it
Kavitama at 2015/06/06 07:25pm
Grazie Federico!

Grazie Federico!

#19331 report it
Federico Benedetti at 2015/05/22 06:46pm
How to include it int navbar

I solve in this way, i don't know if it is the best solution, but for me works fine.

echo   LanguagePicker::widget([
                'skin' => \lajax\languagepicker\widgets\LanguagePicker::SKIN_DROPDOWN,
                'size' => \lajax\languagepicker\widgets\LanguagePicker::SIZE_LARGE,
                'parentTemplate' => '<ul class="navbar-nav navbar-right nav" style="margin-top: 18px"><div class="language-picker dropdown-list {size}"><div>{activeItem}<ul>{items}</ul></div></div></ul> ',
            ]);

I put this code AFTER "echo Nav::widget[..." because i want to put the select language in the top-right of my page. Both widget has the same class navbar-right and the css is with IMPORTANT parameter, so the first element (language-picker) goes on the right.

#19296 report it
mem at 2015/05/13 01:38pm
Solved Kavimata Original Issue

I had the same issue Kavimata had. Found out that, the issue was a JS file that was disabling the default link behaviours from the browser.

All nice and clean. No issues. Great.

#19295 report it
mem at 2015/05/13 12:44pm
using it on layouts

I do have the same issue that kavitama has. I'm unable to use this on layouts. While working fine on views. However, 99% of the time, the language version will be placed on a layout file.

#19244 report it
Stageline at 2015/04/26 07:41pm
hehe

magyar :)

#19189 report it
lajax at 2015/04/09 07:58am
Answer to second question

Hi!

  1. step: Create the suitable flag sprite, modify the generated css file, change the country codes to language codes. eg.:
.flag.flag-us {background-position: -16px 0}

->

.language-picker.large i.en-US {background-position: -16px 0}

(Check out the structure of my flags-xxx.css)

  1. step: Copy the resulting css into the project directory. eg.:
@app/assets/css/flags.css
  1. step: Create the suitable AssetBundles class to the css. eg.:
namespace app/assets;
 
class FlagsAsset extends \yii\web\AssetBundles {
    public $sourcePath = '@app/assets';
    public $css = [
        'css/flags.css',
        // ...
    ];
}
  1. step: This FlagsAsset class now will be available as it has been shown in the customize example.

Best Regards

#19186 report it
Kavitama at 2015/04/08 06:13pm
Country Missing

How can I add other flags? and how to refer to them ?

#19185 report it
Kavitama at 2015/04/08 01:35pm
How to include it int navbar

Hi,

The truth is your solution is the one I have been looking for a while. I would like to include it into the frontend/views/layouts/main.php into the NavBar but I am failing. Is it possible? If yes How can I do it?

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet