Expand my Community achievements bar.

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

data-sly-resource inside other components

Avatar

Level 7

Usecase: image, some custom elements, cf paths and a CTA/button.

 

I created two components one by super typing image v2, another by super typing with teaser v2.

 

Now I am trying to include button component inside above two components, so author can reuse existing button component

 

 

 

<div data-sly-resource="${'button' @ resourceType='mysite/components/content/button'}"></div>

or

<sly data-sly-resource="${'button' @ resourceType='mysite/components/content/button'}"></sly>

 

 

 

I am not able to see these components inside extended teaser , image components.

 

I added cq:isContainer {Boolean}true for above components. What am I  missing? What are the other ways anyone achieved this use case.

 

Any ideas?

Thanks for the help.

 

-Sri

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

I don't think you missed anything. Make sure you give the correct component path. 
If your components are version maintainable, then add the proper path. ex: mysite/components/content/button/v1/button

 

In another way, you can diagnose it. On the top of the button component HTML add this script and see in the teaser component title is showing or not. Or check in publish mode for the button component markup.

<sly data-sly-test="${wcmmode.edit}">
    <div class="component-title">${component.title}</div>
</sly>

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

I don't think you missed anything. Make sure you give the correct component path. 
If your components are version maintainable, then add the proper path. ex: mysite/components/content/button/v1/button

 

In another way, you can diagnose it. On the top of the button component HTML add this script and see in the teaser component title is showing or not. Or check in publish mode for the button component markup.

<sly data-sly-test="${wcmmode.edit}">
    <div class="component-title">${component.title}</div>
</sly>