templates/home/_single_product_card.html.twig line 1

Open in your IDE?
  1. <div class="single-product modern-product-card w-100 d-flex flex-column">
  2.     <div class="product-image-container" 
  3.          onmouseenter="showImageNav({{ product.id }})" 
  4.          onmouseleave="hideImageNav({{ product.id }})">
  5.         <a href="{{ path('ui_product_show', { slug: product.slug }) }}" class="d-block image-link">
  6.             {% if product.images is defined and product.images|length > 0 %}
  7.                 <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset(product.images[0]) }}" alt="{{ product.name }}">
  8.             {% else %}
  9.                 <img class="img-fluid main-product-img" id="main-img-{{ product.id }}" src="{{ asset('ui/img/product/p1.jpg') }}" alt="{{ product.name }}">
  10.             {% endif %}
  11.         </a>
  12.         
  13.         <!-- Boutons de navigation (visibles au survol) -->
  14.         {% if product.images is defined and product.images|length > 1 %}
  15.             <button class="img-nav-btn img-nav-left" id="img-left-{{ product.id }}" onclick="prevImage({{ product.id }})" style="display: none;">
  16.                 <span class="lnr lnr-chevron-left"></span>
  17.             </button>
  18.             <button class="img-nav-btn img-nav-right" id="img-right-{{ product.id }}" onclick="nextImage({{ product.id }})" style="display: none;">
  19.                 <span class="lnr lnr-chevron-right"></span>
  20.             </button>
  21.             
  22.             <!-- Indicateurs de position -->
  23.             <div class="img-indicators" id="img-indicators-{{ product.id }}" style="display: none;">
  24.                 {% for img in product.images %}
  25.                     <span class="indicator" id="indicator-{{ product.id }}-{{ loop.index0 }}" onclick="showImage({{ product.id }}, {{ loop.index0 }})"></span>
  26.                 {% endfor %}
  27.             </div>
  28.         {% endif %}
  29.     </div>
  30.     
  31.     <div class="product-details d-flex flex-column flex-grow-1">
  32.          <a href="{{ path('ui_product_show', { slug: product.slug }) }}" class="product-title-link">
  33.             <h6 class="modern-product-title">{{ product.name }}</h6>
  34.         </a>
  35.         
  36.         <!-- Affichage de la boutique -->
  37.         <div class="shop-info">
  38.             <small class="text-muted">
  39.                 <i class="lnr lnr-store"></i>
  40.                 {% if product.shop is defined and product.shop %}
  41.                      <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}" class="shop-link">
  42.                         {{ product.shop.name }}
  43.                     </a>
  44.                 {% else %}
  45.                     <span class="text-muted">Boutique inconnue</span>
  46.                 {% endif %}
  47.             </small>
  48.         </div>
  49.         
  50.         <div class="price modern-price mt-auto">
  51.             <h6 class="current-price">{{ product.price|number_format(2, '.', ' ') }} HTG</h6>
  52.             {% if product.compareAtPrice %}
  53.                 <h6 class="l-through old-price">{{ product.compareAtPrice|number_format(2, '.', ' ') }} HTG</h6>
  54.             {% endif %}
  55.         </div>
  56.         <div class="prd-bottom modern-prd-bottom mt-2">
  57.             <a href="javascript:void(0)" class="alibaba-btn add-to-cart-btn" data-product-id="{{ product.id }}" data-qty="1" title="Ajouter au panier">
  58.                 <span class="ti-bag"></span> Ajouter
  59.             </a>
  60.             <a href="#" class="alibaba-btn icon-btn wishlist-btn" data-product-id="{{ product.id }}" {% if app.user %}onclick="toggleWishlist({{ product.id }}, this); return false;"{% else %}onclick="showCustomAlert('Vous devez être connecté pour ajouter aux favoris', 'warning'); return false;"{% endif %} title="Favoris">
  61.                 <span class="lnr lnr-heart"></span>
  62.             </a>
  63.             <a href="#" class="alibaba-btn icon-btn comparison-btn" data-product-id="{{ product.id }}" onclick="toggleComparison({{ product.id }}, this); return false;" title="Comparer">
  64.                 <span class="lnr lnr-sync"></span>
  65.             </a>
  66.         </div>
  67.     </div>
  68. </div>