Configuring Style System for Nested Components

Avatar

Avatar
Give Back
Level 1
FrancescaBueti
Level 1

Like

1 like

Total Posts

9 posts

Correct reply

0 solutions
Top badges earned
Give Back
Springboard
Establish
Ignite 1
Validate 1
View profile

Avatar
Give Back
Level 1
FrancescaBueti
Level 1

Like

1 like

Total Posts

9 posts

Correct reply

0 solutions
Top badges earned
Give Back
Springboard
Establish
Ignite 1
Validate 1
View profile
FrancescaBueti
Level 1

03-04-2019

Hello,

I have a component "Three Card Merchandising" that contains other components like "Merchandising Cards" like so:

<div class="cmp-threeCardMerchandising__cards">

     <div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-one' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>

     <div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-two' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>

     <div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-three' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>

</div>

and have configured it to be a container component with "cq:isContainer" like so:

1724616_pastedImage_1.png

I have added this component to the structure of a template and configured a policy for one of the cards within the component to contains styles.

The style is showing up as expected on a page of this template type:

1724617_pastedImage_3.png

However the class is not being applied to the HTML when I select the option.

Is it possible to configure styles for nested components? If so, what changes can I make in order to get the style to apply as expected?

Thank you,

Francesca

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,410 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,410 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

03-04-2019

Team replied:

Unfortunately, I don't believe nested components with the Style system are supported.

Answers (4)

Answers (4)

Avatar

Avatar
Affirm 3
Level 2
koenve
Level 2

Likes

13 likes

Total Posts

15 posts

Correct reply

3 solutions
Top badges earned
Affirm 3
Establish
Validate 1
Give Back
Boost 5
View profile

Avatar
Affirm 3
Level 2
koenve
Level 2

Likes

13 likes

Total Posts

15 posts

Correct reply

3 solutions
Top badges earned
Affirm 3
Establish
Validate 1
Give Back
Boost 5
View profile
koenve
Level 2

22-04-2020

From what I've noticed, it looks like the wrapper div is not being generated when including a component. Because of this, the style system cannot add any classes to it. Adding @decoration=true to the data-sly-resource will include the wrapper div (which is important, because otherwise your cq:htmlTag might not be taken into account).

Avatar

Avatar
Level 1
mnecibi
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
View profile

Avatar
Level 1
mnecibi
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
View profile
mnecibi
Level 1

16-01-2020

This worked for me :

     <sly class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-one' @ resourceType='corp-home/components/content/merchandisingCard', decorationTagName='div', cssClassName='card-one'}"></sly>

 

Avatar

Avatar
Give Back
Level 1
FrancescaBueti
Level 1

Like

1 like

Total Posts

9 posts

Correct reply

0 solutions
Top badges earned
Give Back
Springboard
Establish
Ignite 1
Validate 1
View profile

Avatar
Give Back
Level 1
FrancescaBueti
Level 1

Like

1 like

Total Posts

9 posts

Correct reply

0 solutions
Top badges earned
Give Back
Springboard
Establish
Ignite 1
Validate 1
View profile
FrancescaBueti
Level 1

03-04-2019

Okay thank you so much!

Can I document somewhere as a feature request?

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,410 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,410 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

03-04-2019

This is not documented nor is there any examples of this use case. I am checking with the team on this use case.