Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Component include details

Avatar

Level 2
                Hi, I am trying to divide my webpage in components and I have some questions about it:   Does Adobe include extra code when including a component? I am having problems keeping my page functionality when including its code in a component (specially js), which is the difference between these codes regarding libraries usage or code generation?: <html> <sly data-sly-include="component" data-sly-unwrap/> </html> component --> <h1>hello </h1> __________________________ <html> <h1>hello </h1> </html>   This is a very stupid example but I am having problems with some js when I don't expect to have them and I don't know if I can do things like dividing a list (<li>) in components without breaking the list. Also, I have tried creating components using jsp or html with the same code and I have found differences in the result even when there isn't any dynamic usage of it, is this normal?   Thank you for your help  
1 Accepted Solution

Avatar

Correct answer by
Level 10

I guess its possible but you need to make sure you are not closing UL in any component.

It can be similar to this in sightly

<ul> <li><div data-sly-resource="${ @path='par1', resourceType='foundation/components/parsys'}"></div></li> <li><div data-sly-resource="${ @path='par2', resourceType='foundation/components/parsys'}"></div></li> <li><div data-sly-resource="${ @path='par3', resourceType='foundation/components/parsys'}"></div></li> </ul>

View solution in original post

5 Replies

Avatar

Level 10

AEM does generate extra div or elements, Here how you can remove it in 

JSP

http://adobeaemclub.com/how-to-remove-default-div-generated-by-cq5-aem-for-component/

Sightly

http://www.aemmastery.com/2015/04/24/remove-div-tags-sightly/

data-sly-include is used to include another section/ webpage in to this page.

I am still not whts your JS issue, please elaborate...

Also eloborate  I don't know if I can do things like dividing a list (<li>) in components without breaking the list.

Avatar

Level 10

 I am having problems keeping my page functionality when including its code in a component (specially js), which is the difference between these codes regarding libraries usage or code generation?

I am not clear what this means - can you please clarify. 

Avatar

Level 2

Thank you for your help, I'll try to explain it properly, I am using a page that contains something like:

<ul> <li>code1</li> <li>code2</li> <li>code3</li> </ul>

and I'd want to divide it in components, for example:

<ul> <li>component1</li> <li>component2</li> <li>component3</li> </ul>

My other problem appeared when I made a component with some js associated to it (popup menu, hover, etc.), to include that component in my page. Do I have to include the libraries in the component itself?, or does it use the libraries defined in the page that including that component? 

Avatar

Correct answer by
Level 10

I guess its possible but you need to make sure you are not closing UL in any component.

It can be similar to this in sightly

<ul> <li><div data-sly-resource="${ @path='par1', resourceType='foundation/components/parsys'}"></div></li> <li><div data-sly-resource="${ @path='par2', resourceType='foundation/components/parsys'}"></div></li> <li><div data-sly-resource="${ @path='par3', resourceType='foundation/components/parsys'}"></div></li> </ul>

Avatar

Level 10

Answering to JS issue:

Use client libs

Include all the JS / CSS in your client lib and the load that client lib at template level. Thus it will not require to load it in component