templates/front/_product_card.html.twig line 1

Open in your IDE?
  1. {# Initialisation de la variable produit utilisée par Vue (fallback = 'prod') #}
  2. {% set var = var|default('prod') %}
  4. {# Carte produit principale avec gestion du hover (Vue events) #}
  5. <div class="card-product" @mouseenter="activateHover({{ var }})" @mouseleave="resetHover({{ var }})">
  7.     {# Zone média produit : image, zoom, tailles, couleurs #}
  8.     <div class="card-product-media"
  9.          :class="{ 'is-loading': !{{ var }}.imageLoaded }"
  10.          :style="{ '--img-aspect': {{ var }}.aspectRatio || MIXED_ASPECT_RATIO }">
  12.         {# Image principale du produit avec gestion erreur et redirection #}
  13.         <img :src="getCardImage({{ var }})"
  14.              :alt="{{ var }}.name"
  15.              :class="{ 'is-loaded': !!{{ var }}.imageLoaded }"
  16.              loading="lazy"
  17.              decoding="async"
  18.              @load="markImageLoaded({{ var }})"
  19.              @error="handleImageError({{ var }}, false)"
  20.              @click.prevent="redirectToProductDeclination({{ var }}.idProduit || {{ var }}.productId || {{ var }}.id, {{ var }}.name, {{ var }}.id)"
  22.              style="cursor:pointer;">
  26.         {# Bouton overlay pour ouverture du zoom produit #}
  27.         <button class="zoom-overlay" type="button" @click.prevent="openZoom(prod)">
  28.             <i class="fa fa-arrows-alt" aria-hidden="true"></i>
  29.             <span class="zoom-fallback" aria-hidden="true">&#8645;</span>
  30.         </button>
  31.         {# Favoris #}
  32.         <button type="button"
  33.                 class="wishlist-overlay js-wishlist-toggle"
  34.                 :class="{ 'is-active': window.__WISHLIST_IDS__ && window.__WISHLIST_IDS__.has({{ var }}.idProduit || {{ var }}.productId || {{ var }}.id) }"
  35.                 :data-product-id="{{ var }}.idProduit || {{ var }}.productId || {{ var }}.id"
  36.                 :data-product-name="{{ var }}.name"
  37.                 :data-declination-id="{{ var }}.id || ({{ var }}.activeSizes.length ? {{ var }}.activeSizes[0].id : 0)"
  38.                 aria-label="Ajouter aux favoris">
  39.             <i class="fa fa-heart" aria-hidden="true"></i>
  40.             <span class="wishlist-fallback" aria-hidden="true">♥</span>
  41.         </button>
  44.         {# Titre du produit affiché sur l’image #}
  46.         {# Overlay des tailles disponibles avec ajout rapide ou notification #}
  47.         <div class="size-overlay" v-if="{{ var }}.activeSizes.length">
  48.             <div class="size-pill-wrapper" v-for="size in {{ var }}.activeSizes" :key="size.id">
  50.                 {# Bouton taille (désactivé si stock nul) #}
  51.                 <button type="button"
  52.                         class="size-pill"
  53.                         :disabled="size.qty <= 0"
  54.                         @click.prevent="quickAddSize({{ var }}, size)"
  55.                         :title="size.qty <= 0 ? 'Prévenez-moi quand cette taille revient' : size.label">
  56.                     ${size.label}
  57.                 </button>
  59.                 {# Icône notification si taille en rupture #}
  60.                 <span class="size-alert" v-if="size.qty <= 0" title="Prévenez-moi">
  61.                     <i class="fa fa-bell"></i>
  62.                 </span>
  63.             </div>
  65.             {# Icône globale notification si produit hors stock #}
  66.             <button v-if="!{{ var }}.stock"
  67.                     class="notify-icon"
  68.                     @click.prevent="openNotifyModal({{ var }})"
  69.                     title="Préviens-moi lorsqu’il sera disponible">
  70.                 &#128276;
  71.             </button>
  72.         </div>
  74.         {# Ligne des couleurs disponibles #}
  75.         <div class="color-row">
  77.             {# Affichage des 3 premières couleurs sous forme de pastilles #}
  78.             <div class="color-swatches">
  79.                 <button v-for="(color, index) in ({{ var }}.colorSwatches || []).slice(0,3)"
  80.                         type="button"
  81.                         :key="color.id || index"
  82.                         class="color-swatch"
  83.                         :class="{'active': {{ var }}.activeColor && {{ var }}.activeColor.id === color.id}"
  84.                         :style="getColorStyle(color.code)"
  85.                         :title="color.name"
  86.                         @click.prevent="onColorClick({{ var }}, color)">
  87.                 </button>
  88.             </div>
  90.             {# Bouton indiquant le nombre de couleurs supplémentaires #}
  91.             <button v-if="({{ var }}.colorSwatches || []).length > 3"
  92.                     class="more-colors"
  93.                     type="button"
  94.                     @click="openProduct({{ var }}.idProduit || {{ var }}.productId || {{ var }}.id, {{ var }}.name)"
  95.                     v-text="'+' + (({{ var }}.colorSwatches || []).length - 3) + ' couleurs'">
  96.             </button>
  98.             <div class="product-card-rating product-card-rating--inline" v-if="Number({{ var }}.ratingCount || 0) > 0">
  99.                 <span class="product-card-rating-stars" aria-hidden="true">
  100.                     <span
  101.                         v-for="star in 5"
  102.                         :key="star"
  103.                         class="product-card-rating-star"
  104.                         :class="{
  105.                             'is-full': Number({{ var }}.ratingScore || 0) >= star,
  106.                             'is-half': Number({{ var }}.ratingScore || 0) >= (star - 0.5) && Number({{ var }}.ratingScore || 0) < star
  107.                         }"
  108.                     >&#9733;</span>
  109.                 </span>
  110.                 <span class="product-card-rating-value">${ Number({{ var }}.ratingScore || 0).toFixed(1) }</span>
  111.             </div>
  113.         </div>
  114.     </div>
  116.     {# Corps de la carte produit : prix et promotion #}
  117.     <div class="card-product-body">
  118.         <div class="card-product-head">
  119.             <h3 class="home-card-title product-name" v-text="{{ var }}.name"></h3>
  120.         </div>
  122.         {# Bloc prix principal #}
  123.         <div class="product-price">
  124.             <div class="price-current">
  126.                 {# Prix affiché (promo ou normal) #}
  127.                 <span class="price-value">
  128.                     ${ formatPrice({{ var }}.promo && {{ var }}.promo.isValid ? getDiscountedPrice({{ var }}) : {{ var }}.priceTTC) } TND
  129.                 </span>
  131.                 {# Détails promotion : ancien prix + badge remise #}
  132.                 <span class="price-meta" v-if="{{ var }}.promo && {{ var }}.promo.isValid">
  133.                     <span class="original-price">${ formatPrice({{ var }}.priceTTC) } TND</span>
  134.                     <span class="discount-flag" v-text="getPromoLabel({{ var }})"></span>
  135.                 </span>
  136.             </div>
  137.         </div>
  138.     </div>
  139. </div>