| |

  1. Basic Translation

Supporting different languages is a must for merchants that are targeting customers from different countries and/or languages.  Leading also to bigger exposition since the customer base would be significantly expanded.

Venia / Magento PWA theme doesn’t provide internationalization packages out of the box; being the American English the default language (en_US); however, the good news is that translating a Venia web site is a very simple process. 

Let’s take for example the Search button, located at the top right of any recently installed Venia environment, and translate it to Spanish. 

Assuming that the local project has been fully configured:

  1. Copy the original en_US from Venia and paste it into the project root

# cp project_root/node_modules/@magento/venia-ui/i18n  /local_project

  1. Create a new dictionary using the following format: 

language-abreviation_country.json

Example:

es_MX.json

zh_TW.json

  1. Replace the English content with the required translations; let’s use es_MX for Mexican Spanish.

Example:

Original:

“searchTrigger.search”: “Search”

Translation:

“searchTrigger.search”: “Buscar”

  1. Recompile and re-start Venia (development or production are both fine).

After this, the Search button will be fully translated into Spanish.

  1. Custom Translation / Advanced Translation

When attempting to translate new words, extra steps are required in order to translate those new words.

The most simple procedure would be as follows:

  1. Add a new id to both the en_US.json and the custom translation file located in the local root project. The id can follow any pattern.

Example:

en_us.json:

“menu.men”: “Men”

custom.json:

“menu.men”: “Hombres”

2 In the code the following changes need to be made in order to translate the new word.

Example:

import {FormattedMessage} from “react-intl”;

…

…

let trans = (

   <FormattedMessage

       id={‘menu.men’}

       defaultMessage={‘Men’}

   />

);

…

// In this case “trans” is just a variable to hold the translation text result.

3. Recompile and re-start Venia (development or production are both fine.

After this, the custom translation will be used in every component where the custom id is being used.

Finally, the translation process could require more complex steps such as: API calls, coding, etc; but for the steps described above would cover most scenarios on any startup project.

Also, remember to include a custom dictionary as soon as the backend server has enabled it, since some versions of Venia might explicitly expect a dictionary when the backen is using a language different than en_US.