Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Employee

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

View solution in original post

11 Replies

Avatar

Level 9

Hi Mario,

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

Avatar

Level 2

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!

Avatar

Employee

hi mario,

Is this a item.path a page?

--
Feike

Avatar

Level 2

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.

Avatar

Correct answer by
Employee

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

Avatar

Level 2

This solved it!

Thank you Feike.

Avatar

Level 2

Could you please provide the solution of the above problem?

I am also facing the same problem.

Avatar

Employee

Do you have more details/info on your issue?

Avatar

Level 3

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! 

Avatar

Employee

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