Solved

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

Forum|Forum|1 year ago
November 21, 2024
5 replies
1172 views

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!

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 EstebanBustamante

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.

EstebanBustamante

Accepted solution

Community Advisor and Adobe Champion

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.

Esteban Bustamante

arunpatidar

Community Advisor

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

Arun Patidar

Shashi_Mulugu

Community Advisor

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

Nupur_Jain

Adobe Employee

Hi @shikhash3

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-sling-dynamic-include

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

Hope it helps!

Thanks,

Nupur

Shubham_borole

Community Advisor

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

Community Advisor

Hi @shikhash3 ,

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,

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded