Using different versions of a component in editable template | Community
Skip to main content
A
aembee
Level 3
February 20, 2025
Solved

Using different versions of a component in editable template

  • February 20, 2025
  • 3 replies
  • 865 views

Hi All, I need some suggestions. In my website, different pages use different editable templates but they all have a common global navigation added in the templates. This global navigation component is shared by different markets as well. Now I need to update the global nav for a specific market for redesigning purpose. What is the best way to do this without impacting other markets? If I create a new version of the global nav component, is there a way to add the specific version of component in the template depending on the market? 
Thanks in advance!

    Best answer by konstantyn_diachenko

    Hi @aembee ,

     

    I can suggest few options:
    1) Conditional logic

    1. Extract current representation to global-nav-v1.html
    2. Create global-nav-v2.html
    3. Modify your current template like:

     

    <sly data-sly-use.navHelper="${com.pack.NavHelper}"></sly> <sly data-sly-test="${navHelper.isDefaultNavigation}"> <sly data-sly-include="global-nav-v1.html"/> </sly> <sly data-sly-test="${!navHelper.isDefaultNavigation}"> <sly data-sly-include="global-nav-v2.html"/> </sly>

     

     You can either use CA Configuration for feature toggling or org.apache.sling.featureflags.Feature. 

    Benefit: This is simple but requires maintaining two versions.

    2) Use Experience Fragments (XF) for Market-Specific Navigation

    1. Create Market-Specific Experience Fragments
      1. Create an XF variation per market.
      2. Configure navigation within each XF.
    2. Modify Templates to Use XF
      1. Replace the current navigation with an XF Component that loads the correct XF dynamically.

    Benefit: Editors can manage navigation per market without code changes.

     

    Best regards,

    Kostiantyn Diachenko.

    3 replies

    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity AdvisorAccepted solution
    Community Advisor
    February 20, 2025

    Hi @aembee ,

     

    I can suggest few options:
    1) Conditional logic

    1. Extract current representation to global-nav-v1.html
    2. Create global-nav-v2.html
    3. Modify your current template like:

     

    <sly data-sly-use.navHelper="${com.pack.NavHelper}"></sly> <sly data-sly-test="${navHelper.isDefaultNavigation}"> <sly data-sly-include="global-nav-v1.html"/> </sly> <sly data-sly-test="${!navHelper.isDefaultNavigation}"> <sly data-sly-include="global-nav-v2.html"/> </sly>

     

     You can either use CA Configuration for feature toggling or org.apache.sling.featureflags.Feature. 

    Benefit: This is simple but requires maintaining two versions.

    2) Use Experience Fragments (XF) for Market-Specific Navigation

    1. Create Market-Specific Experience Fragments
      1. Create an XF variation per market.
      2. Configure navigation within each XF.
    2. Modify Templates to Use XF
      1. Replace the current navigation with an XF Component that loads the correct XF dynamically.

    Benefit: Editors can manage navigation per market without code changes.

     

    Best regards,

    Kostiantyn Diachenko.

    Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      February 21, 2025

      Use Core XF component which support localization.

      https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/experience-fragment#localized-site-structure

       

      Another approach to use context-aware-config

      Arun Patidar
        giuseppebaglio
        giuseppebaglio
        Level 10
        February 21, 2025

        Another option could be developing the global navigation component with a Component Policy Configuration Property that allows selecting the desired template layout for different markets.

         

        This approach is similar to how AEM Core Components' Image provides configurable properties like jpegQuality and resizeWidth. By leveraging this technique:

        1. Add a property in the component policy configuration where authors can specify the market-specific version of the navigation.

        2. Based on the policy configuration, the component should dynamically load the appropriate navigation structure or style for the selected market.

        3. Since each template already includes the global navigation, you can configure different policies per template to reflect the correct version for that specific market.

        This method ensures that content authors can manage navigation updates seamlessly through template-level configurations rather than requiring separate component versions for each market.

        This method ensures that content authors can manage navigation updates seamlessly through template-level configurations rather than requiring separate component versions for each market.

         
          rk_pandian
          rk_pandian
          Level 4
          February 27, 2025

          Experience Fragment with localization.

          kautuk_sahni
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          March 3, 2025

          @aembee Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...