templates/home/single-product.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}
  4.     {{ product.name }}
  5.     | MaketOu
  6. {% endblock %}
  8. {% block stylesheets %}
  9.     <style>
  10.         /* Styles pour l'affichage de la boutique */
  11.         .shop-info {
  12.             padding: 10px 0;
  13.             border-bottom: 1px solid #f0f0f0;
  14.             margin-bottom: 15px;
  15.         }
  17.         .shop-link {
  18.             color: #ffa200;
  19.             text-decoration: none;
  20.             font-weight: 500;
  21.         }
  23.         .shop-link:hover {
  24.             color: #e8910a;
  25.             text-decoration: underline;
  26.         }
  28.         /* Styles pour les statistiques du produit */
  29.         .product-stats {
  30.             background: #f8f9fa;
  31.             padding: 15px;
  32.             border-radius: 8px;
  33.             border: 1px solid #e9ecef;
  34.         }
  36.         .product-stats .stat-item {
  37.             text-align: center;
  38.         }
  40.         .product-stats .stat-number {
  41.             display: block;
  42.             font-size: 1.2rem;
  43.             font-weight: bold;
  44.             color: #ffa200;
  45.         }
  47.         .product-stats .stat-label {
  48.             color: #666;
  49.             font-size: 0.8rem;
  50.             text-transform: uppercase;
  51.             letter-spacing: 0.5px;
  52.         }
  54.         /* Message de confirmation */
  55.         #cart-message {
  56.             border: none;
  57.             background: #d4edda;
  58.             color: #155724;
  59.             border-radius: 6px;
  60.             padding: 12px 16px;
  61.             margin-top: 15px;
  62.         }
  64.         /* Amélioration des boutons d'actions */
  65.         .card_area {
  66.             margin-top: 20px;
  67.             gap: 12px;
  68.         }
  70.         .card_area .primary-btn {
  71.             background: #ffa200;
  72.             border: none;
  73.             padding: 0 30px;
  74.             height: 50px;
  75.             display: inline-flex;
  76.             align-items: center;
  77.             justify-content: center;
  78.             border-radius: 8px;
  79.             color: white;
  80.             font-weight: 600;
  81.             font-size: 16px;
  82.             transition: all 0.3s ease;
  83.             text-decoration: none;
  84.             gap: 8px;
  85.             flex: 1;
  86.             max-width: 250px;
  87.         }
  89.         .card_area .primary-btn i {
  90.             font-size: 20px;
  91.         }
  93.         .card_area .primary-btn:hover {
  94.             background: #e8910a;
  95.             transform: translateY(-2px);
  96.             box-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  97.             color: white;
  98.         }
  100.         .card_area .icon_btn {
  101.             display: inline-flex;
  102.             align-items: center;
  103.             justify-content: center;
  104.             width: 50px;
  105.             height: 50px;
  106.             border-radius: 8px;
  107.             background: #fff;
  108.             color: #333;
  109.             border: 1px solid #ddd;
  110.             transition: all 0.3s ease;
  111.             text-decoration: none;
  112.         }
  114.         .card_area .icon_btn i {
  115.             font-size: 22px;
  116.         }
  118.         .card_area .icon_btn:hover {
  119.             background: #ffa200;
  120.             color: white;
  121.             border-color: #ffa200;
  122.             transform: translateY(-2px);
  123.             box-shadow: 0 4px 12px rgba(255, 162, 0, 0.2);
  124.         }
  126.         /* Styles pour la galerie moderne de produits */
  127.         .product-gallery-modern {
  128.             display: flex;
  129.             gap: 15px;
  130.             position: relative;
  131.             align-items: stretch;
  132.         }
  134.         .thumbnails-container {
  135.             position: relative;
  136.             display: flex;
  137.             flex-direction: column;
  138.             align-items: center;
  139.             width: 80px;
  140.             flex-shrink: 0;
  141.             height: auto;
  142.         }
  144.         /* Les boutons sont toujours visibles (meilleur pour le mobile et l'UX) */
  145.         .thumbnails-container .thumbnail-nav-btn {
  146.             transition: all 0.2s ease;
  147.         }
  149.         .product-thumbnails {
  150.             display: flex;
  151.             flex-direction: column;
  152.             gap: 10px;
  153.             width: 100%;
  154.             flex: 1;
  155.             overflow: hidden;
  156.             position: relative;
  157.         }
  159.         .thumbnails-wrapper {
  160.             display: flex;
  161.             flex-direction: column;
  162.             gap: 10px;
  163.             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  164.             will-change: transform;
  165.         }
  167.         .thumbnail-nav-btn {
  168.             width: 30px;
  169.             height: 30px;
  170.             border-radius: 50%;
  171.             background: white;
  172.             border: 2px solid #e0e0e0;
  173.             display: flex !important;
  174.             align-items: center;
  175.             justify-content: center;
  176.             cursor: pointer;
  177.             transition: all 0.3s ease;
  178.             margin: 0;
  179.             padding: 0;
  180.             color: #666;
  181.             z-index: 10;
  182.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  183.             position: relative;
  184.             flex-shrink: 0;
  185.         }
  187.         .thumbnail-nav-btn:hover {
  188.             background: #ffa200;
  189.             border-color: #ffa200;
  190.             color: white;
  191.             transform: scale(1.1);
  192.             box-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  193.         }
  195.         .thumbnail-nav-btn:active {
  196.             transform: scale(0.95);
  197.         }
  199.         .thumbnail-nav-btn.disabled {
  200.             opacity: 0.3;
  201.             cursor: not-allowed;
  202.             pointer-events: none;
  203.             filter: grayscale(1);
  204.         }
  206.         .thumbnail-nav-btn i {
  207.             font-size: 20px;
  208.             font-weight: bold;
  209.         }
  211.         .thumbnail-item {
  212.             width: 80px;
  213.             height: 80px;
  214.             min-width: 80px;
  215.             min-height: 80px;
  216.             max-width: 80px;
  217.             max-height: 80px;
  218.             border: 2px solid #e0e0e0;
  219.             border-radius: 8px;
  220.             overflow: hidden;
  221.             cursor: pointer;
  222.             transition: border-color 0.3s ease, border-width 0.3s ease, box-shadow 0.3s ease;
  223.             position: relative;
  224.             background: #fff;
  225.             border-bottom: 2px solid #e0e0e0;
  226.             flex-shrink: 0;
  227.         }
  229.         .thumbnail-item:hover {
  230.             border-color: #ffa200;
  231.             border-bottom-color: #ffa200;
  232.             border-width: 3px;
  233.             box-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2);
  234.         }
  236.         .thumbnail-item.active {
  237.             border-color: #ffa200 !important;
  238.             border-bottom-color: #ffa200 !important;
  239.             border-width: 3px !important;
  240.             box-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2) !important;
  241.         }
  243.         .thumbnail-item::after,
  244.         .thumbnail-item::before {
  245.             display: none !important;
  246.             content: none !important;
  247.         }
  249.         .thumbnail-item img {
  250.             width: 100%;
  251.             height: 100%;
  252.             object-fit: cover;
  253.             transition: transform 0.3s ease;
  254.         }
  256.         .thumbnail-item:hover img {
  257.             transform: scale(1.1);
  258.         }
  260.         .thumbnail-item.active img {
  261.             transform: scale(1.1);
  262.         }
  264.         .product-main-image-wrapper {
  265.             flex: 1;
  266.             position: relative;
  267.             background: #fff;
  268.             border-radius: 12px;
  269.             overflow: hidden;
  270.             border: 1px solid #e0e0e0;
  271.             cursor: crosshair;
  272.         }
  274.         .product-main-image {
  275.             position: relative;
  276.             width: 100%;
  277.             padding-top: 100%;
  278.             overflow: hidden;
  279.             background: #f8f9fa;
  280.         }
  282.         .product-main-image img {
  283.             position: absolute;
  284.             top: 0;
  285.             left: 0;
  286.             width: 100%;
  287.             height: 100%;
  288.             object-fit: contain;
  289.             transition: transform 0.15s ease-out;
  290.             transform-origin: center center;
  291.         }
  293.         /* Supprimer le scale basique, géré en JS */
  294.         /* .product-main-image:hover img {
  295.             transform: scale(1.05);
  296.         } */
  298.         .image-overlay-icons {
  299.             position: absolute;
  300.             top: 15px;
  301.             right: 15px;
  302.             display: flex;
  303.             flex-direction: column;
  304.             gap: 10px;
  305.             z-index: 20;
  306.             pointer-events: none;
  307.         }
  309.         .icon-btn {
  310.             pointer-events: all;
  311.             width: 45px;
  312.             height: 45px;
  313.             border-radius: 50%;
  314.             background: rgba(255, 255, 255, 0.95);
  315.             border: none;
  316.             display: flex;
  317.             align-items: center;
  318.             justify-content: center;
  319.             padding: 0;
  320.             cursor: pointer;
  321.             transition: all 0.3s ease;
  322.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  323.             color: #333;
  324.         }
  326.         .icon-btn:hover {
  327.             background: #ffa200;
  328.             color: white;
  329.             transform: scale(1.1);
  330.             box-shadow: 0 4px 12px rgba(255, 162, 0, 0.4);
  331.         }
  333.         .icon-btn i {
  334.             font-size: 18px;
  335.         }
  337.         .favorite-btn.active {
  338.             background: #ff6b6b;
  339.             color: white;
  340.         }
  342.         .image-counter {
  343.             position: absolute;
  344.             bottom: 15px;
  345.             right: 15px;
  346.             background: rgba(0, 0, 0, 0.7);
  347.             color: white;
  348.             padding: 6px 12px;
  349.             border-radius: 20px;
  350.             font-size: 13px;
  351.             font-weight: 600;
  352.         }
  354.         /* Modal de zoom d'image avec transitions modernes */
  355.         .image-zoom-modal {
  356.             display: none;
  357.             position: fixed;
  358.             z-index: 9999;
  359.             left: 0;
  360.             top: 0;
  361.             width: 100%;
  362.             height: 100%;
  363.             background: rgba(0, 0, 0, 0);
  364.             overflow: auto;
  365.             opacity: 0;
  366.             transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  367.             backdrop-filter: blur(0px);
  368.         }
  370.         .image-zoom-modal.active {
  371.             display: flex;
  372.             align-items: center;
  373.             justify-content: center;
  374.             opacity: 1;
  375.             background: rgba(0, 0, 0, 0.95);
  376.             backdrop-filter: blur(10px);
  377.         }
  379.         .zoom-modal-content {
  380.             position: relative;
  381.             max-width: 90%;
  382.             max-height: 90%;
  383.             margin: auto;
  384.             opacity: 0;
  385.             transform: scale(0.8);
  386.             transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  387.         }
  389.         .image-zoom-modal.active .zoom-modal-content {
  390.             opacity: 1;
  391.             transform: scale(1);
  392.         }
  394.         .zoom-modal-content img {
  395.             width: 100%;
  396.             height: auto;
  397.             max-height: 90vh;
  398.             object-fit: contain;
  399.             border-radius: 8px;
  400.             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  401.             opacity: 0;
  402.             transition: opacity 0.3s ease;
  403.         }
  405.         .zoom-modal-content img.loaded {
  406.             opacity: 1;
  407.         }
  409.         /* Loader moderne */
  410.         .zoom-loader {
  411.             position: absolute;
  412.             top: 50%;
  413.             left: 50%;
  414.             transform: translate(-50%, -50%);
  415.             z-index: 1;
  416.             display: flex;
  417.             flex-direction: column;
  418.             align-items: center;
  419.             justify-content: center;
  420.         }
  422.         .zoom-loader-spinner {
  423.             width: 60px;
  424.             height: 60px;
  425.             border: 4px solid rgba(255, 255, 255, 0.1);
  426.             border-top-color: #ffa200;
  427.             border-radius: 50%;
  428.             animation: spin 1s linear infinite;
  429.         }
  431.         @keyframes spin {
  432.             to {
  433.                 transform: rotate(360deg);
  434.             }
  435.         }
  437.         .zoom-loader-text {
  438.             color: white;
  439.             margin-top: 15px;
  440.             text-align: center;
  441.             font-size: 14px;
  442.             font-weight: 500;
  443.         }
  445.         .close-zoom {
  446.             position: absolute;
  447.             top: 30px;
  448.             right: 30px;
  449.             color: white;
  450.             font-size: 32px;
  451.             font-weight: 300;
  452.             cursor: pointer;
  453.             z-index: 10000;
  454.             width: 50px;
  455.             height: 50px;
  456.             display: flex;
  457.             align-items: center;
  458.             justify-content: center;
  459.             background: rgba(255, 255, 255, 0.1);
  460.             border: 2px solid rgba(255, 255, 255, 0.2);
  461.             border-radius: 50%;
  462.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  463.             opacity: 0;
  464.             transform: scale(0.8);
  465.         }
  467.         .image-zoom-modal.active .close-zoom {
  468.             opacity: 1;
  469.             transform: scale(1);
  470.             transition-delay: 0.2s;
  471.         }
  473.         .close-zoom:hover {
  474.             background: rgba(255, 162, 0, 0.9);
  475.             border-color: #ffa200;
  476.             transform: scale(1.1) rotate(90deg);
  477.             box-shadow: 0 4px 20px rgba(255, 162, 0, 0.4);
  478.         }
  480.         /* Boutons de navigation sur l'image principale */
  481.         .main-image-nav {
  482.             position: absolute;
  483.             top: 0;
  484.             bottom: 0;
  485.             left: 0;
  486.             right: 0;
  487.             display: flex;
  488.             align-items: center;
  489.             justify-content: space-between;
  490.             padding: 0 15px;
  491.             pointer-events: none;
  492.             z-index: 15;
  493.         }
  494.         .main-image-nav-btn {
  495.             pointer-events: all;
  496.             width: 44px;
  497.             height: 44px;
  498.             border-radius: 50%;
  499.             background: rgba(255, 255, 255, 0.95);
  500.             border: 2px solid #e0e0e0;
  501.             display: flex;
  502.             align-items: center;
  503.             justify-content: center;
  504.             padding: 0;
  505.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  506.             color: #333;
  507.             transition: all 0.2s ease;
  508.         }
  509.         .main-image-nav-btn:hover {
  510.             background: #ffa200;
  511.             border-color: #ffa200;
  512.             color: #fff;
  513.             transform: scale(1.08);
  514.         }
  515.         .main-image-nav-btn:active {
  516.             transform: scale(0.95);
  517.         }
  519.         /* Modal personnalisé pour remplacer les alert */
  520.         .custom-alert-modal .modal-content {
  521.             border-radius: 12px;
  522.             border: none;
  523.             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  524.         }
  526.         .custom-alert-modal .modal-header {
  527.             border-bottom: none;
  528.             padding: 1.5rem 1.5rem 0.5rem;
  529.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  530.             color: white;
  531.             border-radius: 12px 12px 0 0;
  532.         }
  534.         .custom-alert-modal .modal-header .btn-close {
  535.             filter: brightness(0) invert(1);
  536.             opacity: 0.8;
  537.         }
  539.         .custom-alert-modal .modal-header .btn-close:hover {
  540.             opacity: 1;
  541.         }
  543.         .custom-alert-modal .modal-body {
  544.             padding: 1.5rem;
  545.             text-align: center;
  546.         }
  548.         .custom-alert-modal .modal-body .alert-icon {
  549.             font-size: 3rem;
  550.             margin-bottom: 1rem;
  551.         }
  553.         .custom-alert-modal .modal-body .alert-icon.success {
  554.             color: #28a745;
  555.         }
  557.         .custom-alert-modal .modal-body .alert-icon.error {
  558.             color: #dc3545;
  559.         }
  561.         .custom-alert-modal .modal-body .alert-icon.warning {
  562.             color: #ffc107;
  563.         }
  565.         .custom-alert-modal .modal-body .alert-icon.info {
  566.             color: #17a2b8;
  567.         }
  569.         .custom-alert-modal .modal-body .alert-message {
  570.             font-size: 1.1rem;
  571.             color: #333;
  572.             margin-bottom: 1rem;
  573.             line-height: 1.6;
  574.         }
  576.         .custom-alert-modal .modal-footer {
  577.             border-top: none;
  578.             padding: 0.5rem 1.5rem 1.5rem;
  579.             justify-content: center;
  580.         }
  582.         .custom-alert-modal .modal-footer .btn {
  583.             min-width: 120px;
  584.             padding: 0.6rem 1.5rem;
  585.             border-radius: 8px;
  586.             font-weight: 500;
  587.         }
  589.         /* Responsive pour single-product */
  590.         @media(max-width: 991.98px) {
  591.             .product-gallery-modern {
  592.                 flex-direction: column;
  593.             }
  595.             .thumbnails-container {
  596.                 flex-direction: row;
  597.                 width: 100%;
  598.                 overflow-x: auto;
  599.                 padding: 10px 0;
  600.             }
  602.             .thumbnail-item {
  603.                 flex-shrink: 0;
  604.             }
  606.             .main-image-container {
  607.                 width: 100%;
  608.             }
  609.         }
  611.         @media(max-width: 768px) {
  612.             .product-gallery-modern {
  613.                 flex-direction: column;
  614.             }
  616.             .thumbnails-container {
  617.                 width: 100%;
  618.                 flex-direction: row;
  619.                 align-items: center;
  620.             }
  622.             .product-thumbnails {
  623.                 flex-direction: row;
  624.                 width: 100%;
  625.                 max-height: 100px;
  626.                 overflow-x: auto;
  627.                 overflow-y: hidden;
  628.             }
  630.             .thumbnail-item {
  631.                 flex-shrink: 0;
  632.             }
  634.             .thumbnail-nav-btn {
  635.                 margin: 0 5px;
  636.             }
  638.             .thumbnail-nav-up {
  639.                 order: 1;
  640.             }
  642.             .product-thumbnails {
  643.                 order: 2;
  644.             }
  646.             .thumbnail-nav-down {
  647.                 order: 3;
  648.             }
  650.             .image-overlay-icons {
  651.                 opacity: 1;
  652.             }
  653.         }
  654.     </style>
  655. {% endblock %}
  657. {% block body %}
  658.     <!-- Start Banner Area -->
  659.     <section class="banner-area organic-breadcrumb">
  660.         <div class="container">
  661.             <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  662.                 <div class="col-first">
  663.                     <h1>Product Details Page</h1>
  664.                     <nav class="d-flex align-items-center">
  665.                         <a href="index.html">Home<span class="lnr lnr-arrow-right"></span>
  666.                         </a>
  667.                         <a href="#">Shop<span class="lnr lnr-arrow-right"></span>
  668.                         </a>
  669.                         <a href="single-product.html">product-details</a>
  670.                     </nav>
  671.                 </div>
  672.             </div>
  673.         </div>
  674.     </section>
  675.     <!-- End Banner Area -->
  677.     <!--================Single Product Area =================-->
  678.     <div class="product_image_area">
  679.         <div class="container">
  680.             <div class="row s_product_inner">
  681.                 <div class="col-lg-6">
  682.                     <div
  683.                         class="product-gallery-modern">
  684.                         <!-- Colonne de miniatures à gauche avec navigation -->
  685.                         <div class="thumbnails-container">
  686.                             <button class="thumbnail-nav-btn thumbnail-nav-up" id="thumbnail-nav-up" title="Image précédente">
  687.                                 <i class="lnr lnr-chevron-up"></i>
  688.                             </button>
  689.                             <div class="product-thumbnails" id="product-thumbnails">
  690.                                 <div class="thumbnails-wrapper" id="thumbnails-wrapper">
  691.                                     {% if product.images is defined and product.images|length > 0 %}
  692.                                         {% for img in product.images %}
  693.                                             <div class="thumbnail-item {% if loop.first %}active permanently-active{% endif %}" data-image="{{ asset(img) }}" data-index="{{ loop.index0 }}">
  694.                                                 <img src="{{ asset(img) }}" alt="{{ product.name }} - Image {{ loop.index }}">
  695.                                             </div>
  696.                                         {% endfor %}
  697.                                     {% else %}
  698.                                         <div class="thumbnail-item active permanently-active" data-image="{{ asset('ui/img/category/s-p1.jpg') }}" data-index="0">
  699.                                             <img src="{{ asset('ui/img/category/s-p1.jpg') }}" alt="{{ product.name }}">
  700.                                         </div>
  701.                                     {% endif %}
  702.                                 </div>
  703.                             </div>
  704.                             <button class="thumbnail-nav-btn thumbnail-nav-down" id="thumbnail-nav-down" title="Image suivante">
  705.                                 <i class="lnr lnr-chevron-down"></i>
  706.                             </button>
  707.                         </div>
  709.                         <!-- Grande image principale -->
  710.                         <div class="product-main-image-wrapper">
  711.                             <div class="product-main-image">
  712.                                 {% if product.images is defined and product.images|length > 0 %}
  713.                                     <img id="main-product-image" src="{{ asset(product.images[0]) }}" alt="{{ product.name }}">
  714.                                 {% else %}
  715.                                     <img id="main-product-image" src="{{ asset('ui/img/category/s-p1.jpg') }}" alt="{{ product.name }}">
  716.                                 {% endif %}
  717.                             </div>
  719.                             <!-- Overlay avec icônes -->
  720.                             <div class="image-overlay-icons">
  721.                                 <button class="icon-btn zoom-btn" onclick="openImageZoom()" title="Agrandir l'image">
  722.                                     <i class="lnr lnr-magnifier"></i>
  723.                                 </button>
  724.                                 <button class="icon-btn favorite-btn" {% 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="Ajouter aux favoris" data-product-id="{{ product.id }}">
  725.                                     <i class="lnr lnr-heart"></i>
  726.                                 </button>
  727.                             </div>
  729.                             <!-- Navigation sur l'image principale -->
  730.                             <div class="main-image-nav">
  731.                                 <button type="button" class="main-image-nav-btn" id="main-image-prev" title="Image précédente">
  732.                                     <i class="lnr lnr-chevron-left"></i>
  733.                                 </button>
  734.                                 <button type="button" class="main-image-nav-btn" id="main-image-next" title="Image suivante">
  735.                                     <i class="lnr lnr-chevron-right"></i>
  736.                                 </button>
  737.                             </div>
  739.                             <!-- Indicateur d'image active -->
  740.                             <div class="image-counter">
  741.                                 <span id="current-image-index">1</span>
  742.                                 /
  743.                                 <span id="total-images">{{ (product.images|length) ?: 1 }}</span>
  744.                             </div>
  745.                         </div>
  746.                     </div>
  747.                 </div>
  748.                 <div class="col-lg-5 offset-lg-1">
  749.                     <div class="s_product_text">
  750.                         <h3>{{ product.name }}</h3>
  751.                         <h2>
  752.                             <span id="main-unit-price">{{ product.price|number_format(2, '.', ' ') }}</span>
  753.                             HTG
  754.                         </h2>
  755.                         <ul class="list">
  756.                             <li>
  757.                                 <a class="active" href="#">
  758.                                     <span>Category</span>
  759.                                     :
  760.                                     {{ product.category.name }}</a>
  761.                             </li>
  762.                             <li>
  763.                                 <a href="#">
  764.                                     <span>Disponibilité</span>
  765.                                     :
  766.                                     {{ product.stockStatus }}</a>
  767.                             </li>
  768.                         </ul>
  769.                         <p>{{ product.description|raw|striptags|nl2br }}</p>
  771.                         <!-- Informations sur la boutique -->
  772.                         <div class="shop-info mb-3">
  773.                             <small class="text-muted">
  774.                                 <i class="lnr lnr-store"></i>
  775.                                 Vendu par :
  776.                                 {% if product.shop is defined and product.shop %}
  777.                                     <a href="{{ path('ui_shop_show', {'slug': product.shop.slug}) }}" class="shop-link">
  778.                                         {{ product.shop.name }}
  779.                                     </a>
  780.                                 {% else %}
  781.                                     <span class="text-muted">Boutique inconnue</span>
  782.                                 {% endif %}
  783.                             </small>
  784.                         </div>
  786.                         <div class="product_count">
  787.                             <label for="qty">Quantité :</label>
  788.                             <input type="text" name="qty" id="sst" maxlength="12" value="1" title="Quantité:" class="input-text qty" max="{{ product.stock ?? 99 }}">
  789.                             <button onclick="var result = document.getElementById('sst'); var sst = result.value; if( !isNaN( sst ) && sst < {{ product.stock ?? 99 }}) result.value++;return false;" class="increase items-count" type="button">
  790.                                 <i class="lnr lnr-chevron-up"></i>
  791.                             </button>
  792.                             <button onclick="var result = document.getElementById('sst'); var sst = result.value; if( !isNaN( sst ) && sst > 1 ) result.value--;return false;" class="reduced items-count" type="button">
  793.                                 <i class="lnr lnr-chevron-down"></i>
  794.                             </button>
  795.                         </div>
  797.                         <input
  798.                         type="hidden" id="unit-price-input" value="{{ product.price|number_format(2, '.', '') }}"/>
  800.                         {# Prix de gros (bulk pricing) #}
  801.                         {% set tierPrices = [] %}
  802.                         {% if product.tierPrices is defined and product.tierPrices|length > 0 %}
  803.                             {% for tier in product.tierPrices %}
  804.                                 {% set tierPrices = tierPrices|merge([{ 'min': tier.minQty, 'price': tier.price }]) %}
  805.                             {% endfor %}
  806.                         {% else %}
  807.                             {# Facultatif: exemple si pas de data backend #}
  808.                             {% set tierPrices = [
  809.                                 { 'min': 1, 'price': product.price },
  810.                                 { 'min': 5, 'price': (product.price * 0.98)|round(2, 'floor') },
  811.                                 { 'min': 10, 'price': (product.price * 0.95)|round(2, 'floor') },
  812.                                 { 'min': 20, 'price': (product.price * 0.92)|round(2, 'floor') }
  813.                             ] %}
  814.                         {% endif %}
  816.                         <div id="bulk-pricing" class="mt-3" data-tiers='{{ tierPrices|json_encode|e('html_attr') }}'>
  817.                             <div class="d-flex align-items-center mb-2">
  818.                                 <strong class="me-2">Prix unitaire selon quantité :</strong>
  819.                                 <span id="unit-price-value">{{ product.price|number_format(2, '.', ' ') }}
  820.                                     HTG</span>
  821.                             </div>
  822.                             <div class="table-responsive">
  823.                                 <table class="table table-sm mb-2" style="border:1px solid #eee;">
  824.                                     <thead class="table-light">
  825.                                         <tr>
  826.                                             <th>Quantité min.</th>
  827.                                             <th>Prix unitaire (HTG)</th>
  828.                                         </tr>
  829.                                     </thead>
  830.                                     <tbody id="bulk-tier-rows">
  831.                                         {% for tier in tierPrices|sort((a,b)=> a.min <=> b.min) %}
  832.                                             <tr data-min="{{ tier.min }}">
  833.                                                 <td>≥
  834.                                                     {{ tier.min }}</td>
  835.                                                 <td>{{ tier.price|number_format(2, '.', ' ') }}</td>
  836.                                             </tr>
  837.                                         {% endfor %}
  838.                                     </tbody>
  839.                                 </table>
  840.                             </div>
  841.                             <div class="d-flex flex-wrap gap-3 align-items-baseline mb-2">
  842.                                 <div>
  843.                                     <strong>Total:</strong>
  844.                                     <span id="total-price-value">{{ product.price|number_format(2, '.', ' ') }}</span>
  845.                                     HTG
  846.                                 </div>
  847.                                 <div class="text-success">
  848.                                     <strong>Économies:</strong>
  849.                                     <span id="savings-amount">0.00</span>
  850.                                     HTG
  851.                                                                                                                                                                                     (<span id="savings-percent">0</span>%)
  852.                                 </div>
  853.                             </div>
  854.                             <small class="text-muted">Le prix et le total s’adaptent automatiquement selon la quantité.</small>
  855.                         </div>
  857.                         <!-- Stock disponible -->
  858.                         {% if product.stock is defined %}
  859.                             <small class="text-muted">Stock disponible :
  860.                                 {{ product.stock }}
  861.                                 unités</small>
  862.                         {% endif %}
  864.                         <!-- Statistiques du produit -->
  865.                         {% if productStats is defined %}
  866.                             <div class="product-stats mt-3">
  867.                                 <div class="row text-center">
  868.                                     <div class="col-4">
  869.                                         <div class="stat-item">
  870.                                             <span class="stat-number">{{ productStats.totalViews }}</span>
  871.                                             <small class="stat-label">Vues</small>
  872.                                         </div>
  873.                                     </div>
  874.                                     <div class="col-4">
  875.                                         <div class="stat-item">
  876.                                             <span class="stat-number">{{ productStats.salesCount }}</span>
  877.                                             <small class="stat-label">Ventes</small>
  878.                                         </div>
  879.                                     </div>
  880.                                     <div class="col-4">
  881.                                         <div class="stat-item">
  882.                                             <span class="stat-number">{{ productStats.conversionRate }}%</span>
  883.                                             <small class="stat-label">Conversion</small>
  884.                                         </div>
  885.                                     </div>
  886.                                 </div>
  887.                             </div>
  888.                         {% endif %}
  890.                         <div class="card_area d-flex align-items-center">
  891.                             <a class="primary-btn btn-add-to-cart" href="javascript:void(0);" id="add-to-cart-btn" data-product-id="{{ product.id }}" data-qty="1">
  892.                                 <i class="lnr lnr-cart"></i>
  893.                                 Ajouter au panier
  894.                             </a>
  895.                             <a class="icon_btn wishlist-btn" href="#" title="Ajouter aux favoris" 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 %}>
  896.                                 <i class="lnr lnr-heart"></i>
  897.                             </a>
  898.                             <a class="icon_btn comparison-btn" href="#" title="Comparer" data-product-id="{{ product.id }}" onclick="toggleComparison({{ product.id }}, this); return false;">
  899.                                 <i class="lnr lnr-sync"></i>
  900.                             </a>
  901.                         </div>
  903.                         <!-- Message de confirmation -->
  904.                         <div id="cart-message" class="alert alert-success mt-3" style="display: none;">
  905.                             <i class="lnr lnr-checkmark-circle"></i>
  906.                             Produit ajouté au panier avec succès !
  907.                         </div>
  908.                         <!-- ... existing code ... -->
  909.                     </div>
  910.                 </div>
  911.             </div>
  912.         </div>
  913.     </div>
  914.     <!--================End Single Product Area =================-->
  916.     <!--================Product Description Area =================-->
  917.     <section class="product_description_area">
  918.         <div class="container">
  919.             <ul class="nav nav-tabs" id="myTab" role="tablist">
  920.                 <li class="nav-item">
  921.                     <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Description</a>
  922.                 </li>
  923.                 <li class="nav-item">
  924.                     <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Spécifications</a>
  925.                 </li>
  926.                 <li class="nav-item">
  927.                     <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Commentaires</a>
  928.                 </li>
  929.                 <li class="nav-item">
  930.                     <a class="nav-link" id="review-tab" data-bs-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">Avis ({{ product.reviewCount ?? 0 }})</a>
  931.                 </li>
  932.             </ul>
  933.             <div class="tab-content" id="myTabContent">
  934.                 <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  935.                     <div class="description">
  936.                         {% if product.description %}
  937.                             <div class="product-description-content">
  938.                                 {{ product.description|raw|nl2br }}
  939.                             </div>
  940.                         {% else %}
  941.                             <p class="text-muted">Aucune description disponible pour ce produit.</p>
  942.                         {% endif %}
  943.                     </div>
  944.                 </div>
  945.                 <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  946.                     <div class="specification-table">
  947.                         {% if product.weight or product.length or product.width or product.height or product.attributes %}
  948.                             <div class="table-responsive">
  949.                                 <table class="table">
  950.                                     <tbody>
  951.                                         {% if product.sku %}
  952.                                             <tr>
  953.                                                 <td>
  954.                                                     <h5>Référence (SKU)</h5>
  955.                                                 </td>
  956.                                                 <td>
  957.                                                     <h5>{{ product.sku }}</h5>
  958.                                                 </td>
  959.                                             </tr>
  960.                                         {% endif %}
  961.                                         {% if product.barcode %}
  962.                                             <tr>
  963.                                                 <td>
  964.                                                     <h5>Code-barres</h5>
  965.                                                 </td>
  966.                                                 <td>
  967.                                                     <h5>{{ product.barcode }}</h5>
  968.                                                 </td>
  969.                                             </tr>
  970.                                         {% endif %}
  971.                                         {% if product.brand %}
  972.                                             <tr>
  973.                                                 <td>
  974.                                                     <h5>Marque</h5>
  975.                                                 </td>
  976.                                                 <td>
  977.                                                     <h5>{{ product.brand.name }}</h5>
  978.                                                 </td>
  979.                                             </tr>
  980.                                         {% endif %}
  981.                                         {% if product.category %}
  982.                                             <tr>
  983.                                                 <td>
  984.                                                     <h5>Catégorie</h5>
  985.                                                 </td>
  986.                                                 <td>
  987.                                                     <h5>{{ product.category.name }}</h5>
  988.                                                 </td>
  989.                                             </tr>
  990.                                         {% endif %}
  991.                                         {% if product.weight %}
  992.                                             <tr>
  993.                                                 <td>
  994.                                                     <h5>Poids</h5>
  995.                                                 </td>
  996.                                                 <td>
  997.                                                     <h5>{{ product.weight }}
  998.                                                         kg</h5>
  999.                                                 </td>
  1000.                                             </tr>
  1001.                                         {% endif %}
  1002.                                         {% if product.length or product.width or product.height %}
  1003.                                             <tr>
  1004.                                                 <td>
  1005.                                                     <h5>Dimensions</h5>
  1006.                                                 </td>
  1007.                                                 <td>
  1008.                                                     <h5>
  1009.                                                         {% if product.length %}
  1010.                                                             {{ product.length }}cm
  1011.                                                         {% endif %}
  1012.                                                         {% if product.width %}
  1013.                                                             ×
  1014.                                                             {{ product.width }}cm
  1015.                                                         {% endif %}
  1016.                                                         {% if product.height %}
  1017.                                                             ×
  1018.                                                             {{ product.height }}cm
  1019.                                                         {% endif %}
  1020.                                                     </h5>
  1021.                                                 </td>
  1022.                                             </tr>
  1023.                                         {% endif %}
  1024.                                         {% if product.stock is not null %}
  1025.                                             <tr>
  1026.                                                 <td>
  1027.                                                     <h5>Stock disponible</h5>
  1028.                                                 </td>
  1029.                                                 <td>
  1030.                                                     <h5>{{ product.stock }}
  1031.                                                         unité(s)</h5>
  1032.                                                 </td>
  1033.                                             </tr>
  1034.                                         {% endif %}
  1035.                                         {% if product.stockStatus %}
  1036.                                             <tr>
  1037.                                                 <td>
  1038.                                                     <h5>Statut</h5>
  1039.                                                 </td>
  1040.                                                 <td>
  1041.                                                     <h5>
  1042.                                                         {% if product.stockStatus == 'in_stock' %}
  1043.                                                             <span class="badge bg-success">En stock</span>
  1044.                                                         {% elseif product.stockStatus == 'out_of_stock' %}
  1045.                                                             <span class="badge bg-danger">Rupture de stock</span>
  1046.                                                         {% elseif product.stockStatus == 'backorder' %}
  1047.                                                             <span class="badge bg-warning">Sur commande</span>
  1048.                                                         {% else %}
  1049.                                                             {{ product.stockStatus }}
  1050.                                                         {% endif %}
  1051.                                                     </h5>
  1052.                                                 </td>
  1053.                                             </tr>
  1054.                                         {% endif %}
  1055.                                         {% if product.isDigital %}
  1056.                                             <tr>
  1057.                                                 <td>
  1058.                                                     <h5>Type</h5>
  1059.                                                 </td>
  1060.                                                 <td>
  1061.                                                     <h5>
  1062.                                                         <span class="badge bg-info">Produit digital</span>
  1063.                                                     </h5>
  1064.                                                 </td>
  1065.                                             </tr>
  1066.                                         {% endif %}
  1067.                                         {% if product.attributes is not empty %}
  1068.                                             {% for key, value in product.attributes %}
  1069.                                                 <tr>
  1070.                                                     <td>
  1071.                                                         <h5>{{ key|replace({'_': ' '})|title }}</h5>
  1072.                                                     </td>
  1073.                                                     <td>
  1074.                                                         <h5>{{ value }}</h5>
  1075.                                                     </td>
  1076.                                                 </tr>
  1077.                                             {% endfor %}
  1078.                                         {% endif %}
  1079.                                     </tbody>
  1080.                                 </table>
  1081.                             </div>
  1082.                         {% else %}
  1083.                             <p class="text-muted">Aucune spécification disponible pour ce produit.</p>
  1084.                         {% endif %}
  1085.                     </div>
  1086.                 </div>
  1087.                 <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  1088.                     <div class="comment-wrapper">
  1089.                         <div class="alert alert-info">
  1090.                             <i class="lnr lnr-info-circle"></i>
  1091.                             La fonctionnalité de commentaires sera bientôt disponible. Vous pourrez laisser des commentaires et poser des questions sur ce produit.
  1092.                         </div>
  1093.                         {% if app.user %}
  1094.                             <div class="review_box mt-4">
  1095.                                 <h4>Poser une question</h4>
  1096.                                 <form class="row contact_form" method="post" novalidate="novalidate">
  1097.                                     <div class="col-md-12">
  1098.                                         <div class="form-group">
  1099.                                             <textarea class="form-control" name="comment" id="comment" rows="3" placeholder="Votre question ou commentaire..." required></textarea>
  1100.                                         </div>
  1101.                                     </div>
  1102.                                     <div class="col-md-12 text-right">
  1103.                                         <button type="submit" class="btn primary-btn">Envoyer</button>
  1104.                                     </div>
  1105.                                 </form>
  1106.                             </div>
  1107.                         {% else %}
  1108.                             <p class="text-center">
  1109.                                 <a href="{{ path('ui_app_login') }}" class="primary-btn">Connectez-vous</a>
  1110.                                 pour poser une question ou laisser un commentaire.
  1111.                             </p>
  1112.                         {% endif %}
  1113.                     </div>
  1114.                 </div>
  1115.                 <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
  1116.                     <div class="review-wrapper">
  1117.                         <div class="row">
  1118.                             <div class="col-lg-6">
  1119.                                 <div class="row total_rate">
  1120.                                     <div class="col-6">
  1121.                                         <div class="box_total">
  1122.                                             <h5>Note globale</h5>
  1123.                                             <h4>{{ product.averageRating ? product.averageRating|number_format(1, '.', ',') : '0.0' }}</h4>
  1124.                                             <h6>({{ product.reviewCount ?? 0 }}
  1125.                                                 Avis)</h6>
  1126.                                         </div>
  1127.                                     </div>
  1128.                                     <div class="col-6">
  1129.                                         <div class="rating_list">
  1130.                                             <h3>Basé sur
  1131.                                                 {{ product.reviewCount ?? 0 }}
  1132.                                                 avis</h3>
  1133.                                             <div class="rating-summary">
  1134.                                                 {% if product.averageRating %}
  1135.                                                     <div class="rating-display mb-3">
  1136.                                                         {% for i in 1..5 %}
  1137.                                                             <i class="fa fa-star{% if i <= product.averageRating %}{% else %}-o{% endif %}" style="color: #ffa200; font-size: 1.2rem;"></i>
  1138.                                                         {% endfor %}
  1139.                                                         <span class="ms-2" style="font-size: 1.1rem; font-weight: bold;">{{ product.averageRating|number_format(1, '.', ',') }}
  1140.                                                             / 5.0</span>
  1141.                                                     </div>
  1142.                                                 {% else %}
  1143.                                                     <p class="text-muted">Aucune note disponible</p>
  1144.                                                 {% endif %}
  1145.                                             </div>
  1146.                                         </div>
  1147.                                     </div>
  1148.                                 </div>
  1149.                                 <div class="review_list">
  1150.                                     {% if product.reviewCount and product.reviewCount > 0 %}
  1151.                                         <div class="alert alert-info">
  1152.                                             <i class="lnr lnr-info-circle"></i>
  1153.                                             Le système d'affichage détaillé des avis sera disponible prochainement. 
  1154.                                                                                                                                                                                                                                                                         Note actuelle :
  1155.                                             {{ product.averageRating|number_format(1, '.', ',') }}
  1156.                                             / 5.0 basée sur
  1157.                                             {{ product.reviewCount }}
  1158.                                             avis.
  1159.                                         </div>
  1160.                                     {% else %}
  1161.                                         <div class="alert alert-info">
  1162.                                             <i class="lnr lnr-info-circle"></i>
  1163.                                             Aucun avis pour ce produit pour le moment. Soyez le premier à laisser un avis après votre achat !
  1164.                                         </div>
  1165.                                     {% endif %}
  1166.                                 </div>
  1167.                             </div>
  1168.                             <div class="col-lg-6">
  1169.                                 <div class="review_box">
  1170.                                     <h4>Laisser un avis</h4>
  1171.                                     {% if app.user %}
  1172.                                         <p class="text-muted">Vous pouvez laisser un avis après avoir acheté ce produit.</p>
  1173.                                         <form class="row contact_form" method="post" novalidate="novalidate">
  1174.                                             <div class="col-md-12">
  1175.                                                 <div class="form-group">
  1176.                                                     <label>Votre note</label>
  1177.                                                     <div class="rating-input mb-3" style="display: flex; gap: 5px; flex-direction: row-reverse; justify-content: flex-end;">
  1178.                                                         {% for i in 5..1 %}
  1179.                                                             <input type="radio" name="rating" id="rating{{ i }}" value="{{ i }}" required style="display: none;">
  1180.                                                             <label for="rating{{ i }}" class="star-label" style="cursor: pointer;">
  1181.                                                                 <i class="fa fa-star-o" style="color: #ccc; font-size: 1.5rem;"></i>
  1182.                                                             </label>
  1183.                                                         {% endfor %}
  1184.                                                     </div>
  1185.                                                 </div>
  1186.                                             </div>
  1187.                                             <div class="col-md-12">
  1188.                                                 <div class="form-group">
  1189.                                                     <textarea class="form-control" name="review" id="review" rows="5" placeholder="Votre avis..." required onfocus="this.placeholder = ''" onblur="this.placeholder = 'Votre avis...'"></textarea>
  1190.                                                 </div>
  1191.                                             </div>
  1192.                                             <div class="col-md-12 text-right">
  1193.                                                 <button type="submit" class="btn primary-btn">Publier l'avis</button>
  1194.                                             </div>
  1195.                                         </form>
  1196.                                     {% else %}
  1197.                                         <p class="text-center">
  1198.                                             <a href="{{ path('ui_app_login') }}" class="primary-btn">Connectez-vous</a>
  1199.                                             pour laisser un avis sur ce produit.
  1200.                                         </p>
  1201.                                     {% endif %}
  1202.                                 </div>
  1203.                             </div>
  1204.                         </div>
  1205.                     </div>
  1206.                 </div>
  1207.             </div>
  1208.         </div>
  1209.     </section>
  1210.     <!--================End Product Description Area =================-->
  1212.     <script>
  1213.         // Initialiser les onglets Bootstrap
  1214. document.addEventListener('DOMContentLoaded', function () { // Activer les onglets Bootstrap 5
  1215. const triggerTabList = document.querySelectorAll('#myTab button[data-bs-toggle="tab"]');
  1216. triggerTabList.forEach(triggerEl => {
  1217. const tabTrigger = new bootstrap.Tab(triggerEl);
  1218. triggerEl.addEventListener('click', event => {
  1219. event.preventDefault();
  1220. tabTrigger.show();
  1221. });
  1222. });
  1224. // Gestion des étoiles pour les avis
  1225. const ratingInputs = document.querySelectorAll('.rating-input input[type="radio"]');
  1226. const starLabels = document.querySelectorAll('.rating-input .star-label');
  1228. ratingInputs.forEach((input, index) => {
  1229. input.addEventListener('change', function () {
  1230. const rating = parseInt(this.value);
  1231. starLabels.forEach((label) => { // Trouver l'input associé à ce label
  1232. const labelInput = label.previousElementSibling;
  1233. if (labelInput && labelInput.type === 'radio') {
  1234. const starValue = parseInt(labelInput.value);
  1235. const star = label.querySelector('i');
  1236. if (starValue <= rating) {
  1237. star.style.color = '#ffa200';
  1238. star.classList.remove('fa-star-o');
  1239. star.classList.add('fa-star');
  1240. } else {
  1241. star.style.color = '#ccc';
  1242. star.classList.remove('fa-star');
  1243. star.classList.add('fa-star-o');
  1244. }
  1245. }
  1246. });
  1247. });
  1248. });
  1250. // Pré-remplir les étoiles au survol
  1251. starLabels.forEach((label) => {
  1252. label.addEventListener('mouseenter', function () { // Trouver l'input associé à ce label
  1253. const input = label.previousElementSibling;
  1254. if (input && input.type === 'radio') {
  1255. const rating = parseInt(input.value);
  1256. starLabels.forEach((l) => {
  1257. const lInput = l.previousElementSibling;
  1258. if (lInput && lInput.type === 'radio') {
  1259. const starValue = parseInt(lInput.value);
  1260. const star = l.querySelector('i');
  1261. if (starValue <= rating) {
  1262. star.style.color = '#ffa200';
  1263. star.classList.remove('fa-star-o');
  1264. star.classList.add('fa-star');
  1265. } else {
  1266. star.style.color = '#ccc';
  1267. star.classList.remove('fa-star');
  1268. star.classList.add('fa-star-o');
  1269. }
  1270. }
  1271. });
  1272. }
  1273. });
  1274. });
  1276. const ratingContainer = document.querySelector('.rating-input');
  1277. if (ratingContainer) {
  1278. ratingContainer.addEventListener('mouseleave', function () {
  1279. const checkedInput = document.querySelector('.rating-input input[type="radio"]:checked');
  1280. if (checkedInput) {
  1281. checkedInput.dispatchEvent(new Event('change'));
  1282. } else {
  1283. starLabels.forEach(label => {
  1284. const star = label.querySelector('i');
  1285. star.style.color = '#ccc';
  1286. });
  1287. }
  1288. });
  1289. }
  1290. });
  1291.     </script>
  1293.     {% if youMightAlsoLike|length > 0 %}
  1294.         <section class="related-product-area section_gap_bottom py-5" style="background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);">
  1295.             <div class="container">
  1296.                 <div class="row justify-content-center">
  1297.                     <div class="col-lg-8 text-center">
  1298.                         <div class="section-title">
  1299.                             <h2 class="fw-bold mb-3" style="font-size: 2.5rem; color: #2c3e50;">Vous pourriez aussi aimer</h2>
  1300.                             <p class="text-muted" style="font-size: 1.1rem;">Produits sélectionnés pour vous en fonction de vos préférences</p>
  1301.                         </div>
  1302.                     </div>
  1303.                 </div>
  1304.                 <div class="row g-4">
  1305.                     {% for relatedProduct in youMightAlsoLike %}
  1306.                         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-4 d-flex align-items-stretch">
  1307.                             {% include 'home/_single_product_card.html.twig' with {'product': relatedProduct} %}
  1308.                         </div>
  1309.                     {% endfor %}
  1310.                 </div>
  1311.             </div>
  1312.         </section>
  1314.         <style>
  1315.             .modern-product-card {
  1316.                 background: #ffffff;
  1317.                 border-radius: 16px;
  1318.                 overflow: hidden;
  1319.                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  1320.                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1321.                 height: 100%;
  1322.                 display: flex;
  1323.                 flex-direction: column;
  1324.                 position: relative;
  1325.             }
  1327.             .modern-product-card:hover {
  1328.                 transform: translateY(-8px);
  1329.                 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  1330.             }
  1332.             .product-image-wrapper {
  1333.                 position: relative;
  1334.                 width: 100%;
  1335.                 height: 250px;
  1336.                 overflow: hidden;
  1337.                 background: #f8f9fa;
  1338.             }
  1340.             .product-image {
  1341.                 width: 100%;
  1342.                 height: 100%;
  1343.                 object-fit: cover;
  1344.                 transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1345.             }
  1347.             .modern-product-card:hover .product-image {
  1348.                 transform: scale(1.1);
  1349.             }
  1351.             .product-overlay {
  1352.                 position: absolute;
  1353.                 top: 0;
  1354.                 left: 0;
  1355.                 right: 0;
  1356.                 bottom: 0;
  1357.                 background: rgba(0, 0, 0, 0.5);
  1358.                 display: flex;
  1359.                 align-items: center;
  1360.                 justify-content: center;
  1361.                 opacity: 0;
  1362.                 transition: opacity 0.3s ease;
  1363.             }
  1365.             .modern-product-card:hover .product-overlay {
  1366.                 opacity: 1;
  1367.             }
  1369.             .view-product-btn {
  1370.                 color: white;
  1371.                 padding: 12px 24px;
  1372.                 background: rgba(255, 255, 255, 0.2);
  1373.                 backdrop-filter: blur(10px);
  1374.                 border-radius: 8px;
  1375.                 font-weight: 600;
  1376.                 display: inline-flex;
  1377.                 align-items: center;
  1378.                 gap: 8px;
  1379.                 transition: all 0.3s ease;
  1380.             }
  1382.             .view-product-btn:hover {
  1383.                 background: rgba(255, 255, 255, 0.3);
  1384.                 transform: scale(1.05);
  1385.             }
  1387.             .product-badge {
  1388.                 position: absolute;
  1389.                 top: 12px;
  1390.                 right: 12px;
  1391.                 z-index: 2;
  1392.             }
  1394.             .badge-discount {
  1395.                 background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  1396.                 color: white;
  1397.                 padding: 6px 12px;
  1398.                 border-radius: 20px;
  1399.                 font-size: 0.75rem;
  1400.                 font-weight: 700;
  1401.                 box-shadow: 0 2px 8px rgba(238, 90, 111, 0.4);
  1402.             }
  1404.             .product-info {
  1405.                 padding: 20px;
  1406.                 flex-grow: 1;
  1407.                 display: flex;
  1408.                 flex-direction: column;
  1409.             }
  1411.             .product-title {
  1412.                 margin: 0 0 8px 0;
  1413.                 font-size: 1rem;
  1414.                 font-weight: 600;
  1415.                 line-height: 1.4;
  1416.                 height: 2.8em;
  1417.                 overflow: hidden;
  1418.                 display: -webkit-box;
  1419.                 -webkit-line-clamp: 2;
  1420.                 -webkit-box-orient: vertical;
  1421.             }
  1423.             .product-title a {
  1424.                 color: #2c3e50;
  1425.                 text-decoration: none;
  1426.                 transition: color 0.3s ease;
  1427.             }
  1429.             .product-title a:hover {
  1430.                 color: #ffa200;
  1431.             }
  1433.             .product-shop {
  1434.                 font-size: 0.85rem;
  1435.                 color: #6c757d;
  1436.                 margin-bottom: 12px;
  1437.                 display: flex;
  1438.                 align-items: center;
  1439.                 gap: 6px;
  1440.             }
  1442.             .product-shop i {
  1443.                 font-size: 0.9rem;
  1444.             }
  1446.             .shop-link {
  1447.                 color: #6c757d;
  1448.                 text-decoration: none;
  1449.                 transition: color 0.3s ease;
  1450.             }
  1452.             .shop-link:hover {
  1453.                 color: #ffa200;
  1454.             }
  1456.             .product-price-wrapper {
  1457.                 margin-bottom: 16px;
  1458.                 display: flex;
  1459.                 align-items: center;
  1460.                 gap: 8px;
  1461.                 flex-wrap: wrap;
  1462.             }
  1464.             .product-price {
  1465.                 font-size: 1.25rem;
  1466.                 font-weight: 700;
  1467.                 color: #ffa200;
  1468.             }
  1470.             .product-compare-price {
  1471.                 font-size: 0.9rem;
  1472.                 color: #adb5bd;
  1473.                 text-decoration: line-through;
  1474.             }
  1476.             .product-actions {
  1477.                 margin-top: auto;
  1478.             }
  1480.             /* Styles pour les boutons de la section "Vous pourriez aussi aimer" uniquement */
  1481.             .modern-product-card .btn-add-to-cart {
  1482.                 width: 100%;
  1483.                 padding: 12px;
  1484.                 background: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  1485.                 color: white;
  1486.                 border: none;
  1487.                 border-radius: 10px;
  1488.                 font-weight: 600;
  1489.                 display: flex;
  1490.                 align-items: center;
  1491.                 justify-content: center;
  1492.                 gap: 8px;
  1493.                 text-decoration: none;
  1494.                 transition: all 0.3s ease;
  1495.                 cursor: pointer;
  1496.             }
  1498.             .modern-product-card .btn-add-to-cart:hover {
  1499.                 background: linear-gradient(135deg, #e8910a 0%, #d6820a 100%);
  1500.                 transform: translateY(-2px);
  1501.                 box-shadow: 0 4px 12px rgba(255, 162, 0, 0.4);
  1502.                 color: white;
  1503.             }
  1505.             /* Le bouton principal garde son design original */
  1506.             .card_area .btn-add-to-cart {
  1507.                 width: auto;
  1508.                 display: inline-flex;
  1509.             }
  1511.             .modern-product-card .btn-add-to-cart:active {
  1512.                 transform: translateY(0);
  1513.             }
  1515.             .modern-product-card .btn-add-to-cart i {
  1516.                 font-size: 1.1rem;
  1517.             }
  1519.             /* Responsive adjustments */
  1520.             @media (max-width: 768px) {
  1521.                 .product-image-wrapper {
  1522.                     height: 200px;
  1523.                 }
  1525.                 .product-info {
  1526.                     padding: 16px;
  1527.                 }
  1529.                 .product-title {
  1530.                     font-size: 0.95rem;
  1531.                 }
  1533.                 .product-price {
  1534.                     font-size: 1.1rem;
  1535.                 }
  1537.                 .section-title h2 {
  1538.                     font-size: 2rem !important;
  1539.                 }
  1540.             }
  1542.             @media (max-width: 576px) {
  1543.                 .product-image-wrapper {
  1544.                     height: 190px;
  1545.                 }
  1547.                 .product-info {
  1548.                     padding: 14px;
  1549.                 }
  1551.                 .btn-add-to-cart {
  1552.                     padding: 10px;
  1553.                     font-size: 0.9rem;
  1554.                 }
  1555.             }
  1557.             /* Ensure fixed height for cards */
  1558.             .col-6.col-md-4.col-lg-3 {
  1559.                 display: flex;
  1560.             }
  1562.             .modern-product-card {
  1563.                 width: 100%;
  1564.             }
  1566.             /* Loading state for add to cart button */
  1567.             .btn-add-to-cart.loading {
  1568.                 opacity: 0.7;
  1569.                 pointer-events: none;
  1570.             }
  1572.             .btn-add-to-cart.loading i {
  1573.                 animation: spin 1s linear infinite;
  1574.             }
  1576.             @keyframes spin {
  1577.                 from { transform: rotate(0deg); }
  1578.                 to { transform: rotate(360deg); }
  1579.             }
  1581.             /* Success state - vert pour tous les boutons */
  1582.             .btn-add-to-cart.success {
  1583.                 background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  1584.             }
  1586.             /* Le bouton principal garde son style original même en success */
  1587.             .card_area .btn-add-to-cart.success {
  1588.                 background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  1589.             }
  1590.         </style>
  1592.         <script>
  1593.             // Gestion des boutons d'ajout au panier (principal et section "Vous pourriez aussi aimer")
  1594.             document.addEventListener('DOMContentLoaded', function() {
  1595.                 const addToCartButtons = document.querySelectorAll('.btn-add-to-cart');
  1596.                 
  1597.                 addToCartButtons.forEach(button => {
  1598.                     button.addEventListener('click', function(e) {
  1599.                         e.preventDefault();
  1600.                         e.stopPropagation();
  1601.                         
  1602.                         const productId = this.getAttribute('data-product-id');
  1603.                         
  1604.                         // Pour le bouton principal, récupérer la quantité depuis l'input sst si disponible
  1605.                         let qty = this.getAttribute('data-qty') || '1';
  1606.                         if (this.id === 'add-to-cart-btn') {
  1607.                             const qtyInput = document.getElementById('sst');
  1608.                             if (qtyInput) {
  1609.                                 qty = parseInt(qtyInput.value) || 1;
  1610.                             }
  1611.                         }
  1612.                         
  1613.                         if (!productId) {
  1614.                             console.error('Product ID manquant');
  1615.                             return false;
  1616.                         }
  1618.                         // Sauvegarder le contenu original
  1619.                         const originalContent = this.innerHTML;
  1620.                         
  1621.                         // Désactiver le bouton et afficher le loading
  1622.                         this.classList.add('loading');
  1623.                         if (this.id === 'add-to-cart-btn') {
  1624.                             this.style.pointerEvents = 'none';
  1625.                             this.innerHTML = '<i class="lnr lnr-spinner"></i> Ajout en cours...';
  1626.                         } else {
  1627.                             this.innerHTML = '<i class="ti ti-loader-2"></i> <span>Ajout...</span>';
  1628.                         }
  1629.                         
  1630.                         // Construire le body de la requête
  1631.                         let body = 'productId=' + encodeURIComponent(productId) + '&qty=' + encodeURIComponent(qty);
  1632.                         
  1633.                         // Pour le bouton principal, vérifier aussi le prix unitaire pour les prix de gros
  1634.                         if (this.id === 'add-to-cart-btn') {
  1635.                             const unitPriceInput = document.getElementById('unit-price-input');
  1636.                             const unitPrice = unitPriceInput ? unitPriceInput.value : '';
  1637.                             if (unitPrice) {
  1638.                                 body += '&unitPrice=' + encodeURIComponent(unitPrice);
  1639.                             }
  1640.                         }
  1641.                         
  1642.                         // Faire la requête AJAX
  1643.                         fetch('{{ path("ui_cart_add") }}', {
  1644.                             method: 'POST',
  1645.                             headers: {
  1646.                                 'Content-Type': 'application/x-www-form-urlencoded',
  1647.                                 'X-Requested-With': 'XMLHttpRequest'
  1648.                             },
  1649.                             body: body
  1650.                         })
  1651.                         .then(response => {
  1652.                             if (!response.ok) {
  1653.                                 throw new Error('Erreur réseau: ' + response.status);
  1654.                             }
  1655.                             return response.json();
  1656.                         })
  1657.                         .then(data => {
  1658.                             if (data.ok || data.success) {
  1659.                                 // Succès - Afficher l'animation de succès
  1660.                                 this.classList.remove('loading');
  1661.                                 this.classList.add('success');
  1662.                                 
  1663.                                 if (this.id === 'add-to-cart-btn') {
  1664.                                     this.style.background = 'linear-gradient(135deg, #28a745 0%, #20c997 100%)';
  1665.                                     this.innerHTML = '<i class="lnr lnr-checkmark-circle"></i> Ajouté !';
  1666.                                     
  1667.                                     // Afficher le message de confirmation si présent
  1668.                                     const cartMessage = document.getElementById('cart-message');
  1669.                                     if (cartMessage) {
  1670.                                         cartMessage.style.display = 'block';
  1671.                                         setTimeout(() => {
  1672.                                             cartMessage.style.display = 'none';
  1673.                                         }, 3000);
  1674.                                     }
  1675.                                 } else {
  1676.                                     this.innerHTML = '<i class="ti ti-check"></i> <span>Ajouté !</span>';
  1677.                                 }
  1678.                                 
  1679.                                 // Mettre à jour le compteur du panier si présent
  1680.                                 const cartBadge = document.querySelector('.cart-badge');
  1681.                                 if (cartBadge) {
  1682.                                     cartBadge.textContent = data.totalQty || data.quantity || 0;
  1683.                                     // Animation du badge
  1684.                                     cartBadge.style.transform = 'scale(1.2)';
  1685.                                     setTimeout(() => {
  1686.                                         cartBadge.style.transform = 'scale(1)';
  1687.                                     }, 300);
  1688.                                 }
  1689.                                 
  1690.                                 // Afficher une notification si la fonction existe
  1691.                                 if (typeof showCustomAlert === 'function') {
  1692.                                     showCustomAlert('Produit ajouté au panier avec succès !', 'success');
  1693.                                 }
  1694.                                 
  1695.                                 // Restaurer le bouton après 2 secondes
  1696.                                 setTimeout(() => {
  1697.                                     this.classList.remove('success');
  1698.                                     if (this.id === 'add-to-cart-btn') {
  1699.                                         this.style.background = '';
  1700.                                         this.style.pointerEvents = 'auto';
  1701.                                     }
  1702.                                     this.innerHTML = originalContent;
  1703.                                 }, 2000);
  1704.                             } else {
  1705.                                 // Erreur
  1706.                                 this.classList.remove('loading');
  1707.                                 if (this.id === 'add-to-cart-btn') {
  1708.                                     this.style.pointerEvents = 'auto';
  1709.                                 }
  1710.                                 this.innerHTML = originalContent;
  1711.                                 
  1712.                                 const message = data.message || 'Erreur lors de l\'ajout au panier';
  1713.                                 if (typeof showCustomAlert === 'function') {
  1714.                                     showCustomAlert(message, 'error');
  1715.                                 } else {
  1716.                                     alert(message);
  1717.                                 }
  1718.                             }
  1719.                         })
  1720.                         .catch(error => {
  1721.                             console.error('Erreur:', error);
  1722.                             this.classList.remove('loading');
  1723.                             if (this.id === 'add-to-cart-btn') {
  1724.                                 this.style.pointerEvents = 'auto';
  1725.                             }
  1726.                             this.innerHTML = originalContent;
  1727.                             
  1728.                             if (typeof showCustomAlert === 'function') {
  1729.                                 showCustomAlert('Erreur lors de l\'ajout au panier. Veuillez réessayer.', 'error');
  1730.                             } else {
  1731.                                 alert('Erreur lors de l\'ajout au panier. Veuillez réessayer.');
  1732.                             }
  1733.                         });
  1734.                         
  1735.                         return false;
  1736.                     });
  1737.                 });
  1738.             });
  1739.         </script>
  1740.     {% endif %}
  1743.     <script src="js/vendor/jquery-2.2.4.min.js"></script>
  1744.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  1745.     <script src="js/vendor/bootstrap.min.js"></script>
  1746.     <script src="js/jquery.ajaxchimp.min.js"></script>
  1747.     <script src="js/jquery.nice-select.min.js"></script>
  1748.     <script src="js/jquery.sticky.js"></script>
  1749.     <script src="js/nouislider.min.js"></script>
  1750.     <script src="js/jquery.magnific-popup.min.js"></script>
  1751.     <script src="js/owl.carousel.min.js"></script>
  1752.     <!--gmaps Js-->
  1753.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script>
  1754.     <script src="js/gmaps.min.js"></script>
  1755.     <script src="js/main.js"></script>
  1756.     <script>
  1757.         // Le gestionnaire d'événements pour les boutons d'ajout au panier est déjà défini
  1758.         // dans la section "Vous pourriez aussi aimer" et gère maintenant aussi le bouton principal
  1760. // Gestion de la galerie d'images
  1761. document.addEventListener('DOMContentLoaded', function () {
  1762. const thumbnails = document.querySelectorAll('.thumbnail-item');
  1763. const mainImage = document.getElementById('main-product-image');
  1764. const currentIndex = document.getElementById('current-image-index');
  1765. const totalImages = document.getElementById('total-images');
  1767. // Fonction pour changer l'image principale
  1768. function changeMainImage(thumbnail, index) {
  1769. const imageUrl = thumbnail.getAttribute('data-image');
  1770. if (mainImage && imageUrl) {
  1771. mainImage.style.opacity = '0';
  1772. setTimeout(() => {
  1773. mainImage.src = imageUrl;
  1774. mainImage.style.opacity = '1';
  1775. // Reset zoom
  1776. mainImage.style.transform = 'scale(1)';
  1777. mainImage.style.transformOrigin = 'center center';
  1778. }, 150);
  1779. }
  1781. // Mettre à jour l'indicateur
  1782. if (currentIndex) {
  1783. currentIndex.textContent = index + 1;
  1784. }
  1785. }
  1787. // Ajouter le zoom sur l'image principale au survol
  1788. const mainImageContainer = document.querySelector('.product-main-image-wrapper');
  1789. if (mainImageContainer && mainImage) {
  1790.     mainImageContainer.addEventListener('mousemove', function(e) {
  1791.         const rect = mainImageContainer.getBoundingClientRect();
  1792.         const x = e.clientX - rect.left;
  1793.         const y = e.clientY - rect.top;
  1794.         
  1795.         const xPercent = (x / rect.width) * 100;
  1796.         const yPercent = (y / rect.height) * 100;
  1797.         
  1798.         mainImage.style.transformOrigin = `${xPercent}% ${yPercent}%`;
  1799.         mainImage.style.transform = 'scale(2.2)'; // Zoom Alibaba-style
  1800.     });
  1801.     
  1802.     mainImageContainer.addEventListener('mouseleave', function() {
  1803.         mainImage.style.transformOrigin = 'center center';
  1804.         mainImage.style.transform = 'scale(1)';
  1805.     });
  1806. }
  1808. // Gérer le survol sur les miniatures (sélection permanente au survol)
  1809. thumbnails.forEach((thumbnail, index) => {
  1810. thumbnail.addEventListener('mouseenter', function () { // Retirer toutes les sélections permanentes
  1811. thumbnails.forEach(t => {
  1812. t.classList.remove('active', 'permanently-active');
  1813. });
  1815. // Ajouter active et permanently-active à la miniature survolée
  1816. thumbnail.classList.add('active', 'permanently-active');
  1818. // Changer l'image principale
  1819. changeMainImage(thumbnail, index);
  1820. });
  1821. });
  1823. // Gérer le clic sur les miniatures (sélection permanente)
  1824. thumbnails.forEach((thumbnail, index) => {
  1825. thumbnail.addEventListener('click', function () { // Retirer la classe active et permanently-active de toutes les miniatures
  1826. thumbnails.forEach(t => {
  1827. t.classList.remove('active', 'permanently-active');
  1828. });
  1830. // Ajouter les classes active et permanently-active à la miniature cliquée
  1831. thumbnail.classList.add('active', 'permanently-active');
  1833. // Changer l'image principale
  1834. changeMainImage(thumbnail, index);
  1835. });
  1836. });
  1838. // Gestion du carrousel de miniatures avec taille fixe carrée
  1839. const navUpBtn = document.getElementById('thumbnail-nav-up');
  1840. const navDownBtn = document.getElementById('thumbnail-nav-down');
  1841. const thumbnailsContainer = document.getElementById('product-thumbnails');
  1842. const thumbnailsWrapper = document.getElementById('thumbnails-wrapper');
  1843. const thumbnailItems = Array.from(document.querySelectorAll('.thumbnail-item'));
  1845. let currentThumbnailOffset = 0;
  1846. const thumbnailHeight = 90;
  1847. // 80px (hauteur) + 10px (gap)
  1848. // Calculer la hauteur disponible pour les miniatures dynamiquement
  1849. const thumbnailsEl = document.getElementById('product-thumbnails');
  1850. let containerHeight = thumbnailsEl ? thumbnailsEl.clientHeight : 520; // Hauteur par défaut si non disponible
  1851. let visibleThumbnails = Math.floor(containerHeight / thumbnailHeight);
  1853. // Recalculer après le chargement pour avoir la vraie hauteur
  1854. setTimeout(() => {
  1855. if (thumbnailsEl) {
  1856. containerHeight = thumbnailsEl.clientHeight;
  1857. visibleThumbnails = Math.floor(containerHeight / thumbnailHeight);
  1858. updateThumbnailsPosition();
  1859. }
  1860. }, 100);
  1862. function getCurrentIndex() {
  1863. const current = document.querySelector('.thumbnail-item.permanently-active') || document.querySelector('.thumbnail-item.active');
  1864. if (! current) 
  1865. return 0;
  1869. const idxAttr = current.getAttribute('data-index');
  1870. return idxAttr ? parseInt(idxAttr, 10) : Math.max(0, thumbnailItems.indexOf(current));
  1871. }
  1873. function selectThumbnailByIndex(newIndex) {
  1874. if (! thumbnailItems.length) 
  1875. return;
  1879. const total = thumbnailItems.length;
  1880. if (newIndex < 0) 
  1881. newIndex = 0;
  1885. if (newIndex > total - 1) 
  1886. newIndex = total - 1;
  1890. // Reset classes
  1891. thumbnailItems.forEach(t => t.classList.remove('active', 'permanently-active'));
  1892. const target = thumbnailItems[newIndex];
  1893. if (! target) 
  1894. return;
  1898. target.classList.add('active', 'permanently-active');
  1899. changeMainImage(target, newIndex);
  1901. // Ajuster le carrousel pour voir la miniature sélectionnée
  1902. ensureThumbnailVisible(newIndex);
  1903. }
  1905. function ensureThumbnailVisible(index) {
  1906. if (! thumbnailsWrapper || ! thumbnailItems.length) 
  1907. return;
  1911. const targetTop = index * thumbnailHeight;
  1912. const visibleTop = currentThumbnailOffset * thumbnailHeight;
  1913. const visibleBottom = visibleTop + containerHeight;
  1915. // Si la miniature est au-dessus de la zone visible
  1916. if (targetTop < visibleTop) {
  1917. currentThumbnailOffset = index;
  1918. updateThumbnailsPosition();
  1919. }
  1920. // Si la miniature est en-dessous de la zone visible 
  1921. else if (targetTop + thumbnailHeight > visibleBottom) {
  1922. currentThumbnailOffset = Math.max(0, index - visibleThumbnails + 1);
  1923. updateThumbnailsPosition();
  1924. }
  1925. }
  1927. function updateThumbnailsPosition() {
  1928. if (!thumbnailsWrapper) 
  1929. return;
  1933. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  1934. currentThumbnailOffset = Math.max(0, Math.min(currentThumbnailOffset, maxOffset));
  1935. thumbnailsWrapper.style.transform = `translateY(-${
  1936. currentThumbnailOffset * thumbnailHeight
  1937. }px)`;
  1938. updateNavButtons();
  1939. }
  1941. function updateNavButtons() {
  1942. if (!thumbnailItems.length) 
  1943. return;
  1947. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  1948. const canScrollUp = currentThumbnailOffset > 0;
  1949. const canScrollDown = currentThumbnailOffset < maxOffset;
  1951. if (navUpBtn) {
  1952. navUpBtn.classList.toggle('disabled', ! canScrollUp);
  1953. }
  1954. if (navDownBtn) {
  1955. navDownBtn.classList.toggle('disabled', ! canScrollDown);
  1956. }
  1957. }
  1959. // Navigation avec les boutons
  1960. if(navUpBtn) {
  1961. navUpBtn.addEventListener('click', function (e) {
  1962. e.preventDefault();
  1963. if (currentThumbnailOffset > 0) {
  1964. currentThumbnailOffset --;
  1965. updateThumbnailsPosition();
  1966. }
  1967. });
  1968. }
  1970. if(navDownBtn) {
  1971. navDownBtn.addEventListener('click', function (e) {
  1972. e.preventDefault();
  1973. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  1974. if (currentThumbnailOffset < maxOffset) {
  1975. currentThumbnailOffset ++;
  1976. updateThumbnailsPosition();
  1977. }
  1978. });
  1979. }
  1981. // Initialiser le carrousel
  1982. if(thumbnailsWrapper && thumbnailItems.length > 0) {
  1983. updateThumbnailsPosition();
  1984. // S'assurer que la première miniature est visible
  1985. ensureThumbnailVisible(0);
  1986. }
  1988. // Navigation sur l'image principale
  1989. const mainPrev = document.getElementById('main-image-prev');
  1990. const mainNext = document.getElementById('main-image-next');
  1991. if(mainPrev) {
  1992. mainPrev.addEventListener('click', function (e) {
  1993. e.preventDefault();
  1994. const idx = getCurrentIndex();
  1995. selectThumbnailByIndex(idx - 1);
  1996. });
  1997. }
  1998. if(mainNext) {
  1999. mainNext.addEventListener('click', function (e) {
  2000. e.preventDefault();
  2001. const idx = getCurrentIndex();
  2002. selectThumbnailByIndex(idx + 1);
  2003. });
  2004. }
  2005. }
  2006. );
  2008. // --- Prix de gros : calcul du prix unitaire dynamique ---
  2009. (function () {
  2010. const bulk = document.getElementById('bulk-pricing');
  2011. const qtyInputEl = document.getElementById('sst');
  2012. const unitPriceSpan = document.getElementById('unit-price-value');
  2013. const mainUnitPriceSpan = document.getElementById('main-unit-price');
  2014. const totalPriceSpan = document.getElementById('total-price-value');
  2015. const savingsAmountSpan = document.getElementById('savings-amount');
  2016. const savingsPercentSpan = document.getElementById('savings-percent');
  2017. const unitPriceInput = document.getElementById('unit-price-input');
  2018. const tierRowsTbody = document.getElementById('bulk-tier-rows');
  2019. if (! bulk || ! qtyInputEl || ! unitPriceSpan || ! mainUnitPriceSpan || ! unitPriceInput) 
  2020. return;
  2024. let tiers = [];
  2025. try {
  2026. tiers = JSON.parse(bulk.getAttribute('data-tiers') || '[]');
  2027. } catch (e) {
  2028. tiers = [];
  2029. }
  2030. if (!Array.isArray(tiers) || tiers.length === 0) 
  2031. return;
  2035. tiers.sort(function (a, b) {
  2036. return(a.min || 0) - (b.min || 0);
  2037. });
  2038. const basePrice = (function () {
  2039. const one = tiers.find(t => (t.min || 0) <= 1);
  2040. return one ? parseFloat(one.price) : parseFloat(tiers[0].price);
  2041. })();
  2042. function getUnitPriceForQty(qty) {
  2043. let candidate = tiers[0] || null;
  2044. for (let i = 0; i < tiers.length; i++) {
  2045. if (qty >= (tiers[i].min || 1)) {
  2046. candidate = tiers[i];
  2047. }
  2048. }
  2049. return candidate ? parseFloat(candidate.price) : (tiers[0] ? parseFloat(tiers[0].price) : basePrice);
  2050. }
  2051. function formatPrice(val) {
  2052. return(parseFloat(val) || 0).toFixed(2);
  2053. }
  2054. function highlightActiveTier(qty) {
  2055. if (! tierRowsTbody) 
  2056. return;
  2060. const rows = tierRowsTbody.querySelectorAll('tr');
  2061. rows.forEach(r => r.classList.remove('table-warning'));
  2062. let activeRow = null;
  2063. rows.forEach(r => {
  2064. const m = parseInt(r.getAttribute('data-min'), 10) || 1;
  2065. if (qty >= m) 
  2066. activeRow = r;
  2070. });
  2071. if (activeRow) 
  2072. activeRow.classList.add('table-warning');
  2076. }
  2077. function refreshPrices() {
  2078. const qty = Math.max(1, parseInt(qtyInputEl.value, 10) || 1);
  2079. const unit = getUnitPriceForQty(qty);
  2080. const total = unit * qty;
  2081. const saveAmount = Math.max(0, (basePrice - unit) * qty);
  2082. const savePercent = Math.max(0, 100 * (basePrice - unit) / basePrice);
  2083. unitPriceSpan.textContent = formatPrice(unit) + ' HTG';
  2084. mainUnitPriceSpan.textContent = formatPrice(unit);
  2085. if (totalPriceSpan) 
  2086. totalPriceSpan.textContent = formatPrice(total);
  2090. if (savingsAmountSpan) 
  2091. savingsAmountSpan.textContent = formatPrice(saveAmount);
  2095. if (savingsPercentSpan) 
  2096. savingsPercentSpan.textContent = Math.round(savePercent);
  2100. unitPriceInput.value = formatPrice(unit);
  2101. highlightActiveTier(qty);
  2102. }
  2103. qtyInputEl.addEventListener('input', refreshPrices);
  2104. qtyInputEl.addEventListener('change', refreshPrices);
  2105. setTimeout(refreshPrices, 50);
  2106. setInterval(refreshPrices, 350);
  2107. })();
  2108. // --- /Prix de gros ---
  2110. // Injection du prix unitaire dans l'ajout au panier
  2111. (function () {
  2112. const addToCartBtn = document.getElementById('add-to-cart-btn');
  2113. if (! addToCartBtn) 
  2114. return;
  2118. addToCartBtn.addEventListener('click', function () {
  2119. const unitPriceInput = document.getElementById('unit-price-input');
  2120. if (unitPriceInput) {
  2121. addToCartBtn.setAttribute('data-unit-price', unitPriceInput.value);
  2122. }
  2123. });
  2124. })();
  2126. // Fonction pour ouvrir le modal de zoom avec loader
  2127. function openImageZoom () {
  2128. const mainImage = document.getElementById('main-product-image');
  2129. const zoomModal = document.getElementById('image-zoom-modal');
  2130. const zoomImage = document.getElementById('zoom-modal-image');
  2131. const zoomLoader = document.getElementById('zoom-loader');
  2133. if (mainImage && zoomModal && zoomImage) { // Afficher le loader
  2134. if (zoomLoader) {
  2135. zoomLoader.style.display = 'flex';
  2136. }
  2138. // Masquer l'image et réinitialiser
  2139. zoomImage.classList.remove('loaded');
  2140. zoomImage.style.opacity = '0';
  2142. // Ouvrir le modal avec animation
  2143. zoomModal.classList.add('active');
  2144. document.body.style.overflow = 'hidden';
  2146. // Charger l'image
  2147. const imageUrl = mainImage.src;
  2148. const tempImage = new Image();
  2150. tempImage.onload = function () {
  2151. zoomImage.src = imageUrl;
  2152. // Masquer le loader et afficher l'image avec transition
  2153. setTimeout(function () {
  2154. if (zoomLoader) {
  2155. zoomLoader.style.display = 'none';
  2156. }
  2157. zoomImage.classList.add('loaded');
  2158. zoomImage.style.opacity = '1';
  2159. }, 200);
  2160. };
  2162. tempImage.onerror = function () {
  2163. if (zoomLoader) {
  2164. zoomLoader.style.display = 'none';
  2165. }
  2166. zoomImage.src = imageUrl;
  2167. zoomImage.classList.add('loaded');
  2168. };
  2170. tempImage.src = imageUrl;
  2171. }
  2172. }
  2174. // Fonction pour fermer le modal de zoom avec animation
  2175. function closeImageZoom () {
  2176. const zoomModal = document.getElementById('image-zoom-modal');
  2177. const zoomImage = document.getElementById('zoom-modal-image');
  2178. const zoomLoader = document.getElementById('zoom-loader');
  2180. if (zoomModal) { // Animation de fermeture
  2181. if (zoomImage) {
  2182. zoomImage.style.opacity = '0';
  2183. zoomImage.classList.remove('loaded');
  2184. }
  2186. setTimeout(function () {
  2187. zoomModal.classList.remove('active');
  2188. document.body.style.overflow = 'auto';
  2190. // Réinitialiser le loader pour la prochaine ouverture
  2191. if (zoomLoader) {
  2192. zoomLoader.style.display = 'none';
  2193. }
  2194. }, 200);
  2195. }
  2196. }
  2198. // Fermer le modal en cliquant en dehors
  2199. document.addEventListener('DOMContentLoaded', function () {
  2200. const zoomModal = document.getElementById('image-zoom-modal');
  2201. if (zoomModal) {
  2202. zoomModal.addEventListener('click', function (e) {
  2203. if (e.target === zoomModal) {
  2204. closeImageZoom();
  2205. }
  2206. });
  2207. }
  2208. });
  2209.     </script>
  2211.     <!-- Modal de zoom d'image -->
  2212.     <div id="image-zoom-modal" class="image-zoom-modal">
  2213.         <span class="close-zoom" onclick="closeImageZoom()" title="Fermer">&times;</span>
  2214.         <div
  2215.             class="zoom-modal-content">
  2216.             <!-- Loader -->
  2217.             <div class="zoom-loader" id="zoom-loader" style="display: none;">
  2218.                 <div class="zoom-loader-spinner"></div>
  2219.                 <div class="zoom-loader-text">Chargement...</div>
  2220.             </div>
  2221.             <!-- Image -->
  2222.             <img id="zoom-modal-image" src="" alt="{{ product.name }}">
  2223.         </div>
  2224.     </div>
  2226.     {% if dropshipReferral %}
  2227.         <!-- Modal d'affiliation -->
  2228.         <div id="dropship-modal" class="dropship-referral-modal" style="display: none;">
  2229.             <div class="dropship-modal-overlay"></div>
  2230.             <div class="dropship-modal-content">
  2231.                 <button type="button" class="dropship-modal-close" onclick="closeDropshipModal()" aria-label="Fermer">
  2232.                     &times;
  2233.                 </button>
  2234.                 <div class="dropship-modal-header">
  2235.                     <div class="dropship-icon">
  2236.                         <i class="fas fa-gift"></i>
  2237.                     </div>
  2238.                     <h3>Produit recommandé par
  2239.                         {{ dropshipReferral.affiliateName }}</h3>
  2240.                     <p class="dropship-subtitle">Vous avez été dirigé vers ce produit par un de nos partenaires</p>
  2241.                 </div>
  2242.                 <div class="dropship-modal-body">
  2243.                     <div class="dropship-product-info">
  2244.                         {% if product.images|length > 0 %}
  2245.                             <img src="{{ asset(product.images[0]) }}" alt="{{ product.name }}" class="dropship-product-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
  2246.                             <div class="dropship-product-image-placeholder" style="display: none; width: 100px; height: 100px; background: #f0f0f0; border-radius: 8px; align-items: center; justify-content: center; color: #999;">
  2247.                                 <i class="fas fa-image" style="font-size: 32px;"></i>
  2248.                             </div>
  2249.                         {% else %}
  2250.                             <div class="dropship-product-image-placeholder" style="width: 100px; height: 100px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999;">
  2251.                                 <i class="fas fa-image" style="font-size: 32px;"></i>
  2252.                             </div>
  2253.                         {% endif %}
  2254.                         <div class="dropship-product-details">
  2255.                             <h4>{{ product.name }}</h4>
  2256.                             <div class="dropship-product-price">
  2257.                                 <span class="price">{{ product.price|number_format(2, ',', ' ') }}
  2258.                                     HTG</span>
  2259.                             </div>
  2260.                         </div>
  2261.                     </div>
  2262.                     <div class="dropship-message">
  2263.                         <p>
  2264.                             <strong>{{ dropshipReferral.affiliateName }}</strong>
  2265.                             vous recommande ce produit. Souhaitez-vous l'ajouter à votre panier ?</p>
  2266.                     </div>
  2267.                 </div>
  2268.                 <div class="dropship-modal-footer">
  2269.                     <button type="button" class="btn btn-secondary" onclick="closeDropshipModal()">
  2270.                         Parcourir d'abord
  2271.                     </button>
  2272.                     <button type="button" class="btn btn-primary dropship-add-to-cart" onclick="addToCartFromDropship()">
  2273.                         <i class="fas fa-shopping-cart"></i>
  2274.                         Ajouter au panier
  2275.                     </button>
  2276.                 </div>
  2277.             </div>
  2278.         </div>
  2280.         <style>
  2281.             .dropship-referral-modal {
  2282.                 position: fixed;
  2283.                 top: 0;
  2284.                 left: 0;
  2285.                 width: 100%;
  2286.                 height: 100%;
  2287.                 z-index: 10000;
  2288.                 display: flex;
  2289.                 align-items: center;
  2290.                 justify-content: center;
  2291.             }
  2293.             .dropship-modal-overlay {
  2294.                 position: absolute;
  2295.                 top: 0;
  2296.                 left: 0;
  2297.                 width: 100%;
  2298.                 height: 100%;
  2299.                 background: rgba(0, 0, 0, 0.6);
  2300.                 backdrop-filter: blur(4px);
  2301.             }
  2303.             .dropship-modal-content {
  2304.                 position: relative;
  2305.                 background: white;
  2306.                 border-radius: 16px;
  2307.                 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  2308.                 max-width: 500px;
  2309.                 width: 90%;
  2310.                 max-height: 90vh;
  2311.                 overflow-y: auto;
  2312.                 z-index: 10001;
  2313.                 animation: dropshipModalSlideIn 0.3s ease-out;
  2314.             }
  2316.             @keyframes dropshipModalSlideIn {
  2317.                 from {
  2318.                     opacity: 0;
  2319.                     transform: translateY(-30px) scale(0.95);
  2320.                 }
  2321.                 to {
  2322.                     opacity: 1;
  2323.                     transform: translateY(0) scale(1);
  2324.                 }
  2325.             }
  2327.             .dropship-modal-close {
  2328.                 position: absolute;
  2329.                 top: 15px;
  2330.                 right: 15px;
  2331.                 background: none;
  2332.                 border: none;
  2333.                 font-size: 28px;
  2334.                 color: #666;
  2335.                 cursor: pointer;
  2336.                 width: 35px;
  2337.                 height: 35px;
  2338.                 display: flex;
  2339.                 align-items: center;
  2340.                 justify-content: center;
  2341.                 border-radius: 50%;
  2342.                 transition: all 0.2s;
  2343.                 z-index: 10;
  2344.             }
  2346.             .dropship-modal-close:hover {
  2347.                 background: #f0f0f0;
  2348.                 color: #333;
  2349.             }
  2351.             .dropship-modal-header {
  2352.                 padding: 30px 30px 20px;
  2353.                 text-align: center;
  2354.                 border-bottom: 1px solid #f0f0f0;
  2355.             }
  2357.             .dropship-icon {
  2358.                 width: 70px;
  2359.                 height: 70px;
  2360.                 margin: 0 auto 15px;
  2361.                 background: linear-gradient(135deg, #ffa200 0%, #ff8c00 100%);
  2362.                 border-radius: 50%;
  2363.                 display: flex;
  2364.                 align-items: center;
  2365.                 justify-content: center;
  2366.                 font-size: 32px;
  2367.                 color: white;
  2368.                 box-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  2369.             }
  2371.             .dropship-modal-header h3 {
  2372.                 margin: 0 0 8px;
  2373.                 font-size: 22px;
  2374.                 font-weight: 600;
  2375.                 color: #333;
  2376.             }
  2378.             .dropship-subtitle {
  2379.                 margin: 0;
  2380.                 color: #666;
  2381.                 font-size: 14px;
  2382.             }
  2384.             .dropship-modal-body {
  2385.                 padding: 25px 30px;
  2386.             }
  2388.             .dropship-product-info {
  2389.                 display: flex;
  2390.                 gap: 15px;
  2391.                 margin-bottom: 20px;
  2392.                 padding: 15px;
  2393.                 background: #f8f9fa;
  2394.                 border-radius: 10px;
  2395.             }
  2397.             .dropship-product-image {
  2398.                 width: 80px;
  2399.                 height: 80px;
  2400.                 object-fit: cover;
  2401.                 border-radius: 8px;
  2402.                 flex-shrink: 0;
  2403.             }
  2405.             .dropship-product-details {
  2406.                 flex: 1;
  2407.             }
  2409.             .dropship-product-details h4 {
  2410.                 margin: 0 0 8px;
  2411.                 font-size: 16px;
  2412.                 font-weight: 600;
  2413.                 color: #333;
  2414.             }
  2416.             .dropship-product-price {
  2417.                 margin-top: 5px;
  2418.             }
  2420.             .dropship-product-price .price {
  2421.                 font-size: 20px;
  2422.                 font-weight: 700;
  2423.                 color: #ffa200;
  2424.             }
  2426.             .dropship-message {
  2427.                 padding: 15px;
  2428.                 background: #fff9e6;
  2429.                 border-left: 4px solid #ffa200;
  2430.                 border-radius: 6px;
  2431.             }
  2433.             .dropship-message p {
  2434.                 margin: 0;
  2435.                 color: #666;
  2436.                 line-height: 1.6;
  2437.             }
  2439.             .dropship-modal-footer {
  2440.                 padding: 20px 30px 30px;
  2441.                 display: flex;
  2442.                 gap: 12px;
  2443.                 justify-content: flex-end;
  2444.                 border-top: 1px solid #f0f0f0;
  2445.             }
  2447.             .dropship-modal-footer .btn {
  2448.                 padding: 12px 24px;
  2449.                 border-radius: 8px;
  2450.                 font-weight: 500;
  2451.                 border: none;
  2452.                 cursor: pointer;
  2453.                 transition: all 0.2s;
  2454.                 font-size: 15px;
  2455.             }
  2457.             .dropship-modal-footer .btn-secondary {
  2458.                 background: #f0f0f0;
  2459.                 color: #666;
  2460.             }
  2462.             .dropship-modal-footer .btn-secondary:hover {
  2463.                 background: #e0e0e0;
  2464.             }
  2466.             .dropship-modal-footer .btn-primary {
  2467.                 background: #ffa200;
  2468.                 color: white;
  2469.             }
  2471.             .dropship-modal-footer .btn-primary:hover {
  2472.                 background: #e8910a;
  2473.                 transform: translateY(-2px);
  2474.                 box-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  2475.             }
  2477.             .dropship-modal-footer .btn-primary:disabled {
  2478.                 opacity: 0.6;
  2479.                 cursor: not-allowed;
  2480.                 transform: none;
  2481.             }
  2482.         </style>
  2484.         <script>
  2485.             // Afficher le modal automatiquement au chargement de la page
  2486. document.addEventListener('DOMContentLoaded', function () {
  2487. const dropshipModal = document.getElementById('dropship-modal');
  2488. if (dropshipModal) {
  2489. setTimeout(function () {
  2490. dropshipModal.style.display = 'flex';
  2491. document.body.style.overflow = 'hidden';
  2492. }, 500); // Délai de 500ms pour une meilleure UX
  2493. }
  2494. });
  2496. function closeDropshipModal () {
  2497. const dropshipModal = document.getElementById('dropship-modal');
  2498. if (dropshipModal) {
  2499. dropshipModal.style.display = 'none';
  2500. document.body.style.overflow = 'auto';
  2501. }
  2502. }
  2504. function addToCartFromDropship () {
  2505. const addBtn = document.querySelector('.dropship-add-to-cart');
  2506. if (! addBtn) 
  2507. return;
  2511. // Désactiver le bouton pendant le traitement
  2512. addBtn.disabled = true;
  2513. addBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Ajout en cours...';
  2515. const productId = {{ product.id }};
  2516. const qty = parseInt(document.getElementById('sst') ?. value || '1');
  2518. // Utiliser fetch pour ajouter au panier
  2519. fetch('{{ path("cart_add") }}', {
  2520. method: 'POST',
  2521. headers: {
  2522. 'Content-Type': 'application/x-www-form-urlencoded',
  2523. 'X-Requested-With': 'XMLHttpRequest'
  2524. },
  2525. body: new URLSearchParams(
  2526. {productId: productId, qty: qty}
  2527. )
  2528. }).then(response => response.json()).then(data => {
  2529. if (data.ok) { // Afficher un message de succès
  2530. const modalBody = document.querySelector('.dropship-modal-body');
  2531. if (modalBody) {
  2532. modalBody.innerHTML = `
  2533.                                 <div style="text-align: center; padding: 30px 20px;">
  2534.                                     <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: #d4edda; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
  2535.                                         <i class="fas fa-check" style="font-size: 40px; color: #28a745;"></i>
  2536.                                     </div>
  2537.                                     <h3 style="color: #28a745; margin-bottom: 10px;">Produit ajouté avec succès !</h3>
  2538.                                     <p style="color: #666; margin-bottom: 20px;">Merci d'avoir utilisé le lien de recommandation de <strong>{{ dropshipReferral.affiliateName }}</strong></p>
  2539.                                     <p style="color: #666; font-size: 14px;">Vous pouvez continuer vos achats ou aller directement au panier.</p>
  2540.                                 </div>
  2541.                             `;
  2542. }
  2544. const modalFooter = document.querySelector('.dropship-modal-footer');
  2545. if (modalFooter) {
  2546. modalFooter.innerHTML = `
  2547.                                 <button type="button" class="btn btn-secondary" onclick="closeDropshipModal()">
  2548.                                     Continuer les achats
  2549.                                 </button>
  2550.                                 <a href="{{ path('cart') }}" class="btn btn-primary" style="text-decoration: none; display: inline-block;">
  2551.                                     <i class="fas fa-shopping-cart"></i> Voir le panier
  2552.                                 </a>
  2553.                             `;
  2554. }
  2556. // Mettre à jour le compteur du panier si présent
  2557. const cartCount = document.querySelector('.cart-count, .cart_count, [data-cart-count]');
  2558. if (cartCount) {
  2559. cartCount.textContent = data.totalQty || 0;
  2560. }
  2561. } else {
  2562. showCustomAlert('Erreur lors de l\'ajout au panier. Veuillez réessayer.', 'error');
  2563. addBtn.disabled = false;
  2564. addBtn.innerHTML = '<i class="fas fa-shopping-cart"></i> Ajouter au panier';
  2565. }
  2566. }).catch(error => {
  2567. console.error('Erreur:', error);
  2568. showCustomAlert('Une erreur est survenue. Veuillez réessayer.', 'error');
  2569. addBtn.disabled = false;
  2570. addBtn.innerHTML = '<i class="fas fa-shopping-cart"></i> Ajouter au panier';
  2571. });
  2572. }
  2574. // Fermer le modal en cliquant sur l'overlay
  2575. document.addEventListener('DOMContentLoaded', function () {
  2576. const dropshipModal = document.getElementById('dropship-modal');
  2577. if (dropshipModal) {
  2578. const overlay = dropshipModal.querySelector('.dropship-modal-overlay');
  2579. if (overlay) {
  2580. overlay.addEventListener('click', function () {
  2581. closeDropshipModal();
  2582. });
  2583. }
  2584. }
  2585. });
  2586.         </script>
  2587.     {% endif %}
  2589.     <!-- Le Modal personnalisé et showCustomAlert ont été déplacés dans base_home.html.twig pour une portée globale -->
  2590.     <script>
  2591.         // Remplacer window.alert par showCustomAlert
  2592.         window.alert = window.showCustomAlert || function(message) { console.log("Alert:", message); };
  2593.     </script>
  2594. {% endblock %}