Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

on click of button(Load More) first product is coming evrytime


Level 4


Example: we have total 20 products ,we will be showing 5 products on page load and on click of laodmore will show other 5 products.

but issue is when we click on loadmore first product is getting displayed again everytime on click of loadmore button. we have wriiten in condition in sightly. Is there any I can restrict 1st product to load one time.

<sly data-sly-test.testVale="${******}">
<sly data-sly-test.testVale="${********}">
"1st product"

<sly data-sly-test="${}"
"2,3,4,5 products"

4 Replies


Employee Advisor



To avoid repeating the first product, you can modify your Sightly code to handle the rendering of products more explicitly. Here's an example of how you can structure your Sightly code to achieve this:


<!-- Initial products to load -->
<sly data-sly-list.products="${yourProductList}">
<!-- Render the first product only once -->
<sly data-sly-test="${!sly.list.index == 0}">

<!-- "Load More" button to load additional products -->
<button id="loadMoreButton">Load More</button>

<!-- Script to handle the "Load More" functionality -->
// JavaScript code to handle "Load More" button click
var loadMoreButton = document.getElementById('loadMoreButton');
var additionalProducts = [/* your additional products here */];
var productsContainer = document.getElementById('productsContainer'); // Update with your container ID

loadMoreButton.addEventListener('click', function() {
for (var i = 0; i < additionalProducts.length; i++) {
var productDiv = document.createElement('div');
productDiv.textContent = additionalProducts[i];


In this code:

  1. Initial products are loaded using the data-sly-list statement. The first product is rendered only when sly.list.index is not equal to 0, preventing it from being repeated.

  2. The "Load More" button is created with an id attribute for identification.

  3. JavaScript code handles the "Load More" button click event. When the button is clicked, it appends additional products to the productsContainer. You should replace additionalProducts with your actual data source or logic to fetch more products.


Level 4

Thank you for your quick response and detailed explaination.

In our case we have 2 set of sightly test conditions. In first test condition will get 1st product nd from other test condition we are getting other products nd we are using template call so whenever we click click on Loadmore both conditions are getting called. I have tried to add above condition but 1st product is not displaying at all on page load itself.


Community Advisor

I recommend you to create a Javascript implementation for pagination.



@vijitha Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Kautuk Sahni