Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 3

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>

screenshot_issue.JPG

 

Unable to get parsys in Title of Level 2:A and Title of Level 2:B

Many Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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>

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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>