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

Hi,

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}">
<div>${item}</div>
</sly>
</sly>

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

<!-- Script to handle the "Load More" functionality -->
<script>
// 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];
productsContainer.appendChild(productDiv);
}
});
</script>

- 

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.

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.