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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Header & Footer as XF

v1101
Level 5
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
shelly-goel
Correct answer by
Community Advisor
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
shelly-goel
Correct answer by
Community Advisor
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

v1101
Level 5
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.
shelly-goel
Community Advisor
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
v1101
Level 5
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>
shelly-goel
Community Advisor
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
v1101
Level 5
Level 5
@shelly-goel - Basically I am looking to include the XF only inside <header/>.
shelly-goel
Community Advisor
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