Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Header & Footer as XF

Avatar

Level 5

 

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?

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

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.

Avatar

Level 5
@shelly-goel - Thanks for your reply. While creating Header XF, The header related components is having parsys in it. I don't need any resizing for header XF, so I can drag the components inside the parsys, which is part of XF? Please confirm.

Avatar

Community Advisor
Yes the container would be available when a new XF is created and you can drag and drop componens as needed to create the header

Avatar

Level 5
@shelly-goel - This is the existing iparsys which holds the header components in it. Since we are creating the header related items in XF, how do I include the header XF in place of the below section. <header class="fixed"> <sly data-sly-resource="${'parsysnav' @ resourceType='foundation/components/iparsys'}"/> </header>

Avatar

Community Advisor
@v1101 - After the header XF is ready, under the editable template you can drop-drop a 'Expereience Fragment' component and chose the path of Header XF you created. This header would then appear on all the pages that are created from this template.comp

Avatar

Level 5
@shelly-goel - Basically I am looking to include the XF only inside <header/>.

Avatar

Community Advisor
@v1101 You can create a header component which is having <header> tag in it and any other header component logic and then use this component inside the XF