The ScandiPWA translation feature allows you to create translatable strings, which change their display for the user based on the language configuration. Instead of adding strings directly to be rendered, it’s possible to make it translatable by wrapping it with __().
This is possible due to the use of the Webpack i18n Runtime build-package. This package allows to define the desired locales for the application in the package.json file. After updating the locales configuration, ScandiPWA automatically creates a file for each language defined, enabling you to provide specific language translations.
<aside>
🔧 You can test your translation by setting the locale in Magento admin: Admin Panel > Stores > Configuration > General > Locale options.
</aside>
<aside> ⚠️ Note that this feature only works by default in Magento theme mode. If you are working in storefront mode, refer to How to enable translations in Storefront mode.
</aside>
The function __() is responsible for defining a translatable string. It accepts the following arguments:
translatable ⇒ The string you want to make translatable.…args ⇒ Dynamic values provided in the translatable parameter.<aside> ℹ️ The function is globally provided, you do not need to import it manually.
</aside>
/** This is NOT translatable! */
render() {
return <p>My Account</p>
}
/** This is NOT translatable as well! */
render() {
**return <p>{ 'My Account' }</p>
}
/** This IS translatable! */
render() {
return <p>{ __('My Account') }</p>
}
Examples:
CartPageComponentIf you need to create a translatable string that includes dynamic data, add a %s in the string where the dynamic data must be placed. This works for both int, float, and string.
/** This IS a translatable with dynamic string */
render() {
const { name } = this.props; // John
return <p>{ __('Hello, %s', name) }</p>;
}
/** This IS a translatable with dynamic int */
render() {
const { orderId } = this.props; // 2999304
return <p>{ __('Your order number is %s', orderId) }</p>;
}
/** This IS a translatable with dynamic float */
render() {
const { price } = this.props; // 34.05
return <p>{ __('Subtotal: %s', price) }</p>;
}
You can define as much dynamic data as you need in the translatable string, simply by adding additional %s and then defining the variables in the function:
const { name, age, height } = this.props; // name='Jhon', age=25, and height=1.80
__('Name: %s, Age: %s, Height: %s', name, age, height)
This example defines three placeholders for dynamic data to be inserted, and the other arguments of the function will replace them in the same order. The above example will display:
'Name: Jhon, Age: 25, Height: 1.80'
If the ScandiPWA app makes use of translatable string, it will only translate if properly configured.
You can define the locales available in ScandiPWA by updating the scandipwa > locales configurations in the package.json file:
{
"scandipwa": {
"locales": {
"en_US": true,
"pt_BR": true
}
}
}
<aside> ℹ️ The ScandiPWA theme already includes translations for certain locales.
</aside>
When you add a new locale, ScandiPWA will create a json file in the i18n directory with its name when compiled. For example, adding pt_BR to the package.json locales will produce a pt_BR.json in the i18n directory.
This file is used to define the translations for this specific language.
If the locale is properly configured, ScandiPWA has created a language file for each locale defined. These files contain translatable strings from the project that were not translated by default. For example, the pt_BR.json file:
{
"Share Wishlist": null,
"New version available!": null,
"Cart": null,
// ...
}
The file currently has no translation defined for these 3 sentences. To add them, replace null with the correct translations and save. For example:
{
"Share Wishlist": "Compartilhar lista de desejos",
"New version available!": "Nova versão disponível",
"Cart": "Carrinho",
// ...
}
<aside> ℹ️ Whenever you add a new translatable string to the project, the language file will be updated automatically to include it.
</aside>
When adding a translation to sentences with dynamic data, you should translate the phrase and use %s in the same way:
{
"Remove items (%s)": "Remover items (%s)",
// ...
}
To allow ScandiPWA translations in Storefront mode you must define de defaultLocale property of the window object to the desired language in the public/index.html file. For example:
window.defaultLocale = 'ar_KW';
Overriding index.html and index.php
Note that this will translate the page even if the store locale is set to a different language in Magento. For example, if the locale is set to en_US in Magento, but the storefront is set to ar_KW, it will translate to ar_KW ignoring the Magento locale.