Magento Translation Functions

If you manage a Magento multi-language store, you know how important it is to have accurate translations. But you rarely question how translation actually works. It all starts with the Magento translation functions.

What is Magento Translation Function?

Magento translation function is a built-in feature that is used to denote text available for translation across modules, themes, static blocks, and even email templates. 

Besides, translation functions play the main part in creating translation dictionaries in Magento.  

So if you're a developer or someone who is looking for ways to translate unstranslated content on your store, you need to learn about the following translaiton functions.

Main Magento Translation Functions

There are several translation functions Magento offers to localized texts. The most commonly used ones include:

As you can see, each of the listed functions is used in a different context within Magento. So let's take a closer look to understand where and how they can be applied.

__('Text' ) Function

__('Text' ) function is the most popular translation function in Magento and is primarily used for translating modules and themes within PHP files.

To wrap your text in this function and translate it later into different languages, open the PHP or a .phtml file where the string appears. Then enclose the text inside the __('Text' ) function, like:

<h1><?= __('Hello world!')?></h1>

To translate this phrase, create or edit the corresponding CSV file located in your module or theme. It is located under the i18n directory with the locale code as a filename.

For example, if you need to translate the string into French, find the following file:

app/code/Vendor/Your_module/i18n/fr_FR.csv

Then, add your translation entry, keeping the format "Original Text","Translated Text", for example:

"Hello world!","Bonjour le monde!"

Afterward, save the changes and flush the cache.

{{trans "Text"}} Function

{{trans "Text"}} function is used to translate CMS blocks, pages, and email templates. So, if you want the "Welcome to our store" phrase to be available for translations on your home page, wrap it in the following way:

Welcome to our store

Now, if Magento finds a corresponding translation in the i18n.csv files, it replaces the original text with the translated version.

data-bind="i18n: 'Text'" Function

The data-bind="i18n: 'Text'" translation function is used in frontend Knockout.js templates to display dynamic text on the storefront that updates without reloading the page. For example:

<span data-bind="i18n: 'Subtotal'"></span>

Here, the i18n binding automatically translates the given string key ('Subtotal') into the language set as the current locale locale.

$t('Text') Function

This function is used in JavaScript files through the mage/translate module. However, you first need to add the 'mage/translate' library as a dependency in your JavaScript file:

require(['jquery', 'mage/translate'], function ($, $t) {
    'use strict';

    alert($t('Welcome to our store!'));
});

It works similar to the previous Magento translation function. However, it's intended for translating dynamic or interactive elements on your store, such as text inside pop-ups, alerts, or any script-generated messages:

alert($t('Your cart is empty'));

Magento automatically translates the text wrapped in the function when the store language changes. But only if it finds the translation in your i18n.csv files.

translate="true" Attribute

The translate="true" attribute is used in UI components and configuration XML files. For instance:

<item name="label" xsi:type="string" translate="true">Customer Name</item>

This means that to translate strings in UI component layouts, you can add the "translate" attribute to any element and set it as "true".

The best thing about this method is that it allows you to translate directly from XML, without modifying PHP or PHTML files.

Whether you deal with PHP, XML, JavaScript, or Knockout.js templates, Magento provides a set of translation functions to help you localise your store effectively.

However, most modules and themes already use Magento translation functions in their files. So, all you need to do is just install language packs and translate large portions of your store automatically.

FAQs

What is the difference between translation functions and language packs in Magento?

Translation functions are responsible for marking code strings "translatable" or available for translation. Language packs are the ready-made packages with translation for those strings through i18n.csv files.

How do I know if a string can be translated in Magento?

A string can be translated only if it is wrapped in a translation function, like __(Text), {{trans "Text"}}, $t('Text'), data-bind="i18n: 'Text'".

Is there a difference between $t('Text') and data-bind="i18n: 'Text'"?

Both translation functions are used for translating text in Knockout.js templates, but $t('Text') is used inside JavaScript files, while data-bind="i18n: 'Text'" is used in HTML bindings.

What should I do if my translation doesn’t appear on the frontend?

If you don't see a certain string, button or label translated on the frontend, check the following:

• 1) if the string is wrapped in a translation function
• 2) if the translation is added to the i18n.csv file the right way
• 3) if the file is in the correct location
• 4) if the Magento cache is cleared