I'm working on a project where I need to create a masonry grid component that can dynamically add rows, with each row displaying different types of components. For example, if an editor adds a row and selects two components, the grid should generate two side-by-side containers, and each container should be capable of having additional components added inside.
The issue I'm facing is that when adding containers using data-sly-resource, the containers end up with the same ID, which causes them to behave as if they are cloned any components added to one container appear in all of them.
Has anyone encountered a similar issue or have any advice on how to properly manage unique IDs for these containers to ensure they work independently?
<div class="cmp-masonryGrid bootstrap"
data-sly-use.model="com.xxxx.core.models.MasonryGrid"
data-cmp-is="masonryGrid"
data-cc-name="ctaevent"
data-cc-componentname="column"
data-cc-componentgroup="content">
<div class="container">
<sly data-sly-list.row="${model.getRows}">
<div class="masonryGrid-row masonryGrid-${row.rowVersion}">
<div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);">
<sly data-sly-resource="${column @ resourceType='core/wcm/components/container/v1/container'}"></sly>
</div>
</div>
</sly>
</div>
</div>
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @MohammedSk ,
Try below code should be working
<div class="cmp-masonryGrid bootstrap"
data-sly-use.model="com.xxxx.core.models.MasonryGrid"
data-cmp-is="masonryGrid"
data-cc-name="ctaevent"
data-cc-componentname="column"
data-cc-componentgroup="content">
<div class="container">
<sly data-sly-list.row="${model.getRows}">
<div class="masonryGrid-row masonryGrid-${row.rowVersion}">
<div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);">
<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>
<div data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></div>
</div>
</div>
</sly>
</div>
</div>
<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>
Correction:- ${resource.path.hashCode} instead of {resource.path.hashCode}
Thanks
Hi @MohammedSk ,
Try below code should be working
<div class="cmp-masonryGrid bootstrap"
data-sly-use.model="com.xxxx.core.models.MasonryGrid"
data-cmp-is="masonryGrid"
data-cc-name="ctaevent"
data-cc-componentname="column"
data-cc-componentgroup="content">
<div class="container">
<sly data-sly-list.row="${model.getRows}">
<div class="masonryGrid-row masonryGrid-${row.rowVersion}">
<div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);">
<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>
<div data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></div>
</div>
</div>
</sly>
</div>
</div>
<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>
Correction:- ${resource.path.hashCode} instead of {resource.path.hashCode}
Thanks
Views
Likes
Replies
Views
Likes
Replies