What resourceType for XF in HTL?

[doodls]

Hi,

I have an experience fragment on a page and I need to strip the containing <div class="cmp-container"... and <div class="header"...

I saw a post on here about adding a resourceType to strip the added containers and this worked perfectly for static components but I'm having issues figuring out what to add for the XF.

This is how the xf is included:

<sly data-sly-test.headerexpvariable="${'{0}/jcr:content/root' @ format=[inheritedPageProperties.headervariantPath]}">

<sly data-sly-resource="${headerexpvariable @ wcmmode='disabled'}"></sly>

I added a resourceType to the component but although it successfully removes the containers, it just calls the empty component rather than the content filled XF version.

I also saw that adding

resourceType='wcm/foundation/components/parsys' 

would help, and it does remove the cmp-container but not the other div. If need be I can work with this but would really appreciate someone telling me if it's the right way and make sure that I'm not introducing any other issues that I'm not seeing. Would also be great if anybody could help with stripping both containers but I'll take what I can get

Thanks

[SantoshSai · Accepted solution]

Hi @doodls ,

Hard Coded Example
The first example uses sightly to reference an experience fragment, /content/experience-fragments/we-retail/equipment, and the required variation, master. This will only work when the path includes the experience fragment variation path. The value here is hard coded.

<sly data-sly-resource="${@path='/content/experience-fragments/we-retail/equipment/master',
   selectors='content', wcmmode='disabled'}"></sly>

Dynamic Example
In the second example, we can see that our component adapts to the com.mysite.models.component.MyCustomComponent, Sling Model backend, and then it exposes the experience fragment in the exPath property. The value returned from the exPath is ‘/content/experience-fragments/we-retail/equipment/master’.

<sly data-sly-use.cmp="com.mysite.models.component.MyCustomComponent"></sly>

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

Hope that helps you!

Regards,

Santosh