Ad Code

Sunday, October 20, 2019

Implementing Header and Footer with Editable Templates

Hello Everyone,

I have already wrote a lot about editable templates, but a lot of people ask me about
what is the best way to manage header and footer in AEM with editable Templates.
We-Retail project really mislead us about this concept as in that project, when we drag and
drop header/footer, no need to configure anything. The header and footers itself got populated.
But we never have that ideal use case in real life when we don't need to configure anything
in header and footer.
As there is no inheritance between two templates so what can be best suited
implementation for header and footer.

Solution 1:
Experience fragment is one of the ways to solve this issue as you can create an XF, one
for header and one for the footer and reference those using XF Component in the template
level then all the pages will automatically get the value of header and footer created from that template.

Pros and Cons of Using this approach:

  1. In this approach, you need to drag and drop XF component in place of header and footer on each template and link it to corresponding XF.
  2. If you are using the same content for header and footer,you can put it in the structure of the initial template, then you don't need to drag and drop it  in each template, but if you have multiple sites using same initial template,I won't recommend it as different sites may have different header and footer XF.
  3. If you are using XF, it is best to drag and drop and configure on each template individually.
Demonstration Video of Implementing Header and Footer using XF in editable Templates:


Solution 2: There is one more solution which I prefer the most and used in my two recent projects, It goes well in both cases static/dynamic templates.

  1. Create a template (may be home-page template) for the root-page to configure header and footer of the site under which all the pages exist.and provide a configuration to configure rootPath in the page properties of the home-page template.
  2. Make the change in body.html and add the "pageheader.html" in body.html and include the below code in pageheader.html.
    <sly data-sly-test.resourceType="${pageProperties.sling:resourceType}"/>
    <sly data-sly-test.mode="${resourceType == 'aem-project/components/structure/homepage' ? 'edit' : 'disabled'}"/>
    <sly data-sly-test.rootPath="${inheritedPageProperties.rootPath}"/>
    <sly data-sly-test.header="${rootPath}/jcr:content/header"/>
    <header>
       <sly data-sly-resource="${ @path= header, resourceType='/apps/aem-project/components/content/languagenavigation', wcmmode=mode}"></sly>
    </header>

  3. By this approach all the templates and pages will share the same header and footer and author can only change the header and footer at the root Page level.
  4. All the pages inside the rootPage must inherit the home-page component.Then only the logic of header footer will work fine.

Pros and Cons of this solution: 

  • You don’t need to drag and drop the component on each template.On the root Page itself you can change the content.
  • Any author can change the header and footer at the root page.
  • The header/footer should work with MSM based live/language copies. You can change the value of the rootpath by rollout configuration for each live/language copy.
Demonstration Video of Implementing Header and Footer using the above approach:

Solution 3: You can create a template for the root level and provide configurations for all the header and  footer in the page properties and fetch the value by calling inherited Page properties and all the pages will share the same header and footer.

Pros and Cons of this solution: 

  1. No Need to put any additional logic to render header and footer and the configuration of header and footer is free from template.
  2. If header and footer has so many configurations, your page properties may look messy.


Hope it will help you guys !!
Thanks and Happy Learning.

5 comments:

  1. Thank you for posting this Shivani, this is really helpful

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Any disadvantage of using the iparsys with editable templates where you have the component dragged and authored the header and footer at root node only and it will automatically inherit to all the child pages with content.

    ReplyDelete
  4. Hi Shivani, how to avoid cq:decorative tags for components.If you have any ideas please share with me

    ReplyDelete
  5. We are using MSM and editable template. It' is common for 3 languages. When I changed footer for master language, due to template it applied the same footer for other languages too. Can anyone tell me the solution for this

    ReplyDelete