Approach to implement same components but with different styles specific to locale | Community
Skip to main content
V
Veenu
August 31, 2020
Solved

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

  • August 31, 2020
  • 6 replies
  • 1839 views

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.

@arunpatidar  @veenavikraman @theo_pendle @arpitvarshney 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Singaiah_Chintalapudi

There are few different ways. In general, below approaches are popular.

 

1. Use Style System: Use this approach, If you want to provide a authoring capability for authors to select the style system: https://docs.adobe.com/content/help/en/experience-manager-65/developing/components/style-system.html

 

2. Use HTML Attributes/CSS Selectors: Sometimes, we want to roll some styles globally on specific languages. This is most common use can you can use HTML attributes to define the styles specific to a language/locale.

 

Ex: 

html:lang(ja) {
 font-family: "Arial",Helvetica;
}

 
 
All the languages pages would have either the lang attribute or some other attributes to tell the search engines that the page belongs to a specific language. So, you can use that along with the CSS selectors to define the styles.
 
Thanks,
Singaiah 

6 replies

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity Advisor
Community Advisor
August 31, 2020

@veenu please use component style system to acheive it, so that it will be pure authoring thing.

 

 

https://docs.adobe.com/content/help/en/experience-manager-learn/sites/developing/style-system-technical-video-understand.html&ved=2ahUKEwiX3Y248sXrAhVBWX0KHaOUDRMQFjAAegQICxAB&usg=AOvVaw3CVUanA4Hk6d-VbdHjP-Vq

    Nikhil-Kumar
    Community Advisor
    Nikhil-KumarCommunity Advisor
    Community Advisor
    August 31, 2020

    @veenu  Use the Style System , where you can create your custom policies and apply it to a component.
    It's pretty cool!!

    Thanks,
    Nikhil

      Singaiah_Chintalapudi
      Singaiah_ChintalapudiAccepted solution
      August 31, 2020

      There are few different ways. In general, below approaches are popular.

       

      1. Use Style System: Use this approach, If you want to provide a authoring capability for authors to select the style system: https://docs.adobe.com/content/help/en/experience-manager-65/developing/components/style-system.html

       

      2. Use HTML Attributes/CSS Selectors: Sometimes, we want to roll some styles globally on specific languages. This is most common use can you can use HTML attributes to define the styles specific to a language/locale.

       

      Ex: 

      html:lang(ja) {
       font-family: "Arial",Helvetica;
      }

       
       
      All the languages pages would have either the lang attribute or some other attributes to tell the search engines that the page belongs to a specific language. So, you can use that along with the CSS selectors to define the styles.
       
      Thanks,
      Singaiah 
        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        August 31, 2020

        My 2 cents is that the style system can be used, but it may negatively impact authors the need to be very accurate with content configuration. Instead, I would change colors or icons in the code, and use the CSS selector: :lang() to tackle this situation (supported on most browsers); https://caniuse.com/#search=%3Alang

        HTML:

         

        <html lang="en"> ... </html> <html lang="fr"> ... </html>

         

        CSS / SCSS: 

         

        // CSS .button:lang(en) { background: yellow; } .button:lang(fr) { background: red; } // SCSS .button { &:lang(en) { background: yellow; } &:lang(fr) { background: red; } }

         

         

          chaudharynick
          chaudharynick
          August 31, 2020

          Hi,

           

          What can you use is locale-dependent clientlibs for components/templates. For example - you have a text component and locales en-us and en-ca. Create a clientlib with name project.text.en-us and project.text.ca-us (PROJECT.COMPONENT_NAME.LOCALE) and fetch the component name and locale in HTL and create this clientlib name and call the clientlib in this way you don't have to add any manual efforts for the author and this will be generic for multiple locales and u can add more in future.

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            September 1, 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 : ''}">

             

             

            Arun Patidar
              Terms & ConditionsAccessibility statement

              Loading footer...