Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

What resourceType for XF in HTL?

Avatar

Level 1

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
 
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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