How to set i18n translations for Style System

[VeenaVikraman]

Hi All

      I am trying to set translations for my dialog and style system in AEM as Cloud. While I am able to translate the dialog using i18n , the style system values are not getting translated. Any help is appreciated. 

TIA

Veena

[Shashi_Mulugu]

Interesting usecase, any reason for Style system translations? Do you have authors from different regions use aem localized UI?

[VeenaVikraman]

Yes. Component Style System gets added as Styles Tab in the Component Dialog. But , how much ever I tried , except a text "None" nothing is getting picked from the JSON for the style system values. 

[kautuk_sahni · Accepted solution]

Effectively translating style system values for your dialog in AEM as Cloud involves these steps:

1. Ensure Proper JSON Structure: Verify the JSON file's structure aligns with the required format. The JSON should organize keys corresponding to style system properties for translation and values representing the translations in the desired language.

2. Map JSON Properties to Style System Variables: Establish a connection between translated values and style system properties by mapping JSON keys to corresponding style system variables using data-* attributes.

3. Utilize i18n for Translation Retrieval: Employ the i18n API to retrieve translated values from the JSON file. This involves using the I18n class to fetch the corresponding translation based on the current language setting.

4. Apply Translated Values to Style System: Dynamically apply retrieved translated values to style system properties using JavaScript. This ensures UI elements reflect the translated style system values.

[kautuk_sahni]

@VeenaVikraman Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.