yii2-language-picker Yii2 Language Picker Widget

  1. Yii2 Language Picker
  2. Introduction
  3. Installation
  4. Composer
  5. Config:
  6. Usage
  7. Displaying language selector
  8. Screenshots
  9. Links

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

0 0
10 followers
0 downloads
Yii Version: 2.0
License: BSD-2-Clause
Category: User Interface
Developed by: lajax
Created on: Mar 2, 2015
Last updated: 2 years ago

Related Extensions