templates/bundles/SyliusShopBundle/Product/Show/_image_mobile.html.twig line 36

Open in your IDE?
  1. {% if product.images|length > 1 %}
  2.     {# <div class="ui divider"></div> #}
  3.     {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
  4.    <div>
  5.        <div id="gallery-right-images-mobile">
  6.            {% set imageCount = 0 %}
  7.            {% for image in product.images %}
  8.                {% if imageCount < 4 %}
  9.                    {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_large_thumbnail') : asset('assets/shop/img/200x200.png') %}
  10.                    <div id="card-product-show-right-mobile">
  11.                        {% if product.isConfigurable() and product.enabledVariants|length > 0 %}
  12.                            {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  13.                        {% endif %}
  14.                        <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
  15.                            <img src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
  16.                        </a>
  17.                    </div>
  18.                    {% set imageCount = imageCount + 1 %}
  19.                {% endif %}
  20.            {% endfor %}
  21.        </div>
  22.        <div class="points-last-article">
  23.            {% set imageCount = 0 %}
  24.            <span class="point active" onclick="changeImage(1)"></span>
  25.            {% for image in product.images %}
  26.                {% if loop.index > 1 and imageCount < 4 %}
  27. {#                   {{ dump(loop.index) }}#}
  28.                    <span class="point" onclick="changeImage({{ loop.index}})"></span>
  29.                    {% set imageCount = imageCount + 1 %}
  30.                {% endif %}
  31.            {% endfor %}
  33.        </div>
  34.    </div>
  35.     <div class="inventory-product-mobile">
  36.         {% include '@SyliusShop/Product/Show/_inventory.html.twig' %}
  37.     </div>
  38. {% endif %}
  40. <script>
  41.   function changeImage(index) {
  42.     // Récupérer toutes les images de la galerie
  43.     var images = document.querySelectorAll('#gallery-right-images-mobile #card-product-show-right-mobile');
  45.     // Réinitialiser la classe "active" pour tous les points
  46.     var points = document.querySelectorAll('.point');
  47.     points.forEach(function(point) {
  48.       point.classList.remove('active');
  49.     });
  51.     // Cacher toutes les images de la galerie
  52.     images.forEach(function(image) {
  53.       image.style.display = 'none';
  54.     });
  56.     // Afficher l'image correspondante à l'index spécifié
  57.     images[index - 1].style.display = 'block';
  59.     // Ajouter la classe "active" au point correspondant à l'index spécifié
  60.     points[index - 1].classList.add('active');
  61.   }
  62. </script>