Skip to main content
aembee
Level 3
Feb 20, 2025 9:18 PM UTC
Solved

Using different versions of a component in editable template

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!

    konstantyn_diachenko
    konstantyn_diachenkoAccepted solution
    Community Advisor
    Feb 20, 2025 11:38 PM UTC

    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.
    View in thread

    5 replies

    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity AdvisorAccepted solution
    Community Advisor
    Feb 20, 2025 11:38 PM UTC

    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.

    Translate
    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
      Feb 21, 2025 10:23 AM UTC

      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

      Translate
      Arun Patidar
        giuseppebaglio
        giuseppebaglio
        Level 10
        Feb 21, 2025 11:29 AM UTC

        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.

         
        Translate
          rk_pandian
          rk_pandian
          Level 4
          Feb 27, 2025 4:06 PM UTC

          Experience Fragment with localization.

          Translate
          kautuk_sahni
          kautuk_sahni
          Level 9
          Mar 3, 2025 1:19 PM UTC

          @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!

          Translate
          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...