In this tutorial you will learn:

  • How to setup a good datamodel to support translations
  • Use translation keys in a UI Builder page
  • Use translation keys in Custom HTML pages

1 Setup the datamodel
To support translations in your application, you'll need a data model to manage the available languages and a model to manage all translations per language.

Therefore we create 2 datamodels:

  • Language
  • WebTranslation

The language model has the following properties:

The WebTranslation has the following properties:

Also create a belongs_to relation from WebTranslation to the Language model so that 1 WebTranslation always has 1 Language.

2 Create backoffice views to manage translations
Create 2 separate views in your backoffice to manage all translations and languages.
Each language that you define should have at least a name and a 2 letter code to be able to find the correct language.

For each WebTranslation you should create a unique key so that the system can find the correct translation for a certain translation key specified in your frontend application.

In the below example there are translations for a login page in 2 languages, English and Dutch

3 Create a translated webpage with the UI builder
Create a new webpage with the UI builder and make sure you specify a language parameter in the url path to recognize the chosen language. In this case we create a login page with the path '/:lang/login'.
Go to page settings of the page and add a input variable called lang (of type Text) and define a variable called translations with a filter as stated in the example shown here:

Now you can drag components onto the page that are compatible with translation keys. For example the 'Translated input' component which is a form input field where you can specify a translation key. Betty Blocks will then search automatically in the translations collection for that specific translation key and display the value if found.

After building the login page it looks like this in the UI Builder:

4 Use translations in a Custom HTML page
You can also use the same translation functions in a custom html page.

  • create an endpoint with a language parameter in the url path (eg '/:lang/login_custom')
  • Add a input parameter called 'lang' and the same translations collection we used in the UI builder version.
  • Now in the HTML add the following liquid tag to display a translation based on a key: {{translations | find_result_by_key_value: 'key', 'login.username', 'value' }}

Our html from the example looks like this:
<div class="form-group">
  <label>{{translations | find_result_by_key_value: 'key', 'login.username', 'value' }}</label>
  <input type="text" name="username" placeholder="{{translations | find_result_by_key_value: 'key', 'login.username', 'value' }}" class="form-control">
</div>

Did this answer your question?