Component include details | Community
Skip to main content
Juan_Camacho_I_
Juan_Camacho_I_
New Participant
March 8, 2016
Solved

Component include details

  • March 8, 2016
  • 5 replies
  • 1555 views
                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  
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by edubey

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>

5 replies

edubey
edubey
New Participant
March 8, 2016

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

edubey
edubeyAccepted solution
New Participant
March 8, 2016

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>
Juan_Camacho_I_
Juan_Camacho_I_Author
New Participant
March 8, 2016

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? 

smacdonald2008
smacdonald2008
New Participant
March 8, 2016

 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. 

edubey
edubey
New Participant
March 8, 2016

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.

Terms & ConditionsAccessibility statement

Loading footer...