How to remove the wrapping div when using data-sly-resource?

This only applies when you have a page you want to render via data-sly-resource

Feike Visser wrote...

Ok..., here comes a black-magic Sightly trick....

Use this (resourceType) in case you are referring to a page...

1. <sly data-sly-resource="${item.path @ selectors='link', wcmmode='disabled', appendPath='jcr:content',  resourceType=item.contentResource.resourceType}"></sly>

 

Basically to remove the div you need to specify the resourceType...

 

This is the most black-magic trick I have seen for sightly! :) I thought that providing resoureType won't affect rendering at all (just be nice way to render even if there is no node under certain path). Thanks for that info! 

http://www.codebay-innovation.com/2016/09/15/aem-how-to-remove-div-wrapper-from-component/

Do you have more details/info on your issue?

Could you please provide the solution of the above problem?

I am also facing the same problem.

This solved it!

Thank you Feike.

Hi Feike,

yes, it's a page.

So we have the base-page component. And this component has a link.html.html selector with this as its content:

<sly data-sly-use.basePage="${'be.idamediafoundry.foundation.component.page.BasePage'}" data-sly-unwrap> <a href="${basePage.uri}.html">${basePage.title}</a> </sly>

So when including this page, with the "link"-selector, we want to get the a tag, without the wrapping div because it's meaningless. 

thanks Feike.

hi mario,

Is this a item.path a page?

--
Feike

Hi,

Yes I am fully aware of that, but we include the output of a rendered page. And aem automagically wraps it in a div.

This is the page that gets includes (using selectors)

<div data-sly-use.basePage="${'be.foundation.component.page.BasePage'}" data-sly-unwrap>
       <a href="${basePage.uri}.html">${basePage.title}</a>
</div>

so the unwrap is on there, but the output is still wrong.

Thanks for the quick reply!