JSON translations
Often the dynamic content of a website is loaded via JSON, if this is done within the same domain then Clonable offers a solution for translating this content.
The Json translations can be found at clone -> translations settings -> Json translations. Should you not find Json translations, but Json exclusions here, you can skip this article.
Standard JSON translations
There are JSON keys that we can always add, these keys almost always have a positive effect on the website.
A list of these keys is: html, text, content, title, translation, body, these default keys are always indicated with the list name: 'default entry'.
Platform-specific standards are always indicated as required for {platform}.
Translating JSON
The following headings dive deeper into how websites work, therefore we recommend that you have some knowledge of how websites work.
Here's how to recognise and translate JSON.
How do you recognise JSON?
JSON can appear in 2 forms on the website:
- Static in the source code
- Dynamically via API communication
- Examples include GRAPHQL or REST APIs.
Static content
The key combinations and terms used in the explanation below may vary based on your system, browser and language but are generally fairly similar.
Static content can be found simply by using the key combination ctrl + u (view source code) on a page. This opens the page the same way Clonable would open it. If the JSON content is in a script tag with type application/json, you can translate it with Clonable. This looks like this, for example:
<script type="application/json">
{ 'title': 'This is a test page', 'color': 'blue', 'include_in_page': false }
</script>
Dynamic content
Dynamic content is often a little trickier to find, but the best approach for this is to use your browser's network tab. You can open this by pressing F12, or right-clicking and selecting the inspect option. This will open a window where you have several tabs at the top, here you need to select the 'Network' tab.
In this window you should be able to see a list of network requests. To retrieve everything again you can refresh the page once. These network requests have a column named 'Type'. For JSON translations we are looking for network requests with type 'json'. If you click on this network request, another screen will open where you can select the 'Response' tab. This should contain the JSON information.
Dynamic JSON must come from the same domain as the clone. Should a different domain or subdomain have been used, this JSON data is not translatable.
How do I translate JSON?
Once you have successfully found the JSON, you can start translating it. Clonable requires you to pass the keys of the JSON to be translated. JSON works with so-called key-value pairs. Example: 'title': 'Test page', in this example the key is 'title'. So within Clonable, you would add title to the JSON translations.
Dynamic keys
In some cases you need to translate dynamic or nested keys, for this we recommend using wildcard and absolute JSON paths. When keys are dynamic but still contain translatable content, you should use a wildcard. Take the following example:
{
'page': {
'content': {
'value': 'Clonable json translations',
'paragraph': {
'value': 'You can use Clonable to translate your JSON.'
}
}
}
}
Here you could use a wildcard JSON translation, which would look like this: page.*.value, indicating that we have a wildcard with exactly one level. Here, only the text: 'Clonable json translations' would then be translated by Clonable.
If you want to translate several levels at once, you can use a double wildcard. For the input: page.**.value, all content with the key 'value' would be translated.
Absolute keys
Sometimes you only want to translate a key in one single place. For this you can use absolute paths. Take the following example:
{
'pages': {
'home': {
'model': 'New model now available',
},
'pricing: {
'model' : 'pricing_model_1',
}
}
}
Here you can see that for pricing, the model may not need to be translated as it looks like a configuration value, but the model of the home key seems perfectly translatable. For this, add the following value: pages.home.model. This ensures that only the value of model of home is translated.
Dangerous keys
It is also possible to break functionality of a clone when you add JSON translations. This happens for example if you translate a value in JSON configuration to a value that a server does not expect, this can cause 422, or 500 or similar network errors.
Keys we recommend not adding are: value, id, model, class, value. You do need these keys in some cases, for this we recommend using on absolute JSON paths.
Platform-specific
Some platforms do not offer JSON via a particular API, but embed the JSON from the website's source code. For some of these platforms, Clonable offers a standard solution.
Magento
Magento 2 also occasionally places JSON configuration in the source code of the page. This is done with script tags of a specific type and looks as follows:
<script type="text/x-magento-init">
{ 'my_config': { 'attribute_1': 'Purple', 'title': 'Configuratie' } }
</script>
The keys found in this kind of configuration script can also be added to JSON translations and should then also be translated.
Next.js
JSON translations do not always work as a solution on Next.js websites, components such as server-side React components cannot be translated with this.
Next.js also works with JSON in many cases, so you often see certain translations bounce back after translating the page. Clonable has specifically come up with a solution for this.
When there is untranslated text in the source code of the page, there is a chance that this text is of type NEXT_DATA. This looks like the following:
<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps": "page" ... }}</script>
In this case, you can search for menu or simular items that are not translated and add their key to the JSON translations of the clone.