{"id":29567,"date":"2015-11-09T11:12:28","date_gmt":"2015-11-09T05:42:28","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=29567"},"modified":"2015-11-09T11:12:28","modified_gmt":"2015-11-09T05:42:28","slug":"i18n-implementation-using-sightly","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/i18n-implementation-using-sightly\/","title":{"rendered":"i18n  implementation using Sightly"},"content":{"rendered":"<p>Internationalization (i18n)\u00a0is the process of generalizing a product so that it can handle multiple languages and cultural conventions without the need for re-design\u00a0.<\/p>\n<p><strong>a. Structure format required for i18n implementation :<\/strong><\/p>\n<p style=\"text-align: left\"><em>1) Create a i18n node of type sling:Folder as below<\/em><\/p>\n<p style=\"text-align: justify\"><strong><em><span style=\"text-decoration: underline\"><span style=\"color: #993300\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-29686\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/11\/i18n-properties.jpg\" alt=\"i18n properties\" width=\"980\" height=\"167\" \/><\/span><\/span><\/em><\/strong><\/p>\n<p><em>2) Create a node of type sling:Folder under i18n of mixin type mix:language and add a property called jcr:language and assign value of lang code \u00a0as below<\/em><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-29687\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/11\/i18n-folder-properties.jpg\" alt=\"i18n-folder properties\" width=\"980\" height=\"169\" \/><\/p>\n<p><em>3) Create a message node of type\u00a0sling:MessageEntry and a property called sling:key which will 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<\/em><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-29688\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/11\/i18n-message-properties.jpg\" alt=\"i18n-message properties\" width=\"972\" height=\"164\" \/><\/p>\n<p>As soon as you create this structure you can look in CQ5-Translator and you\u00a0should have similar translations created :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-29768\" src=\"\/blog\/wp-ttn-blog\/uploads\/2015\/11\/i18n-translator.jpg\" alt=\"i18n-translator\" width=\"1001\" height=\"163\" \/><\/p>\n<p><strong>b. Normal way to implement i18n in Sightly :\u00a0<\/strong><\/p>\n<p><em>We can implement i18n directly by using the below syntax :<\/em><\/p>\n<pre>${'key' @ i18n}\r\n${'key' @ i18n, source='user', hint='Translation Hint'}\r\n${'key' @ i18n, locale='en', hint='Translation Hint'}<\/pre>\n<p>The default <strong>source<\/strong> for the language is &#8216;resource&#8217;, meaning that the text gets translated to the same language as the content. If you specify it to\u00a0&#8216;user&#8217; than the language is taken from the browser locale or from the locale of the logged-in user.But when we provide an explicit <strong>locale<\/strong> than we overrides the source settings and would take the specified locale.<\/p>\n<p>In Sightly if we don&#8217;t define the attribute locale than it would automatically convert the text\u00a0according to\u00a0current page locale .<\/p>\n<p>The <strong>hint<\/strong>\u00a0is used to provide\u00a0information about the context for the translators.<\/p>\n<p><strong>Issue and it&#8217;s alternative approach :<\/strong><\/p>\n<p>When I tried using the above approach for i18n implementation in sightly, it\u00a0didn&#8217;t worked in a usual manner for different locale as it should work on.<\/p>\n<p><strong>Solution :\u00a0<\/strong>So if such a scenario happened with you, you can also achieve it by creating a <strong>local template<\/strong>\u00a0to which you can pass the variable identifying your key and\u00a0than calling it by using \u00a0data-sly-call :<\/p>\n<p>Implementation for the same is as below :<\/p>\n<pre><em>&lt;template data-sly-template.i18=\"${@ key}\"&gt;\r\n ${key @ i18n}\r\n&lt;\/template&gt;\r\n\r\n&lt;div data-sly-call=\"${i18 @ key='key-name'}\"&gt;&lt;\/div&gt;\r\n<\/em><\/pre>\n<p>This approach holds\u00a0good and worked for me in all use cases .<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Internationalization (i18n)\u00a0is the process of generalizing a product so that it can handle multiple languages and cultural conventions without the need for re-design\u00a0. a. Structure format required for i18n implementation : 1) Create a i18n node of type sling:Folder as below 2) Create a node of type sling:Folder under i18n of mixin type mix:language and [&hellip;]<\/p>\n","protected":false},"author":723,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":193},"categories":[1],"tags":[1235,492,2727],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/29567"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/723"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=29567"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/29567\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=29567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=29567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=29567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}