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

[mario_vde]

Hi all,

currently we have a setup that includes a page using the following snippet:

<sly data-sly-resource="${item.path @ selectors='link', wcmmode='disabled'}"></sly>

this results in

<div class="base-page case-detail-page page">        <a href="">Name</a> </div>

Is there a way to remove the div and just keep the a href?

Much appreciated!

Regards

Mario

[askdctm]

Hi Mario,

Not pretty sure, but there is data-sly-unwrap[removes host element while retaining its content] available in sightly. 

[mario_vde]

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!

[Feike_Visser1]

hi mario,

Is this a item.path a page?

--
Feike

[mario_vde]

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.

[Feike_Visser1 · Accepted solution]

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...

[mario_vde]

This solved it!

Thank you Feike.

[ashish_kumarm48]

Could you please provide the solution of the above problem?

I am also facing the same problem.

[Feike_Visser1]

Do you have more details/info on your issue?

[aleksandrsp9196]

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

[puradawid]

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! 

[Feike_Visser1]

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