Locales

Locales are a series of words or short phrases that are generally re-used multiple times throughout your website (ex: Read more, Book now, Grid View). In order to avoid having to manually change the same copy multiple times, we create "locales" that allow you to make the change in one place and the system will automatically update it everywhere for you.

Syntax to add a locale

Locales can only be used in .html file (like variables)

__@@key for your locale@@__

__@@my key@@__

<a href="#">__@@Book now@@__</a>

<a href="#">__@@Read more@@__</a>

If there is no translation provided in the BO, the page will use the key of your locale. This is why most locales are written this way: __@@Read more@@__

The locales can be edited in the BO at 2 places

  • Inside the theme configuration in the BO (Galaxy > Design > Theme)

Overrided at website level (Website > Settings > Locales)

In the frontend, here is what will appear for the user:

  1. If there is a value at website level, website translation

  2. If no value at website level -> Value defined at theme level

  3. If no value at theme level -> key of the locale

Be careful when changing the key of a locale. For the system, new key = new locale

So if you have already translated the key, you will have to translate it once again on all languages

JSON containing website locales

You still need to create the locales inside the theme, this JSON is only here to offer an easier way to get the value from JS. Like other "static json" offered by Galaxy the values of this file are only updated on publish.

The path to this JSON file is a string you can get with #$json-locales$# in the HTML

Example:

{
    "Read More": "Lesen Sie mehr",
    "FROM": "AB",
    "Book Now": "Jetzt buchen",
    "Type in your Email": "E-Mail eingeben",
    "Submit": "Senden",
    "CHECK AVAILABILITY": "Verf\u00fcgbarkeit pr\u00fcfen",
    "Powered by TravelClick": "Unterst\u00fczt durch TravelClick",
    "Go to top": "Zum Seitenanfang",
    "Rooms": "Zimmer",
    "Adults": "Erwachsene",
    "Children": "Kinder",
}

Dynamic locale

Galaxy doesn't support dynamic locales (for example __@@Discover our {120} hotels@@__). In case you need to do this, we suggest to do it in Javascript. Here is an example of how it was done on a project:

First, in your .html file, you'll have to create the locale following a specific syntax. Place variable you want to dynamise between curly brackets. Then, add a data attribute with the same variable name to the closest locale wrapper.

You can add multiple variable to the same locale if needed.

<a href="#" data-count="{{item.nb_hotel}}">
    __@@Discover our {count} hotels@@__
</a>

<p data-firstname="John" data-lastname="Doe">
    __@@Hello {firstname} {lastname}@@__
</p>

Now, use the following script to replace variable between curly brackets by the value of the matching data attribute 

export function dynamizeLocales() {
    $('.js-dynamic-locale').each(function() {
        const $el = $(this);
        let str = $el.text();
        const variables = str.match(/{([^}]+)}/g)

        variables.forEach(key => {
            var param = $el.data(key.replace('{', '').replace('}', '')) || '';

            str = str.replace(key, param)
        })

        $el.html(str).removeClass('hidden');
    })
}

PreviousFunctionsNextBlocks

Last updated