Using i18n dictionary with React SPA in AEM 6.5

[ndoz]

I am building a React SPA in AEM 6.5.8 and can't figure out how to get i18n translations into the React components. We are able to receive the AEM dialog content as props by using the method described here:

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

Is there a way to receive translations from the dictionary as props to a React component in AEM? Or is there another best practice way to do it? I can't find any information on the Adobe site.

[Dipti_Chauhan · Accepted solution]

Hi @ndoz 

 Did you try using i18n client side library  Granite.i18n.get(key) ?

e.g

// Set locate first 

window.Granite.I18n.setLocale("SET LOCATE HERE");
// get I18n Key 

getI18keyText: (key) => {
if (key && window.Granite && window.Granite.I18n) {
return window.Granite.I18n.get(key);
}
return key;
},

Thanks

Dipti

[ndoz]

Thanks @Dipti_Chauhan - I was able to get this to work.

For anyone else having this same issue I had to follow these steps.......

1. Update the spa-page-template to include the granite.ui.foundation clientlib. This is located under page properties -> properties -> client libraries

2. for development, update the index.html file that contains your React application to manually include the Granite clientlibs. Under ui.frontend/public/index.html add the following........

 <script src="/etc.clientlibs/clientlibs/granite/uritemplate.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/jquery.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/utils.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/jquery/granite.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/coralui2keys.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/typekit.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/moment.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/coralui3.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/coralui2.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/coral/foundation/components/clientlibs/components.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/history.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/coral/foundation/clientlibs/foundation.js"></script>
        <script src="/etc.clientlibs/clientlibs/granite/jquery/animation.js"></script>
        <script src="/etc.clientlibs/granite/ui/clientlibs/quickactions.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/endor/clientlibs.js"></script>
        <script src="/etc.clientlibs/granite/ui/components/foundation/clientlibs/foundation.js"></script>

With those two updates, Dipti's code works both inside and outside AEM and in both Author and Publisher.

[Vijayalakshmi_S]

Hi @ndoz,

Here is an option from Sling Model, making use of ACS commons I18n Sling Models Injector - https://adobe-consulting-services.github.io/acs-aem-commons/features/sling-model-injectors/i18n/inde...

[wordy22smith]

Having implemented many websites in AEM at different organisations I would say the limitation on AEM is mostly on the organisation implementing it, due to not having the capacity (read: people and skills) to fully utilize its powerful features.

AEM is part of Adobe’s Marketing Cloud and is pitched as such. It involves a lot of highly specialized marketing tools, some of which require a lot of expertise to work with.

The CMS functionality is pretty straightforward, but to start using targeting, analytics, running campaigns, multisite with translations is a whole different ball game. Marketing departments are usually not ready to “go digital” in this area, lacking training and experience in various degrees. React