AEM i18n

i18n allows us to show localized text which is nothing but internationalization.

OOTB AEM helps us to shown language based text depending on URL having language or region.

Below is the highlighted hierarchy in red we are going to follow for localization. As part of current development we are going to consider English and French.

Follow below steps to load project specific locale text:

1. Create an i18n folder beneath /apps/<project_name>/ hierarchy.

2. Create .content.xml file inside i18n folder and place below content.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
  xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:rep="internal"
    jcr:mixinTypes="[rep:AccessControllable]"
    jcr:primaryType="sling:Folder"/>

3. Create en.xml file inside same i18n folder to support English language.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
  xmlns:cq="http://www.day.com/jcr/cq/1.0"
  xmlns:jcr="http://www.jcp.org/jcr/1.0"
  xmlns:mix="http://www.jcp.org/jcr/mix/1.0"
  xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:language="en"
    jcr:mixinTypes="[mix:language]"
    jcr:primaryType="nt:folder">
    <hello.world
        jcr:mixinTypes="[sling:Message]"
        jcr:primaryType="nt:folder"
        sling:message="Hello World"/>
</jcr:root>

4. Create fr.xml file inside same i18n folder to support French language.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
  xmlns:cq="http://www.day.com/jcr/cq/1.0"
  xmlns:jcr="http://www.jcp.org/jcr/1.0"
  xmlns:mix="http://www.jcp.org/jcr/mix/1.0"
  xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:language="fr"
    jcr:mixinTypes="[mix:language]"
    jcr:primaryType="nt:folder">
    <hello.world
        jcr:mixinTypes="[sling:Message]"
        jcr:primaryType="nt:folder"
        sling:message="Bonjour le monde"/>
</jcr:root>

5. Open practice component’s practice.html file to place below line for showing localized text for hello.world
${‘hello.world’ @ i18n}

6. Trigger build and deploy packages on publish instance.
mvn clean install -PautoInstallPackage -DskipTests=true

7. Once build is done, it will create below node hierarchy

http://localhost:4502/crx/de/index.jsp#/apps/practice/i18n/fr/hello.world

8. Open below URL and select i18n project to see latest changes as shown below:

http://localhost:4502/libs/cq/i18n/translator.html

9. Create en and fr node to support English and French language. Create test page beneath both the languages. Drag and drop practice component on test page for both en and fr locale.

10. Verify if i18n data is loading for newly added property by hitting below URL’s and search for hello.world using ctrl+f

http://localhost:4502/libs/cq/i18n/dict.en.json

http://localhost:4502/libs/cq/i18n/dict.fr.json

11. Hit below URL to show English and French language.

English: http://localhost:4502/content/practice/us/en/test.html

French: http://localhost:4502/content/practice/us/fr/test.html