Header & Footer as XF

Avatar

Avatar

v1101

Avatar

v1101

v1101

19-12-2020

 

Hello - I need your suggestion to implement the header and footer as separate experience fragments in the page. Currently we are using static template which is having iParsys for Header and Footer. The goal is to move to Editable template with minimal changes.

 

Current static template (header and footer comes inside the body tag:
<head>Loading all the required scripts and meta tags</head>

<body class="homepage" ng-controller="productController">
<div id="site-wrapper">
<div data-sly-include="header.html" data-sly-unwrap></div>

<div data-sly-include="content.html" data-sly-unwrap></div>
<div data-sly-include="footer.html" data-sly-unwrap></div>
</div>
</body>

Below is the sample header.html which has iparsys in it.

<header class="fixed">

<sly data-sly-resource="${'parsysnav' @ resourceType='foundation/components/iparsys'}"/>

</header>

Since the header.html is having an iparsys and iParsys won't work in Editable template, I was thinking to create a new Header editable template for Header XF section and and Footer template for Footer XF separately. Finally I will create a new editable template for body section and will include header -> Body -> Footer

In the new template:

 

Using XF component - Will load Header XF

Layout Container for Body Section

Using another XF component - Will load Footer XF

Not sure if this is correct approach to implement. Could someone throw some light on this to implement the scenario?

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

shelly-goel

Avatar

shelly-goel

shelly-goel

19-12-2020

Hello@v1101 

Overall the approach looks fine with few caveats:

1. You can use same empty xf variation template for both header and footer (instead of two different xf templates)

2. You would have to create template-types for editable templates which could be kept minimum to 'empty-page' and 'empty-xfpage' template-types

3. Header and Footer XFs & Layout Container would be added in the 'structure' of new editable template (you probably meant same)

4. You can create a sample project with latest archetype, it will create this basic skeleton for /apps, /conf, /content/experience-fragments structure which can be leveraged/ updated as per requirement.

Hope this helps.

Answers (0)