How to Render the different version of Header for Specific Pages Using Experience Fragments in AEM?

[ShikhaSh1]

Currently We have created with a single template in AEM eg template A. The header for these pages is authored using an Experience Fragment, which is then included in the template's structure.

Now I have requirement where we need to render different version of header based on a user logged in logged out state .So if user is non-logged show default_header else if user is logged in render the slim_header  in the existing template (Template A).

.

How can I achieve this for just the 3-4 specific pages? What is the best approach to implement this in AEM?

Thanks!

[EstebanBustamante · Accepted solution]

Hi,

You can simply swap the headers using JavaScript. Once you identify the user, you can change the header accordingly. This logic will be part of your header component which is part of the XF. 

Hope this helps.

[arunpatidar]

I second this approach,

Do not generate the page on run time based on user state then you will have issues due to caching

You can also also use selector based approach where CDN can serve different content based on cookie/header etc, but you have to think about browser cache.

Better to go with run time header swap as suggested by @EstebanBustamante 

[Shashi_Mulugu]

@ShikhaSh1 you can also export experience fragment from aem to Adobe target and replace based on user state.

[Nupur_Jain]

Hi @ShikhaSh1 

We had the similar usecase in one of the projects where we had to show different navigation for logged in user and non loggedin user. The approach we used is as follows:

1. We had two EF pages each configured with one navigation for logged in user and another with non logged in user.

2. We were including the navigation component using apache SSI using sling Include configuration.

3. It means whenever there is call to our page and even if page is cached on dispatcher, apache makes server request just for navigation component.

4. Now, navigation component can check if the user is logged in and can decide between two  Experience Fragments accordingly for rendering.

Please read articles on sling dynamic include 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/foundation/development/set-up-sl...

https://medium.com/@toimrank/aem-sling-dynamic-include-9c5eb233c33c

Hope it helps!

Thanks,

Nupur

[Shubham_borole]

As @Shashi_Mulugu mentioned we have also implemented showing a top banner based component using target and based on user persona. Access and exposure to Adobe Target would be needed.

Applying same to header and footer is possible and would be beneficial to control more types of views as needed. 

[Fanindra_Surat]

Hi @ShikhaSh1 ,

There are many options as shared in the above responses, but the simplest is to have both versions of the header present on your DOM as part of your single header XF and then hide/show based on the user state as mentioned by @EstebanBustamante .

Regards,