Nesting multiple core components in parent component with sly @ resource

abkhan25

17-08-2020

 

<div>
	<sly data-sly-resource="${'image' @resourceType='/apps/weretail/components/content/image' , decorationTagName='div'}"><sly>
</div>
<div>
	<sly data-sly-resource="${'image' @resourceType='/apps/weretail/components/content/image' , decorationTagName='div'}"><sly>
</div>

 

Using the above sly resource call the image needs to be explicitly defined e.g. image-a , image-c image-b. , since both the nodes are siblings hence above code will not work.

When components are same components are drag-n-dropped in page editing mode as sibling nodes in the jcr they are appended with the random strings.
Like the below category_teaser_random-number

Screenshot 2020-08-17 at 1.34.02 PM.png

 

 



 

 

 

 

 

 

How to replicate the above with nested core components or other components instances at the same level by using sightly/HTL in multifield, component included by @resourcetype etc,

 

 

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Nupur_Jain

MVP

17-08-2020

Hi @abkhan25 

 

In HTL's data-sly-resource, 'image' string  basically acts as a relative path or you can simply say it as node name thus, you just need to provide this 'image' string to something unique everytime you include resource by resource type. If you are using multifield and including resource, you will have to generate random number yourself. you can also use multifield index to genrate a unique name like

 

 

 

<div data-sly-repeat="${mymodel.mylist}">
	<sly data-sly-resource="${['image', item.index] @ join = '-',  
 resourceType='/apps/weretail/components/content/image' , decorationTagName='div'}"><sly>
</div>

 

 

Try it out!

Thanks!

Nupur

Answers (0)