Tooling

The @jetshop/intl package also exposes some tooling to make translating your shop easier.

Extracting translations

Before starting to translate the shop, you need to extract the translation strings from the source code. @jetshop/intl provides the command extract that searches through your codebase and extracts all translation strings and puts them in translations/default.json in your shop. By default this script is added to package.json in your shop, so you can run this in a terminal:

yarn intl extract

Once the translation strings are extracted they get a unique ID, which is used to know where the translation string should be used. Based on the default.json file you can then create a file for every locale you want to support, e.g. sv.json (Swedish) and en.json (English). Usually the translation strings in the source code are written in English, so en.json should just be a copy of default.json.

If you add a new locale, make sure to also update the translations/index.js file which is an entry point for all translations.

When the app is rendered (on server and client) the framework will use the translation provided in your localized json file, and fall back to the default translation if it's not found.

yarn intl extract-ts

This command requires a tsconfig.json file in your project with the outDir and noEmit: false properties supplied. The command runs tsc internally, creates a directory with the emitted files, runs extract as above, and then removes the directory with the emitted files.

Linting translations

In order to make sure your translations are complete, there's also a linting command. This checks all translation files in your translations/ folder to make sure there's no missing translations anywhere. Run this command in your terminal:

yarn intl lint