How to change marketplace language
If you want the template to use a language that is not supported by default, the easiest way to do this is through Console. See our Help Center article on how to do this.
However, if you would still like to do this programmatically, there are some steps you need to follow. This article will walk you through those.
Remove marketplace texts in Console
In Console, navigate to Console > Build > Content > Marketplace texts.
From here, you’ll need to remove everything between the brackets in the
editor, so that it just contains {}. Remember to save your progress!
Creating a new marketplace text file
-
Copy the default
src/translations/en.jsonEnglish marketplace text file into some other file, for exampleit.jsonfor Italian. -
Change the messages in the new marketplace text file to the translations of the desired language.
We have a few other language files available in src/translations/Â directory for you to start customizing marketplace texts.
Even if you use hosted marketplace texts to manage your marketplace texts, it is still important to have a built-in language-specific marketplace text file in the template as well, so that the application can show meaningful messages for any keys missing from the Sharetribe Console marketplace text asset.
Changing the marketplace texts used in the template
Once you have the marketplace text file in place:
-
Comment out, or remove, the
messagesInLocaledefinition in the Template file src/app.js . -
Point
messagesInLocaleto correct.jsonfile, for example:
import messagesInLocale from './translations/fr.json';`-
If you are using a non-english locale with moment library, you can either:
- Add you preferred locale to MomentLocaleLoaderÂ
- Stop using the MomentLocaleLoader and instead import the locale directly in `app.js, e.g.
import 'moment/locale/fr'; const hardCodedLocale = process.env.NODE_ENV === 'test' ? 'en' : 'fr';
If you are using a template that supports code-splitted locale imports (i.e. after this commit), you can technically skip this second step.
However, for performance reasons, we recommend adding the rows below in src/app.js before const MomentLocaleLoader:
import 'moment/locale/it';
const hardCodedLocale = process.env.NODE_ENV === 'test' ? 'en' : 'it';- Point
messagesInLocaleto correct .json file, for example:
import messagesInLocale from './translations/it.json';It is also recommended to change en.json translations. That way, accidentally deleted keys in dynamic hosted marketplace texts (in Console) won’t cause the default English translations to be rendered in your custom client app.
Changing the marketplace texts used in tests
Also, in case you will translate the application and develop it forward
it is wise to change the marketplace text file that the tests use.
Normally tests are language agnostic as they use marketplace text keys
as values. However, when adding new marketplace texts you can end up
with missing marketplace text keys in tests. To change the marketplace
text file used in tests change the messages variable in
src/util/test-helpers.jsÂ
to match your language in use, for example:
import messages from '../translations/it.json';Developing the Sharetribe Web Template into a multilanguage marketplace
If you intend to modify the template to handle multiple languages, it is good to note that the template is by default configured to run in single language mode, so a multilanguage marketplace requires custom development. For multiple languages, you basically have two approaches for that custom development.
The first option is to create two versions of the client app, one for Language 1 and one for Language 2. They can both point to the same Marketplace API i.e. share the same listings, users, transaction processes etc. If you have a very location-specific marketplace with different locations mainly in different languages, this might be a good approach, because you can then target your UI, branding and localization more closely to the target area.
Another option is to customize a single client app to provide multiple
languages. For instance, you could import several language files in
src/app.js and select which one you are going to use by modifying
src/routeConfiguration.js, so that all the paths include a ”locale”
variable. E.g. /about could be changed to /:locale/about to capture
paths like /fr/about. In this case, it is useful to save the user’s
language preference to the extended data.
Read more about having a multilanguage marketplace on top of Sharetribe.