Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tadhg Bowe - i18n: how can I rephrase that?

159 views

Published on

The talk focuses on the topic of Internationalisation or i18n as it’s more commonly known. It will focus on the different ways that translations work in Magento 2. We’ll look more closely at a couple of real examples and what are the different options available to us. We’ll examine how the framework builds translation phrases.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Tadhg Bowe - i18n: how can I rephrase that?

  1. 1. Magento 2 : i18n – how can I rephrase that? Mage Titans Spain | June 2017
  2. 2. My name is: Tadhg - g
  3. 3. About me? Family always comes first… Magento comes a distant second ☺ @TadhgBowe
  4. 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. 5. Fiesta!! In my own village!!
  6. 6. Viva Madrid!
  7. 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. 8. Disclaimer: I AM STILL LEARNING MAGENTO 2 ☺
  9. 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. 10. Don’t make the customer think!
  11. 11. Locale setting: Stores > Configuration > General > Locale Options:
  12. 12. Contact Us - Write Us!
  13. 13. module-contact vendor/magento/module-contact
  14. 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. 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. 16. Let’s take a closer look:
  17. 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. 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. 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. 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. 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. 22. 1. Inline translation:
  23. 23. What about something like “Email”? Our challenge is to change “Email” to “Your Email Address” and only on the Contact Us Page
  24. 24. Inline Translation: ‘Email’ to ‘Your Email Address’
  25. 25. Inline Translation: ‘Email’ to ‘Your Email Address’
  26. 26. Inline Translation: So where else might ‘Email’ change? Inline Translations are GLOBAL across the frontend
  27. 27. 2. Language Pack:
  28. 28. Language Pack: Folder structure
  29. 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. 30. Language Pack: Results… Language Pack Translations are GLOBAL across the frontend
  31. 31. Happy so far? ☺
  32. 32. 3. Theme Translation: Folder structure
  33. 33. Theme Translation: en_GB.csv In our en_GB.csv: So! Did it work?
  34. 34. Theme Translation: Results… Theme Translations are GLOBAL across the frontend
  35. 35. Theme Translation: Module level? Will this work?!
  36. 36. Theme Translation: Module level - results… Nothing changed. So we’re a little stuck! Nope!
  37. 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. 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. 39. But what about super active client…? What if the client wants to change their own translations at a very specific module level!?
  40. 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. 41. Our solution inside a module:
  42. 42. Getting thirsty… hurry up Tadhg!
  43. 43. Basket page translations: Comes from a js-translation.json file (pub/static/frontend/theme/locale)
  44. 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. 45. Be careful with this file!
  46. 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. 47. Careful when you change a phrase!
  48. 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. 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. 50. OMG! There’s an English (Ireland) locale…
  51. 51. Finally my favourite Irish translation phrase… “to be sure”,”to be sure” I
  52. 52. Cheers! @TadhgBowe Good Luck To You All! Gracias.

×