Hi All,
I need to add parsys in nested loop in sightly.
code snippet:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories='test.stickyleftnav'}"/>
<div data-sly-test="${wcmmode.edit}" class="cq-placeholder section" data-emptytext="Sticky Left Navigation"></div>
<div data-sly-use.stickyLeftNav = "test.core.models.StickyLeftNavigationModel">
<div class="row">
<div class="column left" style="background-color:${properties.backgroundColor@ context='styleToken'};">
<ul data-sly-list.level1="${stickyLeftNav.level1}">
<li>Title of level1: ${level1.titleLevel1}</li>
<ul data-sly-list.level="${level1.level2}">
<li>Title of Level 2: ${level.titleLevel2}</li>
</ul>
</ul>
</div>
<div class="column right" style="background-color:cyan" >
<ul data-sly-list.level1="${stickyLeftNav.level1}">
<li>Title of level1: ${level1.titleLevel1}
<sly data-sly-resource="${'item{0}' @ format=level1List.count, resourceType='wcm/foundation/components/parsys'}"></sly>
</li>
<ul data-sly-list.level="${level1.level2}">
<li>Title of Level 2: ${level.titleLevel2}
<sly data-sly-resource="${'items{0}' @ format=levelList.count, resourceType='wcm/foundation/components/parsys'}"></sly>
</li>
</ul>
</ul>
</div>
</div>
</div>
Unable to get parsys in Title of Level 2:A and Title of Level 2:B
Many Thanks
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @annkitaaggarwal,
Nested list shares the same name for the parsys of both the items (Migration and Distributed work in this case)
Highlighted in bold is the cause, It should be unique.
Provide some unique name to the same, something like below will produce the resource name as A-items1, B-items2, C-items1, D-items2
Have used "title", you can amend the code based on your need such that it frames as unique identifier.
Updated code: Amended on top of the snippet shared
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='test.stickyleftnav'}"/> <div data-sly-test="${wcmmode.edit}" class="cq-placeholder section" data-emptytext="Sticky Left Navigation"></div> <div data-sly-use.stickyLeftNav = "test.core.models.StickyLeftNavigationModel"> <div class="row"> <div class="column left" style="background-color:${properties.backgroundColor@ context='styleToken'}"> <ul data-sly-list.level1="${stickyLeftNav.level1}"> <li>Title of level1: ${level1.titleLevel1}</li> <ul data-sly-list.level="${level1.level2}"> <li>Title of Level 2: ${level.titleLevel2}</li> </ul> </ul> </div> <div class="column right" style="background-color:cyan" > <ul data-sly-list.level1="${stickyLeftNav.level1}"> <li>Title of level1: ${level1.titleLevel1} <sly data-sly-resource="${'item{0}' @ format=level1List.count, resourceType='wcm/foundation/components/parsys'}"></sly> </li> <ul data-sly-list.level="${level1.level2}"> <li>Title of Level 2: ${level.titleLevel2} <sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly> </li> </ul> </ul> </div> </div> </div>
Hi @annkitaaggarwal,
Nested list shares the same name for the parsys of both the items (Migration and Distributed work in this case)
Highlighted in bold is the cause, It should be unique.
Provide some unique name to the same, something like below will produce the resource name as A-items1, B-items2, C-items1, D-items2
Have used "title", you can amend the code based on your need such that it frames as unique identifier.
Updated code: Amended on top of the snippet shared
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='test.stickyleftnav'}"/> <div data-sly-test="${wcmmode.edit}" class="cq-placeholder section" data-emptytext="Sticky Left Navigation"></div> <div data-sly-use.stickyLeftNav = "test.core.models.StickyLeftNavigationModel"> <div class="row"> <div class="column left" style="background-color:${properties.backgroundColor@ context='styleToken'}"> <ul data-sly-list.level1="${stickyLeftNav.level1}"> <li>Title of level1: ${level1.titleLevel1}</li> <ul data-sly-list.level="${level1.level2}"> <li>Title of Level 2: ${level.titleLevel2}</li> </ul> </ul> </div> <div class="column right" style="background-color:cyan" > <ul data-sly-list.level1="${stickyLeftNav.level1}"> <li>Title of level1: ${level1.titleLevel1} <sly data-sly-resource="${'item{0}' @ format=level1List.count, resourceType='wcm/foundation/components/parsys'}"></sly> </li> <ul data-sly-list.level="${level1.level2}"> <li>Title of Level 2: ${level.titleLevel2} <sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly> </li> </ul> </ul> </div> </div> </div>
Thanks, let me try this
Views
Likes
Replies
Views
Likes
Replies