<div class="association-box"> <div class="container-h"> {% for association in product.associations %} {{ render(url('sylius_shop_partial_product_association_show', {'productId': product.id, 'id': association.id, 'template': '@SyliusShop/Product/Show/_association.html.twig'})) }} {% else %} <h4 id="similary-product">Produits Similaires</h4> {{ render(url('sylius_shop_partial_product_index_latest', {'count': 4, 'template': '@SyliusShop/Product/_horizontalList.html.twig'})) }} <div class="points-association"> <span class="point-last-product-association active" onclick="changeImageAssociation(1)"></span> <span class="point-last-product-association" onclick="changeImageAssociation(2)"></span> <span class="point-last-product-association" onclick="changeImageAssociation(3)"></span> <span class="point-last-product-association" onclick="changeImageAssociation(4)"></span> </div> <script> function changeImageAssociation(index) { // Récupérer toutes les images de la galerie var images = document.querySelectorAll('#box-product-card'); // Réinitialiser la classe "active" pour tous les points var points = document.querySelectorAll('.point-last-product-association'); points.forEach(function(point) { point.classList.remove('active'); }); // Cacher toutes les images de la galerie images.forEach(function(image) { image.style.display = 'none'; }); console.log(images[index - 1]) // Afficher l'image correspondante à l'index spécifié images[index - 1].style.display = 'block'; console.log(images[index - 1]); // Ajouter la classe "active" au point correspondant à l'index spécifié points[index - 1].classList.add('active'); } </script> {% endfor %} </div></div>