data-sly-resource inside other components | Community
Skip to main content
sreenu539
sreenu539
New Participant
May 16, 2023
Solved

data-sly-resource inside other components

  • May 16, 2023
  • 1 reply
  • 811 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sady_Rifat

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>

 

1 reply

Sady_Rifat
Sady_RifatAccepted solution
New Participant
May 16, 2023

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>

 

    Terms & ConditionsAccessibility statement

    Loading footer...