Skip to content

Localisation

Themes support the ability to add default translations that users will be able to see in their Beacon.

Setting up languages is relatively easy and pain free for theme development but can be confusing at first sight. All translations are stored in your resources/lang folder, if it doesn't exist, just create it.

Each language file uses the ISO 639-2 standard and are formatted in JSON, so for English it would look like this en.json and for Chinese it would look like zh.json.

By default all themes fallback to English. Users can switch the language of the theme in the General Config on Beacon.

When full support for localisation becomes available in Beacon it will use the customers current selected language to determine which translations should be used for the store.

Like Laravel's translations if your store is English by default and you have translated your theme into many different languages, any translations that have not been finished or are missing will fallback to your English translations. If your translation is also missing from the English file the customer will be shown a blank space.

To translate a string in your you can do something like this:

html
<div class="header">
    <h1>{{  translate('MY_EXAMPLE_TRANSLATION') }}</h1>
</div>

In your language file resources/lang/en.json you might write something like this:

json
{
    "MY_EXAMPLE_TRANSLATION": "Hello"
}

Then if you have another language like Chinese resources/lang/zh.json, you would do

json
{
    "MY_EXAMPLE_TRANSLATION": "你好"
}

Finally users in Beacon can override all of these translations by simply heading to the translations page and adding a new MY_EXAMPLE_TRANSLATION to their store and it will override all of them.