Translations
Translations have undergone major changes in version 5.0.0 of MediaStore SDK Components. Use version 5.0.0 or higher to fully benefit from this feature.
Introduction
MediaStore SDK Components Library offers flexibility to customize language settings, making it easy to tailor your applicationās user interface. You can seamlessly add new language versions or modify the default wording to suit your needs. MediaStore SDK Components are available by default in English.
If you want to modify the existing translations or add translations for another language, follow the steps described below.
General Guide
-
Create a
cleeng-translations
folder inside/public
folder in your application (for example mediastore-sdk-demo). -
In the previously created folder (
/cleeng-translations
) you can create separate folders for languages that you need, e.g./es
for Spanish,/de
for German,/customEn
for custom English texts, etc. The name of this folder should be a single word (spaces, dashes, etc. should NOT be used). -
Create a new file in a language folder and name it
translations.json
. Copy the content from the English version and translate the values in that file to the needed language or modify the original English wording. -
To change language without reloading the page, you can use the
Config.setLanguage()
method. It will automatically changei18NextLng
value in the local storage. Use the name of the folder with translations as a parameter. See the example below:
Config.setLanguage(āesā);
Examples
As an example, we will use the sample mediastore-sdk-demo
application with the correct folder structure for translations:
How to modify default English texts
In the cleeng-translations
folder, we need to create a new folder whose name will correspond to our new translations, so in this case we will name it customEn
.
Inside the customEn
folder, add the translations.json
file which is a copy of the default translations from here.
Letās change these two texts inside the PlanDetails component:
We need to search for these texts in our copied translations.json
file to find corresponding translation keys. In this case the keys and their values are:
ācurrentplan.no-offers-titleā: āNo offers yet!ā
ācurrentplan.no-offers-textā: āIf you choose your plan, you will be able to manage your offers here.ā
After changing values of these keys, you still need to load the new translation file into the MediaStore SDK components by using a simple Config
method with the folder name as a parameter. In this case it looks like this:
Config.setLanguage(ācustomEnā);
For example, this method can be executed when clicking a button suggesting a change of language or at the start of your application.
And this is what the effect looks like after changing the values of these keys and executing the Config
method:
So here is the sum-up of what changed:
Key | Value Before | Value After |
---|---|---|
ācurrentplan.no-offers-titleā: | āNo offers yet!ā | āStill waiting for offers!ā |
ācurrentplan.no-offers-textā: | āIf you choose your plan, you will be able to manage your offers here.ā | "By selecting your plan, you'll gain the ability to manage your offers here." |
How to add new language translations
The steps for adding translation for a completely new language are identical to those for changing existing English texts, you just need to adjust the folder name accordingly, e.g. for Spanish instead of /customEn
you can simply use /es
.
Then change values of translation keys to Spanish, and use Config.setLanguage(āesā);
Important Notes
Variables that cannot be changed or removed
Some translations , like the one below, contain variables that cannot be removed or changed/translated because it will break that particular translation.
ācurrentplan.subscription.renews-infoā: āRenews automatically on {{renewalDate}}ā
The translation above contains a renewalDate
variable. This variable should stay in the same form as it was originally, only its order in the sentence can change. So, for example, you can move its placement from the end of the text to the beginning.
Letās change the above translation to:
ācurrentplan.subscription.renews-infoā: ā{{renewalDate}}: Date of auto-renewalā
The pictures below show the state before and after the change.
Before the change:
After the change:
Translations with HTML elements
There are also translations with angle brackets inside like this one:
āthank-you-page.manage-textā: āYou can manage your account from <1>here</1>.ā
These angle brackets mean that the text within them will be contained in an HTML element. For example, the text will be a link, or it will be bolded by <strong>
so these angle brackets cannot be removed, and changing their place in the text can mess up the translation.
For example, if we want to translate the above text into Spanish it should be done like this:
āthank-you-page.manage-textā: āPuedes gestionar tu cuenta desde <1>aquĆ</1>.ā
Updated 11 days ago