Nesting multiple core components in parent component with sly @ resource

Avatar

Avatar
Validate 1
Level 1
abkhan25
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
abkhan25
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile
abkhan25
Level 1

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)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
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)