parsys included in nested loop is not working, though looping is working fine

[annkitaaggarwal]

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

[Vijayalakshmi_S · Accepted solution]

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.

• item1
  • items1
  • items2
• item2
  • items1
  • items2

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. 

<sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly>

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>

[annkitaaggarwal]

Thanks, let me try this