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

Component include details

Juan_Camacho_I_
Level 2
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
edubey
Correct answer by
Level 10
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

0 Replies
edubey
Level 10
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.

smacdonald2008
Level 10
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. 

Juan_Camacho_I_
Level 2
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? 

edubey
Correct answer by
Level 10
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

edubey
Level 10
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