Approach to implement same components but with different styles specific to locale

Avatar

Avatar

Veenu

Avatar

Veenu

Veenu

31-08-2020

Hello Everyone,

 

I have a use case to implement same components but with different styles(UI) for 21 different locales. What should be the best approach for this. I don't want to extend components or add conditions for locale in the generic components.

@Arun_Patidar  @Veena_Vikram @Theo_Pendle @ArpitVarshney 

View Entire Topic

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

01-09-2020

you can inject a locale class in your component's wrapper div and write style for that

 

e.g. Model

Resource resource = resourceResolver.getResource(path);
if (resource != null) {
    Page targetPage = resource.adaptTo(Page.class);
    if (targetPage != null) {
        Locale pageLocale = targetPage.getLanguage(true);
        String countryLocale = "cmp_mycmp__local_"+pageLocale.getCountry();
    }
}

 

HTL

 

<div  data-sly-use.obj="com.proj.core.models.CompModel" class="Some_class more_classes ${obj.countryLocaleClass ? obj.countryLocaleClass : ''}">