This document discusses internationalization (i18n) in Magento 2. It explains how language translations work by loading translations from different sources in order, with the most specific taking precedence. It provides examples of translating text using inline translations, language packs, and theme translations. It notes some limitations, such as theme translations not working for JavaScript translations, and recommends avoiding direct changes to template files. It also suggests future improvements like translating to CMS blocks.

1. Magento 2 : i18n – how can I rephrase that?
Mage Titans Spain | June 2017

2. My name is:
Tadhg
- g

3. About me?
Family always comes first…
Magento comes a distant second ☺ @TadhgBowe

4. ▪ 300+ e-commerce websites since 1997
▪ Substantial e-commerce website experience (ca. 100 yrs)
▪ Magento specialists since 2010 (ca. 100 implementations)
▪ Magento 2 certified
▪ Shopify Plus certified
I work for a company called “Screen Pages”
7 YEARS OF
MAGENTO

5. Fiesta!! In my own village!!

6. Viva Madrid!

7. Today’s Agenda:
i18n in Magento 2
Focus on how language translations work
Let’s look at a few examples
Current limitations
Future nice to haves

8. Disclaimer:
I AM STILL LEARNING MAGENTO 2 ☺

9. i18n?
Let’s THINK BIG!
internationalisation and localisation are means of adapting computer
software to different languages, regional differences and technical
requirements of a target market (locale)

10. Don’t make the customer think!

11. Locale setting:
Stores > Configuration > General > Locale Options:

12. Contact Us - Write Us!

13. module-contact
vendor/magento/module-contact

14. module-contact: contents of en_US.csv
"Write Us","Write Us"
"Jot us a note and we’ll get back to you as quickly as possible.","Jot us a note and we’ll get back to you as
quickly as possible."
Name,Name
Email,Email
"Phone Number","Phone Number"
"What’s on your mind?","What’s on your mind?"
Submit,Submit
"Name: %name","Name: %name"
"Email: %email","Email: %email"
"Phone Number: %telephone","Phone Number: %telephone"
"Comment: %comment","Comment: %comment"
"Contacts Section","Contacts Section"
Contacts,Contacts
"Contact Us","Contact Us"

15. Export/Examine all translations:
bin/magento i18n:pack /[SITE PATH]/[SITE_NAME]/en_US.csv -d en_US
"Write Us","Write Us",module,Magento_Contact
Name,Name,module,Magento_Contact
Email,Email,module,Magento_Contact
"Phone Number","Phone Number",module,Magento_Contact
Submit,Submit,module,Magento_Contact
"Continue Shopping","Continue Shopping",module,Magento_Checkout
Email,Email,module,Magento_Catalog
Email,Email,module,Magento_Customer

16. Let’s take a closer look:

17. module-contact/view/frontend/templates/form.phtml
…<fieldset class="fieldset">
<legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Write Us') ?></span></legend><br />
<div class="field note no-label"><?php /* @escapeNotVerified */ echo __('Jot us a note and we’ll get back to
you as quickly as possible.') ?></div>
<div class="field name required">
<label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
<div class="control">
<input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="<?php
echo $block->escapeHtml($this->helper('MagentoContactHelperData')->getPostValue('name') ?: $this-
>helper('MagentoContactHelperData')->getUserName()) ?>" class="input-text" type="text" data-
validate="{required:true}"/>
</div>
</div>
<div class="field email required">
<label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
<div class="control">
<input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php
echo $block->escapeHtml($this->helper('MagentoContactHelperData')->getPostValue('email') ?: $this-
>helper('MagentoContactHelperData')->getUserEmail()) ?>" class="input-text" type="email" data-
validate="{required:true, 'validate-email':true}"/>
</div>
</div>…

18. How do translations work:
public function loadData($area = null, $forceReload = false)
{
…
$this->_loadModuleTranslation();
$this->_loadThemeTranslation();
$this->_loadPackTranslation();
$this->_loadDbTranslation();
…
return $this;
}
[YOUR SITE]/vendor/magento/framework/Translate.php

19. Who wins?
1. $this->_loadDbTranslation();
Not there?
2. $this->_loadPackTranslation();
Not there?
3. $this->_loadThemeTranslation();
Not there?
4. $this->_loadModuleTranslation();
Not there? It will simply output the original phrase.

20. Golden rules for today:
WEBSITE OWNER ALWAYS THINKING BIG!
e.g. future multilingual website store views,
in-house seasonal store views
Not allowed to change a translation in template files

21. 1. Inline translation:
From our Translate.php: $this->_loadDbTranslation();
Enabled via: Stores > Configuration > Advanced > Developer > Translate Inline > Enabled for
Storefront = Yes
(don’t forget Developer Client Restrictions > Allowed IPs).
Translation Phrases Stored in DB “translation” table.

22. 1. Inline translation:

23. What about something like “Email”?
Our challenge is to change “Email” to “Your Email Address” and only on the Contact Us Page

24. Inline Translation: ‘Email’ to ‘Your Email Address’

25. Inline Translation: ‘Email’ to ‘Your Email Address’

26. Inline Translation: So where else might ‘Email’ change?
Inline Translations are GLOBAL across the frontend

27. 2. Language Pack:

28. Language Pack: Folder structure

29. Language Pack: Example files
Some examples in es_ES.csv:
In our en_GB.csv:
(note: remember to clear your translation caches and any others that apply)

30. Language Pack: Results…
Language Pack Translations are GLOBAL across the frontend

31. Happy so far? ☺

32. 3. Theme Translation: Folder structure

33. Theme Translation: en_GB.csv
In our en_GB.csv:
So! Did it work?

34. Theme Translation: Results…
Theme Translations are GLOBAL across the frontend

35. Theme Translation: Module level?
Will this work?!

36. Theme Translation: Module level - results…
Nothing changed.
So we’re a little stuck!
Nope!

37. Anything else?
1. $this->_loadDbTranslation(); (GLOBAL)
2. $this->_loadPackTranslation(); (GLOBAL)
3. $this->_loadThemeTranslation(); (GLOBAL)
4. $this->_loadModuleTranslation(); (MODULE)
What about theme level changes in a foreign language website
e.g. two Spanish store views?

38. How about this solution:
1. $this->_loadDbTranslation(); (GLOBAL)
2. $this->_loadThemeModuleTranslation(); (MODULE)
3. $this->_loadThemeTranslation(); (GLOBAL)
4. $this->_loadPackTranslation(); (GLOBAL)
5. $this->_loadModuleTranslation(); (MODULE)

39. But what about super active client…?
What if the client wants to change their own translations at a
very specific module level!?

40. Now we’re going places! ☺
1. $this->_loadClientMediaThemeModuleTranslation(); (MODULE)
2. $this->_loadClientMediaThemeTranslation(); (GLOBAL)
3. $this->_loadDbTranslation(); (GLOBAL)
4. $this->_loadThemeModuleTranslation(); (MODULE)
5. $this->_loadThemeTranslation(); (GLOBAL)
6. $this->_loadPackTranslation(); (GLOBAL)
7. $this->_loadModuleTranslation(); (MODULE)

41. Our solution inside a module:

42. Getting thirsty… hurry up Tadhg!

43. Basket page translations:
Comes from a js-translation.json file
(pub/static/frontend/theme/locale)

44. Basket page translations: where they come from
<!-- ko ifnot: getCartParam('summary_count') -->
<strong class="subtitle empty" data-bind="visible:
closeSidebar()">
<!-- ko i18n: 'You have no items in your shopping cart.' --
><!-- /ko -->
</strong>
.../module-checkout/view/frontend/web/template/minicart/content.html
…/module-checkout/view/frontend/templates/cart/noItems.phtml
<div class="cart-empty">
<?php echo $block->getChildHtml('checkout_cart_empty_widget'); ?>
<p><?php echo __('You have no items in your shopping cart.') ?></p>
…
</div>
…

45. Be careful with this file!

46. Oops.
Careful: Theme translations don’t currently work with js-translation.json file.
In vendor/magento/module-translation/Model/Json/PreProcessor.php function process(…)
$area = $this->areaList->getArea($areaCode);
$area->load(MagentoFrameworkAppArea::PART_TRANSLATE);
needs to be:
$area = $this->areaList->getArea($areaCode);
$area->load(MagentoFrameworkAppArea::PART_DESIGN);
$area->load(MagentoFrameworkAppArea::PART_TRANSLATE);
Ref: https://github.com/magento/magento2/issues/8508#issuecomment-281329241

47. Careful when you change a phrase!

48. Another nice to have: Translation Phrase -> CMS Block:
In our en_GB.csv:
"Jot us a note and we’ll get back to you as quickly as possible.","{{{Contact_Us_Write_To_Us_Into}}}"

49. To summarise:
▪ Magento 2 has translations well covered.
▪ Make sure you create a i18n folder and translation .csv in your module.
▪ Try to avoid making phrase changes directly in template files.
▪ Be careful when making an existing phrase change. Does it exist elsewhere!?
▪ Read the devdocs ☺ devdocs.magento.com/guides/v2.0/ search for “Translations”
▪ Drink Horchata – It’s good for you too apparently! ☺

50. OMG! There’s an English (Ireland) locale…

51. Finally my favourite Irish translation phrase…
“to be sure”,”to be sure”
I

52. Cheers!
@TadhgBowe
Good Luck To You All! Gracias.