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]

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