How to Create a Header Variation for Specific Pages Using Experience Fragments in AEM?

[pranayr]

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

I need to create a slight variation of the header for 10 out of these 100 pages without affecting the other 90 pages. Since the Experience Fragment is part of the template's structure, changing it there would impact all pages.

How can I achieve this variation for just the 10 specific pages? What is the best approach to implement this in AEM?

Thanks!

[Anil_Chennapragada · Accepted solution]

hi @pranayr ,

Below are the 2 options which you can try considering

Option 1

1. Navigate to the template
2. Unlock the experience fragment of the header in the structure of page template
3. you will notice that the header component authored still render on initial content and the newly created pages
4. However, the existing pages the header component authored will be lost.

Pros

1. Using this option, you will always have the flexibility to edit the header component at any specific page that is needed
2. Minimal code changes

Cons

1. One time effort to update all the existing pages with right experience fragments

Option 2

1. Add a flag (e.g. check box) and a path field in the page properties and
2. select the check box for the 10 pages and add the XF path where the requirement is to fetch new XF
3. update the logic in the sling models to render the new XF based on the flag and the new XF path
4. This would require some customization and code changes

Note: If the ask is to update in production. Please try validating this once in local or lower instances before implementing any of the above approaches

[EstebanBustamante]

Hi,

It depends on several factors about the nature of this change to determine the best approach. Are these changes permanent? Are you open to code development and deployment, or is it solely author work? Is this something that will occur in the future as well, or is it a one-time thing?, etc. So, in addition to @Anil_Chennapragada's options, I also would consider:

• Creating a new template and directing the pages to this new template.
• Creating a new template and having authors recreate the pages.
• Utilizing a personalization tool if available (such as Target).

Hope this helps

[Raja_Reddy]

Hi @pranayr 

A slight variation of the header for specific pages without affecting the other pages in AEM
approach:1

1. Create a new template: Create a new template specifically for the 10 pages that require the variation in the header. This template will be a copy of the original template but with the necessary modifications.

2. Modify the header component: In the new template, modify the header component to include the desired variation. You can either create a new variation of the header component or add additional logic to the existing header component to handle the variation.

3. Apply the new template: Apply the new template to the 10 specific pages that require the variation in the header. This can be done by changing the template assignment for each page individually.

4. Update the original template: In the original template, remove the inclusion of the Experience Fragment for the header. This will ensure that the original template does not impact the 10 pages with the variation.

approach:2

you want to keep the original template and header component intact

1. Create a new component: Create a new component specifically for the variation in the header. This component will be similar to the header component but with the necessary modifications.

2. Include the new component: In the 10 specific pages that require the variation, include the new component instead of the original header component. This can be done by adding the new component to the page structure or by using a component placeholder.

3. Configure the new component: Configure the new component to display the desired variation in the header. This can be done by adding additional logic or customization specific to the 10 pages.

By using a separate component for the variation and including it only in the specific pages.