How to add a DropDown Language Picker (i18n) to the Menu

How-tos

2.0

i18n,AJAX,bootstrap,internationalization,bootstrap menu

# How To Add Internationalisation to the NavBar Menu in Yii2 Basic (Bootstrap 5) Yii comes with internationalisation (i18n) "out of the box". There are instructions in the manual as to how to configure Yii to use i18n, but little information all in one place on how to fully integrate it into the bootstrap menu. This document attempts to remedy that. <img src="https://visualaccounts.co.uk/images/screenshots/Screenshot_i18n_s.png" />
 
 
The Github repository also contains the language flags, some country flags, a list of languages codes and their language names and a list of the languages Yii recognises "out of the box". A video will be posted on YouTube soon.
 
 
---
 
 
Ensure that your system is set up to use i18n. From the Yii2 Manual:

> Yii uses the `PHP intl` extension to provide most of its I18N features, such as the date and number formatting of the `yii\i18n\Formatter` class and the message formatting using `yii\i18n\MessageFormatter`. Both classes provide a fallback mechanism when the intl extension is not installed. However, the fallback implementation only works well for English target language. So it is highly recommended that you install `intl` when I18N is needed.First you need to create a configuration file.

Decide where to store it (e.g. in the `./messages/` directory with the name `create_i18n.php`). Create the directory in the project then issue the following command from **Terminal** (Windows: CMD) from the root directory of your project:

```php```php

 
./yii message/config --languages=en-US --sourcePath=@app --messagePath=messages ./messages/create_i18n.php
``````

If necessary, change the root directory in `create_i18n.php` to point to the messages directory - the default is `messages`. Note, if the above file is in the messages directory (recommended) then don't alter this `'messagePath' => __DIR__,`. If you alter the directory for `create_i18n.phpmessages` to, say, `/config/` (not a good idea) you can use the following:

```php```

Note: you should always use the `'sourceLanguage' => 'en'` as it is, usually, easier and cheaper to translate from English into another language. If the `sourceLanguage` is not set it defaults to `'en'`.

Add the following to the `'components' => [...]` section:. Html::submitButton(
// 'Logout (' . Yii::$app->user->identity->username . ')', // change this line as well to the following:
Yii::t('app', 'Logout ({username})'), ['username' => Yii::$app->user->identity->username]),
['class' => 'nav-link btn btn-link logout']
)```php
   'Home' => 'Accueil',   'About' => 'À propos',   ...
 
```

## Create a Menu Item (Dropdown) to Change the LanguageA `key` and a `name` is required for each language.

The `key` is the ICU language code in lowercase (with optional [ISO 639.1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) in lowercase (with optional Country code [ISO 3166](https://en.wikipedia.org/wiki/List_of_ISO_3166_country _codes) in uppercase) e.g. > French: `fr` or French Canada: `fr-CA` > > Portuguese: `pt` or Portuguese Brazil: `pt-BR` The `name` is the name of the language *in that language*. e.g. Ffor French: `'Français'`, for Japanese: `'日本の'`. *This is important* as the user may not understand the browser's current language.

In `/config/params.php` create an array named `languages` with the languages required. For example:### 4. Call `LanguageHandler.php` from `/config/web.php`

"Call" the `LanguageHandler.php` file from `/config/web.php` by adding the following to either just above or just below `'params' => $params,`

```php'encodeLabels' => false, // Optional but required to enter HTML into the labels for images
'items' => $items, // add the languages into the Dropdown
],
 
```
The code for in `main.php` for the NavBar should look something like this: ```php
 
NavBar::begin([
'brandLabel' => Yii::$app->name, // set in /config/web.php
'brandUrl' => Yii::$app->homeUrl,```

If countryLanguage flags or images are required next to the language name see *Optional Items* at the end of this document.

### 6. Trigger the Language change with an Ajax callTo call the Language Action `actionLanguage()` make an Ajax call in a JavaScript file.

Create a file in `/public_htmlweb/js/` named `language.js`.

Add the following code to the file:```

**Internationalisation should now be working on your project.**
 
 
 
---

## Optional ItemsThere are two steps:

1.**A.** In `/config/web.php uncomment` the following line:

```php```

2.**B.** Create a TranslationEventHandler:

In `/components/` create a file named: `TranslationEventHandler.php` and add the following code to it:```

If there is a missing translation, the text is replaced with a message similar to the following text:

> @MISSING: app.Logout (John) FOR LANGUAGE fr @```

### 2. Add CountryLanguage Flags to the Dropdown Menu This is very useful and recommended as it aids the User to locate the correct language. There are a number of steps for this. 1.**a.** Create images of the flags. The images should be 25px wide by 15px high. The images **must have** the same name as the language key in the language array in params.php. For example: `fr.png` or `en-US.png`. If the images are not of type ".png" change the code in part 2**b.** below to the correct file extension. Place the images in a the directory `/public_htmlweb/images/flags/`. 2.**b.** Alter the code in `/views/layouts/main.php` so that the code for the "NavBar" reads as follows:

```phpFor further reading and information see:

[i18ntutorial on Github](https://github.com/JQL/i18ntutorial)
 
 
[Yii2 Internationalization Tutorial](https://www.yiiframework.com/doc/guide/2.0/en/tutorial-i18n)

[PHP intl extensions](https://www.php.net/manual/en/intro.intl.php)Copyright Notice

> Internationalization (i18n) Menu code provided by JQL, https://visualaccounts.co.uk ©2023 JQL all rights reserved

Redistribution and use in source and binary forms with or without modification are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.