Adobe Experience Manager Sites & More

99spanchal · 3/2/23

Hi all,

I am working on AEMaaCS and need to make some changes to the page component. Basically I have to add some html structure to the footer section of the page component. My proxy page component is referring to the v3 of Page component. As per my understanding, following code in footer.html is rendering my footer XF inside of the footer tag:

<sly data-sly-list="${page.htmlPageItems}"><script data-sly-test="${item.location.name == 'footer'}"

data-sly-element="${item.element.name @ context='unsafe'}" data-sly-attribute="${item.attributes}"></script>

</sly>

Writing my code after this creates the following structure:

... ... ...

</footer>my footer XF</footer>

... ..

</div

</div>

<div> My custom html code</div>

</body>

I want my code to be added right after the <footer> tag or inside the <footer> resulting in the following structure:

... ... ...

</footer>my footer XF</footer>

<div> My custom html code</div>

... ..

</div

</div>

</body>

Is there a way to make changes in my proxy page component for this requirement?

Thanks!

SantoshSai · 3/2/23

Hi @99spanchal ,

Best practice is to refer v3 page component and copy paste required html (footer in your case) into your own proxied component and make changes there accordingly.

Hope that helps!

Regards,

Santosh

View solution in original post

SantoshSai · 3/2/23

Hi @99spanchal ,

Best practice is to refer v3 page component and copy paste required html (footer in your case) into your own proxied component and make changes there accordingly.

Hope that helps!

Regards,

Santosh

99spanchal · 3/3/23

Hi @SantoshSai

Thanks for you response. I tried that, but it still adds my custom html code outside <div class="body-wrapper"> and not right after the <footer>. Following is the structure I get:

... ... ...

</footer>my footer XF</footer>

... ..

</div

</div>

<div> My custom html code</div>

rk_pandian · 9/29/23

Can you try once by stopping the aem-precompileompiled-scripts bundle? If it works then I think this needs to be reported to Adobe. I'm also facing a similar issue where I'm trying to load a 3rd party script inside the <head> after overriding head.html from v3/page but it doesn't work because the htl scripts are pre-compiled. My script is injected properly when I stop the bundle, but that's not a solution for Prod.

Please see this for reference (I have posted a question on how to achieve this in Prod): https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-as-cloud-page-componen...

Adobe Experience Manager Sites & More

Custom html structure in page component

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe