Using different versions of a component in editable template

[aembee]

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]

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.

[arunpatidar]

Use Core XF component which support localization.

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/e...

Another approach to use context-aware-config

[giuseppebag]

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]

Experience Fragment with localization.