Include Translations in Themes

SuiteCommerce and SuiteCommerce Advanced enable you to provide translations for the templates and text that your extension or theme adds or changes in a site. You can also include translations for any customer-facing text in the Shopping, MyAccount, or Checkout application that is associated with your customization.

Note:

Currently, translations included in extensions and themes are not supported in local environments. Due to this limitation, translations that you add to extensions and themes cannot be tested locally.

Before You Begin

Be aware of the following important information:

Be sure your site is properly configured to support translations. For more information, see Set Up NetSuite for Localized Content.
You should have a Workspace directory for your theme or extension. The developer tools create a Workspace directory and a manifest.json file for your theme or extension. For more information, see Fetch Active Theme Files and Create a Baseline Extension.
You should understand how to edit the manifest.json file for your theme or extension. For more information, see Edit the Theme Manifest and Edit the Extension Manifest.

To include translations in your theme:

Manually create a directory named Translations in your theme or extension’s Workspace directory as shown in the following example.

Note:
You can include translations in themes or extensions and so the steps in this procedure provide information for both.

In the Translations directory, include a .json file for each language you want to translate.

You can name the .json file for each language however you like. Note that you must use the same file name when you add the translation file to the manifest.json as described in the follow steps.

                Workspace/
  MyCoolExtension/
    Modules/
      MyCoolModule/
        Configuration/
        JavaScript/
        Sass/
        SuiteScript/
        SuiteScript2/
        Templates/
        Translations/
          en_US.json
          es_ES.json
          fr_FR.json

In each .json file, list a text string for each key you want to translate.

For example: "Home":"Accueil",
In the extension or theme manifest.json, add a new section for translations as shown in the following example.
- In the translations section of the extension or theme manifest, list each application for which you are including translation files: shopping, myaccount, checkout.
- Specify the locale of each .json language file.
- List each .json language file from your Translations directory that should apply to each application.
The following example shows the translations section of an extension manifest:
```
                "translations": {
     "applications": {
         "shopping": {
             "en_US": "Modules/MyCoolModule/Translations/en_US.json"
         },
         "myaccount": {
             "en_US": "Modules/MyCoolModule/Translations/en_US.json",
             "fr_FR": "Modules/MyCoolModule/Translations/fr_FR.json"
         },
         "checkout": {
             "es_ES": "Modules/MyCoolModule/Translations/es_ES.json"
         }
     }
} 

              
```
Note:
When you have multiple languages specified for a single application in an extension or theme’s manifest.json file, the language displayed to users is the one set up for the domain in the multi-language configuration. Each configured domain will use a specific translation file. For more information, see Configure Hosts for Sites with Multiple Languages.
Deploy and activate your extension or theme as described in Deploy an Extension to NetSuite and Deploy a Theme to NetSuite.

When you activate a theme or extension that includes .json files like fr_FR.json and es_ES.json in the preceding example manifest, those language .json files are compiled and uploaded into the NetSuite file cabinet. After activating an extension that includes translations, you can check the Live Hosting Files in the NetSuite file cabinet for the compiled .js language files. The compiled .js language files are stored in the languages directory for extensions.

Note:
The first time you activate a theme or extension that includes translations, you must invalidate the cache for each multi-language domain that the theme or extension affects. Invalidating the cache for each affected domain is required only the first time you activate the theme or extension. Invalidate the cache immediately after activating the theme or extension. For more information about invalidating the cache for each domain, see Cache Invalidation.

Precedence of Translations

The precedence of translations configured for a particular key within a Commerce website are as follows, from highest to lowest:

The translation set for the key in the Configuration Properties for your site. For more information about these property settings, see Translations Subtab.
The translation for the key that you include with your extension or theme as outlined in this topic.
The translation for the key within the application itself, like the shopping application.
If the application does not provide a translation, the key itself is used.

Before You Begin

To include translations in your theme:

Precedence of Translations

Related Topics