Nesting multiple core components in parent component with sly @ resource

[abkhan25]

<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

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,

[Nupur_Jain · Accepted solution]

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