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:
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.
The "Load More" button is created with an id attribute for identification.
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.
