April 9, 2020
Estimated Post Reading Time ~

i18n implementation using Sightly

internationalization (i18n) is the process of generalizing a product so that it can handle multiple languages and cultural conventions without the need for re-design.

a. Structure format required for i18n implementation :
1) Create an i18n node of type sling:Folder as below

2) Create a node of type sling:Folder under i18n of mixin type mix:language and add a property called jcr:language and assign the value of lang code as below

3) Create a message node of type sling:MessageEntry and a property called sling:key which will be used to pull the value of the variable and also add a property called sling:message which will specify the value of the key as below

As soon as you create this structure you can look in CQ5-Translator and you should have similar translations created :


b. The normal way to implement i18n in Sightly :
We can implement i18n directly by using the below syntax : 
${'key' @ i18n} ${'key' @ i18n, source='user', hint='Translation Hint'} ${'key' @ i18n, locale='en', hint='Translation Hint'}

The default source for the language is ‘resource’, meaning that the text gets translated to the same language as the content. If you specify it to ‘user’ than the language is taken from the browser locale or from the locale of the logged-in user. But when we provide an explicit locale than we override the source settings and would take the specified locale.

In Sightly if we don’t define the attribute locale than it would automatically convert 
the text according to current page locale.
The hint is used to provide information about the context for the translators.

Issue and its alternative approach :
When I tried using the above approach for i18n implementation in sightly, it didn’t work in a usual manner for different locales as it should work on.
Solution: So if such a scenario happened with you, you can also achieve it by creating a local template to which you can pass the variable identifying your key and then calling it by using data-sly-call :

Implementation for the same is as below : 
<template data-sly-template.i18="${@ key}"> ${key @ i18n} </template> <div data-sly-call="${i18 @ key='key-name'}"></div>

This approach holds good and worked for me in all use cases.


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.