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

Header & Footer as XF

Avatar

Avatar
Validate 10
Level 2
v1101
Level 2

Likes

4 likes

Total Posts

150 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 2
v1101
Level 2

Likes

4 likes

Total Posts

150 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
v1101
Level 2

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
Affirm 100
MVP
shelly-goel
MVP

Likes

243 likes

Total Posts

408 posts

Correct Reply

104 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

243 likes

Total Posts

408 posts

Correct Reply

104 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

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)