templates/home/cart.html.twig line 1

Open in your IDE?
  1. {% extends 'base_home.html.twig' %}
  3. {% block title %}Panier | MaketOu{% endblock %}
  5. {% block body %}
  6.     <!-- Start Banner Area -->
  7.     <section class="banner-area organic-breadcrumb">
  8.         <div class="container">
  9.             <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
  10.                 <div class="col-first">
  11.                     <h1>Panier</h1>
  12.                     <nav class="d-flex align-items-center">
  13.                         <a href="{{ path('ui_home') }}">Accueil<span class="lnr lnr-arrow-right"></span></a>
  14.                         <a href="javascript:void(0)">Panier</a>
  15.                     </nav>
  16.                 </div>
  17.             </div>
  18.         </div>
  19.     </section>
  20.     <!-- End Banner Area -->
  22.     <!--================Cart Area =================-->
  23.     <section class="cart_area">
  24.         <div class="container">
  25.             <div class="row">
  26.                 <div class="col-lg-8">
  27.                     <div class="cart_inner">
  28.                         <div class="table-responsive">
  29.                             <table class="table">
  30.                                 <thead>
  31.                                     <tr>
  32.                                         <th scope="col">Produit</th>
  33.                                         <th scope="col">Prix</th>
  34.                                         <th scope="col">Quantité</th>
  35.                                         <th scope="col">Total</th>
  36.                                         <th scope="col">Action</th>
  37.                                     </tr>
  38.                                 </thead>
  39.                                 <tbody>
  40.                                     {% for item in items %}
  41.                                     <tr>
  42.                                         <td data-label="Produit">
  43.                                             <div class="cart-item">
  44.                                                 {% set image = (item.image is defined and item.image|length > 0) ? item.image : asset('ui/img/category/s-p1.jpg') %}
  45.                                                 <img src="{{ image }}" alt="{{ item.name }}" class="cart-item-image">
  46.                                                 <div class="cart-item-info">
  47.                                                     <a href="{{ path('ui_product_show', { slug: item.slug }) }}" class="cart-item-name">{{ item.name }}</a>
  48.                                                 </div>
  49.                                             </div>
  50.                                         </td>
  51.                                         <td data-label="Prix">
  52.                                             <span class="cart-item-price">{{ item.price|number_format(2, '.', ' ') }} HTG</span>
  53.                                         </td>
  54.                                         <td data-label="Quantité">
  55.                                             <div class="quantity-controls">
  56.                                                 <button class="quantity-btn quantity-btn-decrease" id="decrease-btn-{{ item.id }}" data-product-id="{{ item.id }}" onclick="handleDecreaseOrRemove({{ item.id }})">
  57.                                                     {% if item.qty == 1 %}
  58.                                                         <i class="lnr lnr-trash"></i>
  59.                                                     {% else %}
  60.                                                         <span>−</span>
  61.                                                     {% endif %}
  62.                                                 </button>
  63.                                                 <input type="text" value="{{ item.qty }}" class="quantity-input" id="qty-{{ item.id }}" onchange="updateQuantity({{ item.id }}, this.value)">
  64.                                                 <button class="quantity-btn" onclick="changeQuantity({{ item.id }}, 1)">+</button>
  65.                                             </div>
  66.                                         </td>
  67.                                         <td data-label="Total">
  68.                                             <span class="cart-item-total" id="total-{{ item.id }}">{{ (item.price * item.qty)|number_format(2, '.', ' ') }} HTG</span>
  69.                                         </td>
  70.                                         <td data-label="Action">
  71.                                             <button class="remove-btn" onclick="removeFromCart({{ item.id }})">Supprimer</button>
  72.                                         </td>
  73.                                     </tr>
  74.                                     {% else %}
  75.                                         <tr>
  76.                                             <td colspan="5" style="text-align: center; padding: 50px;">
  77.                                                 Votre panier est vide.
  78.                                                 <br>
  79.                                                 <a href="{{ path('ui_listing') }}" style="color: #007185;">Continuer vos achats</a>
  80.                                             </td>
  81.                                         </tr>
  82.                                     {% endfor %}
  83.                                 </tbody>
  84.                             </table>
  85.                         </div>
  86.                     </div>
  87.                 </div>
  88.                 <div class="col-lg-4">
  89.                     <div class="cart-summary">
  90.                         <h3>Résumé de la commande</h3>
  91.                         <div class="cart-subtotal">
  92.                             <span id="cart-subtotal-label">Sous-total (<span id="cart-item-count">{{ items|length }}</span> article{{ items|length > 1 ? 's' : '' }})</span>
  93.                             <span id="cart-subtotal">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  94.                         </div>
  95.                         <div class="cart-total">
  96.                             <span>Total</span>
  97.                             <span id="cart-total">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  98.                         </div>
  99.                         <button class="checkout-btn mt-3" onclick="proceedToCheckout()">Passer la commande</button>
  100.                         <button class="continue-shopping" onclick="window.location.href='{{ path('ui_listing') }}'">Continuer vos achats</button>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.     </section>
  106.     <!--================End Cart Area =================-->
  108.     <!-- Modal personnalisé -->
  109.     <div id="customModal" class="custom-modal">
  110.         <div class="custom-modal-overlay"></div>
  111.         <div class="custom-modal-content">
  112.             <div class="custom-modal-header">
  113.                 <h3 class="custom-modal-title" id="modalTitle">Titre</h3>
  114.                 <button class="custom-modal-close" onclick="closeCustomModal()" aria-label="Fermer">
  115.                     <span>&times;</span>
  116.                 </button>
  117.             </div>
  118.             <div class="custom-modal-body" id="modalBody">
  119.                 <p id="modalMessage">Message</p>
  120.             </div>
  121.             <div class="custom-modal-footer" id="modalFooter">
  122.                 <button class="custom-modal-btn custom-modal-btn-primary" id="modalConfirmBtn" onclick="confirmModalAction()">Confirmer</button>
  123.                 <button class="custom-modal-btn custom-modal-btn-secondary" id="modalCancelBtn" onclick="closeCustomModal()">Annuler</button>
  124.             </div>
  125.         </div>
  126.     </div>
  128. {% endblock %}
  130. {% block stylesheets %}
  131. <style>
  132. .cart_area {
  133.     background-color: #f8f8f8;
  134.     padding: 20px 0;
  135. }
  137. .cart_inner {
  138.     background: white;
  139.     border-radius: 8px;
  140.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  141.     overflow: hidden;
  142. }
  144. .table th {
  145.     background-color: #f3f3f3;
  146.     border-bottom: 2px solid #ddd;
  147.     font-weight: 600;
  148.     color: #333;
  149.     padding: 15px;
  150. }
  152. .table td {
  153.     vertical-align: middle;
  154.     padding: 15px;
  155. }
  157. .cart-item {
  158.     display: flex;
  159.     align-items: center;
  160. }
  162. .cart-item-image {
  163.     width: 80px;
  164.     height: 80px;
  165.     object-fit: cover;
  166.     border-radius: 8px;
  167.     margin-right: 15px;
  168. }
  170. .cart-item-info {
  171.     flex-grow: 1;
  172. }
  174. .cart-item-name {
  175.     font-weight: 500;
  176.     color: #007185;
  177.     text-decoration: none;
  178.     margin-bottom: 5px;
  179. }
  181. .cart-item-name:hover {
  182.     text-decoration: underline;
  183. }
  185. .cart-item-price {
  186.     color: #333;
  187.     font-size: 18px;
  188.     font-weight: 700;
  189. }
  191. .quantity-controls {
  192.     display: flex !important;
  193.     align-items: center !important;
  194.     justify-content: center !important;
  195.     border: 1px solid #ddd !important;
  196.     border-radius: 4px !important;
  197.     width: 120px !important;
  198.     height: 40px !important;
  199.     position: relative !important;
  200.     background: white !important;
  201.     overflow: hidden !important;
  202. }
  204. .quantity-controls .quantity-btn {
  205.     background: #f8f8f8 !important;
  206.     border: none !important;
  207.     width: 35px !important;
  208.     height: 100% !important;
  209.     min-width: 35px !important;
  210.     cursor: pointer !important;
  211.     font-size: 18px !important;
  212.     font-weight: 600 !important;
  213.     color: #333 !important;
  214.     display: flex !important;
  215.     align-items: center !important;
  216.     justify-content: center !important;
  217.     padding: 0 !important;
  218.     margin: 0 !important;
  219.     line-height: 1 !important;
  220.     transition: background-color 0.2s ease !important;
  221.     position: relative !important;
  222.     z-index: 1 !important;
  223. }
  225. .quantity-controls .quantity-btn:first-child {
  226.     border-right: 1px solid #ddd !important;
  227. }
  229. .quantity-controls .quantity-btn:last-child {
  230.     border-left: 1px solid #ddd !important;
  231. }
  233. .quantity-controls .quantity-btn:hover {
  234.     background: #e7e7e7 !important;
  235.     color: #000 !important;
  236. }
  238. .quantity-controls .quantity-btn:active {
  239.     background: #d0d0d0 !important;
  240. }
  242. .quantity-controls .quantity-btn-remove {
  243.     background: #f8f8f8 !important;
  244.     color: #dc3545 !important;
  245. }
  247. .quantity-controls .quantity-btn-remove:hover {
  248.     background: #dc3545 !important;
  249.     color: white !important;
  250. }
  252. .quantity-controls .quantity-btn-remove i {
  253.     font-size: 16px !important;
  254. }
  256. .quantity-controls .quantity-btn-decrease span {
  257.     font-size: 24px !important;
  258.     font-weight: 300 !important;
  259.     line-height: 1 !important;
  260. }
  262. .quantity-controls .quantity-input {
  263.     border: none !important;
  264.     width: 50px !important;
  265.     min-width: 50px !important;
  266.     height: 100% !important;
  267.     text-align: center !important;
  268.     font-size: 15px !important;
  269.     font-weight: 500 !important;
  270.     padding: 0 !important;
  271.     margin: 0 !important;
  272.     background: white !important;
  273.     color: #333 !important;
  274.     outline: none !important;
  275.     box-shadow: none !important;
  276.     -moz-appearance: textfield !important;
  277.     position: relative !important;
  278.     z-index: 1 !important;
  279. }
  281. .quantity-controls .quantity-input::-webkit-outer-spin-button,
  282. .quantity-controls .quantity-input::-webkit-inner-spin-button {
  283.     -webkit-appearance: none !important;
  284.     margin: 0 !important;
  285. }
  287. /* Surcharger les styles externes qui pourraient interférer */
  288. .cart_inner .table tbody tr td .quantity-controls,
  289. .cart_inner .table tbody tr td .quantity-controls .quantity-btn,
  290. .cart_inner .table tbody tr td .quantity-controls .quantity-input {
  291.     position: relative !important;
  292. }
  294. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:before,
  295. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:after {
  296.     display: none !important;
  297.     content: none !important;
  298. }
  300. .cart-item-total {
  301.     font-size: 18px;
  302.     font-weight: 700;
  303.     color: #333;
  304. }
  306. /* Animation pour le badge du panier */
  307. @keyframes bounce {
  308.     0%, 20%, 50%, 80%, 100% {
  309.         transform: translateY(0);
  310.     }
  311.     40% {
  312.         transform: translateY(-5px);
  313.     }
  314.     60% {
  315.         transform: translateY(-3px);
  316.     }
  317. }
  319. /* Responsive Styles */
  320. @media (max-width: 991.98px) {
  321.     .cart_area {
  322.         padding: 15px 0;
  323.     }
  324.     
  325.     .cart-summary {
  326.         margin-top: 2rem;
  327.     }
  328. }
  330. @media (max-width: 767.98px) {
  331.     .cart_inner {
  332.         border-radius: 0;
  333.     }
  334.     
  335.     .table {
  336.         font-size: 0.875rem;
  337.     }
  338.     
  339.     .table th {
  340.         padding: 10px 8px;
  341.         font-size: 0.8rem;
  342.     }
  343.     
  344.     .table td {
  345.         padding: 10px 8px;
  346.     }
  347.     
  348.     .cart-item {
  349.         flex-direction: column;
  350.         align-items: flex-start;
  351.     }
  352.     
  353.     .cart-item-image {
  354.         width: 60px;
  355.         height: 60px;
  356.         margin-right: 0;
  357.         margin-bottom: 10px;
  358.     }
  359.     
  360.     .cart-item-name {
  361.         font-size: 0.9rem;
  362.     }
  363.     
  364.     .cart-item-price,
  365.     .cart-item-total {
  366.         font-size: 1rem;
  367.     }
  368.     
  369.     .quantity-controls {
  370.         width: 110px !important;
  371.         height: 38px !important;
  372.     }
  373.     
  374.     .quantity-controls .quantity-btn {
  375.         width: 32px !important;
  376.         font-size: 16px !important;
  377.     }
  378.     
  379.     .quantity-controls .quantity-input {
  380.         width: 46px !important;
  381.         font-size: 14px !important;
  382.     }
  383.     
  384.     .cart-summary {
  385.         margin-top: 1.5rem;
  386.         padding: 1.5rem;
  387.     }
  388.     
  389.     .checkout-btn,
  390.     .continue-shopping {
  391.         width: 100%;
  392.         margin-bottom: 0.5rem;
  393.     }
  394. }
  396. @media (max-width: 575.98px) {
  397.     .table thead {
  398.         display: none;
  399.     }
  400.     
  401.     .table tbody tr {
  402.         display: block;
  403.         margin-bottom: 1rem;
  404.         border: 1px solid #dee2e6;
  405.         border-radius: 8px;
  406.         padding: 1rem;
  407.     }
  408.     
  409.     .table tbody td {
  410.         display: flex;
  411.         justify-content: space-between;
  412.         align-items: center;
  413.         padding: 0.5rem 0;
  414.         border: none;
  415.         text-align: right;
  416.     }
  417.     
  418.     .table tbody td::before {
  419.         content: attr(data-label);
  420.         font-weight: bold;
  421.         text-align: left;
  422.         margin-right: 1rem;
  423.     }
  424.     
  425.     .table tbody td:first-child {
  426.         flex-direction: column;
  427.         align-items: flex-start;
  428.     }
  429.     
  430.     .cart-item-image {
  431.         width: 100%;
  432.         height: 200px;
  433.         margin-bottom: 1rem;
  434.     }
  435.     
  436.     .cart-item-name {
  437.         font-size: 1rem;
  438.         margin-bottom: 0.5rem;
  439.     }
  440.     
  441.     .quantity-controls {
  442.         width: 100% !important;
  443.         max-width: 150px !important;
  444.         margin: 0 auto !important;
  445.         justify-content: center !important;
  446.         height: 40px !important;
  447.     }
  448.     
  449.     .quantity-controls .quantity-btn {
  450.         width: 40px !important;
  451.         font-size: 18px !important;
  452.     }
  453.     
  454.     .quantity-controls .quantity-input {
  455.         width: 60px !important;
  456.         font-size: 16px !important;
  457.     }
  458.     
  459.     .remove-btn {
  460.         width: 100%;
  461.         margin-top: 0.5rem;
  462.     }
  463. }
  465. .remove-btn {
  466.     background: #ff9900;
  467.     color: white;
  468.     border: none;
  469.     padding: 8px 16px;
  470.     border-radius: 4px;
  471.     cursor: pointer;
  472.     font-size: 12px;
  473. }
  475. .remove-btn:hover {
  476.     background: #e68900;
  477. }
  479. .cart-summary {
  480.     background: white;
  481.     border-radius: 8px;
  482.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  483.     padding: 20px;
  484.     height: fit-content;
  485. }
  487. .cart-subtotal {
  488.     display: flex;
  489.     justify-content: space-between;
  490.     padding: 10px 0;
  491.     border-bottom: 1px solid #ddd;
  492.     margin-bottom: 15px;
  493. }
  495. .cart-total {
  496.     font-size: 20px;
  497.     font-weight: 700;
  498.     color: #333;
  499. }
  501. .checkout-btn {
  502.     background: #ffa200;
  503.     color: white;
  504.     border: none;
  505.     padding: 12px 24px;
  506.     border-radius: 4px;
  507.     cursor: pointer;
  508.     width: 100%;
  509.     font-size: 16px;
  510.     font-weight: 600;
  511. }
  513. .checkout-btn:hover {
  514.     background: #e68900;
  515. }
  517. .checkout-btn:disabled,
  518. .checkout-btn.disabled {
  519.     background: #cccccc !important;
  520.     color: #666666 !important;
  521.     cursor: pointer !important; /* Garder le curseur pointer pour indiquer que c'est cliquable */
  522.     opacity: 0.6;
  523.     pointer-events: auto !important; /* S'assurer que le clic fonctionne */
  524. }
  526. .checkout-btn:disabled:hover,
  527. .checkout-btn.disabled:hover {
  528.     background: #cccccc !important;
  529.     transform: none !important;
  530.     box-shadow: none !important;
  531. }
  533. .continue-shopping {
  534.     background: #095ad3;
  535.     color: #ffffff;
  536.     border: none;
  537.     padding: 12px 24px;
  538.     border-radius: 4px;
  539.     cursor: pointer;
  540.     width: 100%;
  541.     font-size: 16px;
  542.     font-weight: 600;
  543.     margin-top: 10px;
  544. }
  546. .continue-shopping:hover {
  547.     background: #e68900;
  548.     color: #ffffff
  549. }
  551. /* ============================================
  552.    MODAL PERSONNALISÉ
  553.    ============================================ */
  554. .custom-modal {
  555.     display: none;
  556.     position: fixed;
  557.     top: 0;
  558.     left: 0;
  559.     width: 100%;
  560.     height: 100%;
  561.     z-index: 10000;
  562.     opacity: 0;
  563.     transition: opacity 0.3s ease;
  564. }
  566. .custom-modal.show {
  567.     display: flex;
  568.     align-items: center;
  569.     justify-content: center;
  570.     opacity: 1;
  571. }
  573. .custom-modal-overlay {
  574.     position: absolute;
  575.     top: 0;
  576.     left: 0;
  577.     width: 100%;
  578.     height: 100%;
  579.     background: rgba(0, 0, 0, 0.5);
  580.     backdrop-filter: blur(4px);
  581.     -webkit-backdrop-filter: blur(4px);
  582. }
  584. .custom-modal-content {
  585.     position: relative;
  586.     background: white;
  587.     border-radius: 12px;
  588.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  589.     max-width: 500px;
  590.     width: 90%;
  591.     max-height: 90vh;
  592.     overflow: hidden;
  593.     transform: scale(0.9) translateY(-20px);
  594.     transition: transform 0.3s ease;
  595.     z-index: 10001;
  596. }
  598. .custom-modal.show .custom-modal-content {
  599.     transform: scale(1) translateY(0);
  600. }
  602. .custom-modal-header {
  603.     display: flex;
  604.     align-items: center;
  605.     justify-content: space-between;
  606.     padding: 20px 24px;
  607.     border-bottom: 1px solid #e0e0e0;
  608.     background: linear-gradient(135deg, #ffa200 0%, #ff9900 100%);
  609. }
  611. .custom-modal-header.error {
  612.     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  613. }
  615. .custom-modal-header.success {
  616.     background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  617. }
  619. .custom-modal-header.warning {
  620.     background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  621. }
  623. .custom-modal-header.info {
  624.     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  625. }
  627. .custom-modal-title {
  628.     margin: 0;
  629.     font-size: 20px;
  630.     font-weight: 600;
  631.     color: white;
  632.     display: flex;
  633.     align-items: center;
  634.     gap: 10px;
  635. }
  637. .custom-modal-title::before {
  638.     content: '';
  639.     width: 24px;
  640.     height: 24px;
  641.     display: inline-block;
  642.     background-size: contain;
  643.     background-repeat: no-repeat;
  644.     background-position: center;
  645. }
  647. .custom-modal-title.success::before {
  648.     content: '✓';
  649.     font-size: 20px;
  650.     font-weight: bold;
  651. }
  653. .custom-modal-title.error::before {
  654.     content: '✕';
  655.     font-size: 20px;
  656.     font-weight: bold;
  657. }
  659. .custom-modal-title.warning::before {
  660.     content: '⚠';
  661.     font-size: 20px;
  662.     font-weight: bold;
  663. }
  665. .custom-modal-title.info::before {
  666.     content: 'ℹ';
  667.     font-size: 20px;
  668.     font-weight: bold;
  669. }
  671. .custom-modal-close {
  672.     background: rgba(255, 255, 255, 0.15);
  673.     border: 2px solid rgba(255, 255, 255, 0.3);
  674.     color: white;
  675.     font-size: 22px;
  676.     font-weight: 300;
  677.     line-height: 1;
  678.     width: 36px;
  679.     height: 36px;
  680.     border-radius: 50%;
  681.     cursor: pointer;
  682.     display: flex;
  683.     align-items: center;
  684.     justify-content: center;
  685.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  686.     padding: 0;
  687.     margin: 0;
  688.     position: relative;
  689.     overflow: hidden;
  690. }
  692. .custom-modal-close::before {
  693.     content: '';
  694.     position: absolute;
  695.     top: 50%;
  696.     left: 50%;
  697.     width: 0;
  698.     height: 0;
  699.     border-radius: 50%;
  700.     background: rgba(255, 255, 255, 0.2);
  701.     transform: translate(-50%, -50%);
  702.     transition: width 0.3s ease, height 0.3s ease;
  703. }
  705. .custom-modal-close:hover {
  706.     background: rgba(255, 255, 255, 0.25);
  707.     border-color: rgba(255, 255, 255, 0.5);
  708.     transform: rotate(90deg) scale(1.1);
  709.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  710. }
  712. .custom-modal-close:hover::before {
  713.     width: 100%;
  714.     height: 100%;
  715. }
  717. .custom-modal-close:active {
  718.     transform: rotate(90deg) scale(0.95);
  719.     background: rgba(255, 255, 255, 0.3);
  720. }
  722. .custom-modal-close span {
  723.     position: relative;
  724.     z-index: 1;
  725.     display: block;
  726.     line-height: 1;
  727. }
  729. .custom-modal-body {
  730.     padding: 24px;
  731.     font-size: 16px;
  732.     line-height: 1.6;
  733.     color: #333;
  734.     max-height: 60vh;
  735.     overflow-y: auto;
  736. }
  738. .custom-modal-body p {
  739.     margin: 0;
  740. }
  742. .custom-modal-footer {
  743.     display: flex;
  744.     gap: 12px;
  745.     justify-content: flex-end;
  746.     padding: 16px 24px;
  747.     border-top: 1px solid #e0e0e0;
  748.     background: #f8f9fa;
  749. }
  751. .custom-modal-footer.single-button {
  752.     justify-content: center;
  753. }
  755. .custom-modal-btn {
  756.     padding: 10px 24px;
  757.     border: none;
  758.     border-radius: 6px;
  759.     font-size: 15px;
  760.     font-weight: 500;
  761.     cursor: pointer;
  762.     transition: all 0.2s ease;
  763.     min-width: 100px;
  764. }
  766. .custom-modal-btn-primary {
  767.     background: #ffa200;
  768.     color: white;
  769. }
  771. .custom-modal-btn-primary:hover {
  772.     background: #e68900;
  773.     transform: translateY(-1px);
  774.     box-shadow: 0 4px 8px rgba(255, 162, 0, 0.3);
  775. }
  777. .custom-modal-btn-secondary {
  778.     background: #6c757d;
  779.     color: white;
  780. }
  782. .custom-modal-btn-secondary:hover {
  783.     background: #5a6268;
  784.     transform: translateY(-1px);
  785.     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  786. }
  788. .custom-modal-btn-success {
  789.     background: #28a745;
  790.     color: white;
  791. }
  793. .custom-modal-btn-success:hover {
  794.     background: #218838;
  795.     transform: translateY(-1px);
  796.     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
  797. }
  799. .custom-modal-btn-danger {
  800.     background: #dc3545;
  801.     color: white;
  802. }
  804. .custom-modal-btn-danger:hover {
  805.     background: #c82333;
  806.     transform: translateY(-1px);
  807.     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  808. }
  810. /* Animation pour les modals */
  811. @keyframes modalFadeIn {
  812.     from {
  813.         opacity: 0;
  814.     }
  815.     to {
  816.         opacity: 1;
  817.     }
  818. }
  820. @keyframes modalSlideIn {
  821.     from {
  822.         transform: scale(0.9) translateY(-20px);
  823.         opacity: 0;
  824.     }
  825.     to {
  826.         transform: scale(1) translateY(0);
  827.         opacity: 1;
  828.     }
  829. }
  831. .custom-modal.show .custom-modal-overlay {
  832.     animation: modalFadeIn 0.3s ease;
  833. }
  835. .custom-modal.show .custom-modal-content {
  836.     animation: modalSlideIn 0.3s ease;
  837. }
  839. /* Responsive */
  840. @media (max-width: 575.98px) {
  841.     .custom-modal-content {
  842.         width: 95%;
  843.         margin: 20px;
  844.     }
  845.     
  846.     .custom-modal-header {
  847.         padding: 16px 20px;
  848.     }
  849.     
  850.     .custom-modal-title {
  851.         font-size: 18px;
  852.     }
  853.     
  854.     .custom-modal-body {
  855.         padding: 20px;
  856.         font-size: 15px;
  857.     }
  858.     
  859.     .custom-modal-footer {
  860.         flex-direction: column;
  861.         padding: 16px 20px;
  862.     }
  863.     
  864.     .custom-modal-btn {
  865.         width: 100%;
  866.     }
  867. }
  868. </style>
  869. {% endblock %}
  871. {% block javascripts %}
  872. <script>
  873. // Variables globales pour le modal
  874. let modalConfirmCallback = null;
  875. let modalCancelCallback = null;
  877. // Fonctions pour gérer le modal personnalisé
  878. function showCustomModal(options) {
  879.     const modal = document.getElementById('customModal');
  880.     const title = document.getElementById('modalTitle');
  881.     const message = document.getElementById('modalMessage');
  882.     const footer = document.getElementById('modalFooter');
  883.     const confirmBtn = document.getElementById('modalConfirmBtn');
  884.     const cancelBtn = document.getElementById('modalCancelBtn');
  885.     const header = modal.querySelector('.custom-modal-header');
  886.     
  887.     // Réinitialiser les classes
  888.     header.className = 'custom-modal-header';
  889.     title.className = 'custom-modal-title';
  890.     footer.className = 'custom-modal-footer';
  891.     
  892.     // Définir le titre et le message
  893.     title.textContent = options.title || 'Information';
  894.     message.textContent = options.message || '';
  895.     
  896.     // Définir le type (success, error, warning, info)
  897.     const type = options.type || 'info';
  898.     header.classList.add(type);
  899.     title.classList.add(type);
  900.     
  901.     // Configurer les boutons
  902.     if (options.showCancel !== false) {
  903.         cancelBtn.style.display = 'block';
  904.         footer.classList.remove('single-button');
  905.     } else {
  906.         cancelBtn.style.display = 'none';
  907.         footer.classList.add('single-button');
  908.     }
  909.     
  910.     // Configurer le bouton de confirmation
  911.     if (options.confirmText) {
  912.         confirmBtn.textContent = options.confirmText;
  913.     }
  914.     
  915.     if (options.confirmClass) {
  916.         confirmBtn.className = 'custom-modal-btn ' + options.confirmClass;
  917.     } else {
  918.         confirmBtn.className = 'custom-modal-btn custom-modal-btn-primary';
  919.     }
  920.     
  921.     // Stocker les callbacks
  922.     modalConfirmCallback = options.onConfirm || null;
  923.     modalCancelCallback = options.onCancel || null;
  924.     
  925.     // Afficher le modal
  926.     modal.classList.add('show');
  927.     document.body.style.overflow = 'hidden';
  928. }
  930. function closeCustomModal() {
  931.     const modal = document.getElementById('customModal');
  932.     const cancelCallback = modalCancelCallback; // Sauvegarder avant réinitialisation
  933.     
  934.     modal.classList.remove('show');
  935.     document.body.style.overflow = '';
  936.     
  937.     // Réinitialiser les callbacks
  938.     modalConfirmCallback = null;
  939.     modalCancelCallback = null;
  940.     
  941.     // Appeler le callback d'annulation si présent
  942.     if (cancelCallback) {
  943.         cancelCallback();
  944.     }
  945. }
  947. function confirmModalAction() {
  948.     if (modalConfirmCallback) {
  949.         modalConfirmCallback();
  950.     }
  951.     closeCustomModal();
  952. }
  954. // Fermer le modal en cliquant sur l'overlay
  955. document.addEventListener('DOMContentLoaded', function() {
  956.     const modal = document.getElementById('customModal');
  957.     const overlay = modal.querySelector('.custom-modal-overlay');
  958.     
  959.     overlay.addEventListener('click', function() {
  960.         closeCustomModal();
  961.     });
  962.     
  963.     // Fermer avec la touche Escape
  964.     document.addEventListener('keydown', function(e) {
  965.         if (e.key === 'Escape' && modal.classList.contains('show')) {
  966.             closeCustomModal();
  967.         }
  968.     });
  969. });
  971. // Fonctions utilitaires pour différents types de modals
  972. function showAlert(title, message, type = 'info') {
  973.     showCustomModal({
  974.         title: title,
  975.         message: message,
  976.         type: type,
  977.         showCancel: false,
  978.         confirmText: 'OK'
  979.     });
  980. }
  982. function showConfirm(title, message, onConfirm, onCancel = null, type = 'warning') {
  983.     showCustomModal({
  984.         title: title,
  985.         message: message,
  986.         type: type,
  987.         showCancel: true,
  988.         confirmText: 'Confirmer',
  989.         cancelText: 'Annuler',
  990.         onConfirm: onConfirm,
  991.         onCancel: onCancel
  992.     });
  993. }
  995. function proceedToCheckout() {
  996.     // Vérifier qu'il y a des articles dans le panier
  997.     if (Object.keys(cartData).length === 0) {
  998.         showCustomModal({
  999.             title: 'Panier vide',
  1000.             message: 'Votre panier est vide. Veuillez ajouter des articles avant de procéder à la commande.',
  1001.             type: 'warning',
  1002.             showCancel: false,
  1003.             confirmText: 'OK',
  1004.             onConfirm: function() {
  1005.                 // Rediriger vers la page de listing pour encourager l'ajout d'articles
  1006.                 window.location.href = '{{ path('ui_listing') }}';
  1007.             }
  1008.         });
  1009.         return;
  1010.     }
  1012.     // Rediriger vers la page de checkout
  1013.     window.location.href = '{{ path('ui_checkout') }}';
  1014. }
  1016. function changeQuantity(productId, delta) {
  1017.     const qtyInput = document.getElementById('qty-' + productId);
  1018.     if (!qtyInput) return;
  1019.     
  1020.     const currentQty = parseInt(qtyInput.value) || 0;
  1021.     const newQty = Math.max(0, currentQty + delta);
  1022.     
  1023.     updateQuantity(productId, newQty);
  1024. }
  1026. function handleDecreaseOrRemove(productId) {
  1027.     const qtyInput = document.getElementById('qty-' + productId);
  1028.     if (!qtyInput) return;
  1029.     
  1030.     const currentQty = parseInt(qtyInput.value) || 0;
  1031.     
  1032.     if (currentQty === 1) {
  1033.         // Si la quantité est 1, supprimer le produit
  1034.         removeFromCart(productId);
  1035.     } else {
  1036.         // Sinon, diminuer la quantité
  1037.         changeQuantity(productId, -1);
  1038.     }
  1039. }
  1041. // Initialiser les données du panier
  1042. let cartData = {}; // Stocker les données du panier côté client
  1044. {% for item in items %}
  1045.     {% set image = (item.image is defined and item.image) ? item.image : asset('ui/img/category/s-p1.jpg') %}
  1046. cartData[{{ item.id }}] = {
  1047.     id: {{ item.id }},
  1048.     name: '{{ item.name }}',
  1049.     price: {{ item.price }},
  1050.     qty: {{ item.qty }},
  1051.     image: '{{ image }}',
  1052.     slug: '{{ item.slug }}'
  1053. };
  1054. {% endfor %}
  1056. function updateQuantity(productId, newQty) {
  1057.     const item = cartData[productId];
  1058.     
  1059.     if (!item) {
  1060.         console.error('Produit non trouvé:', productId);
  1061.         return;
  1062.     }
  1063.     
  1064.     // Validation de la quantité
  1065.     newQty = Math.max(0, parseInt(newQty) || 0);
  1066.     
  1067.     if (newQty === 0) {
  1068.         removeFromCart(productId);
  1069.         return;
  1070.     }
  1071.     
  1072.     if (newQty > 99) {
  1073.         showAlert('Quantité maximale', 'La quantité maximale est de 99 articles.', 'warning');
  1074.         return;
  1075.     }
  1076.     
  1077.     // Mettre à jour l'interface immédiatement (optimistic update)
  1078.     updateCartDisplay(productId, newQty);
  1079.     
  1080.     // Envoyer la requête au serveur
  1081.     fetch('{{ path("ui_cart_update") }}', {
  1082.         method: 'POST',
  1083.         headers: { 
  1084.             'Content-Type': 'application/x-www-form-urlencoded',
  1085.             'X-Requested-With': 'XMLHttpRequest'
  1086.         },
  1087.         body: 'productId=' + productId + '&qty=' + newQty
  1088.     })
  1089.     .then(response => {
  1090.         console.log('🔍 Réponse HTTP:', response.status, response.statusText);
  1092.         // Vérifier si la réponse est OK avant de parser
  1093.         if (!response.ok) {
  1094.             throw new Error('Erreur HTTP ' + response.status + ': ' + response.statusText);
  1095.         }
  1097.         return response.json();
  1098.     })
  1099.     .then(data => {
  1100.         console.log('📦 Données reçues:', data);
  1102.         if (data.ok) {
  1103.             // Les données serveur confirment la mise à jour
  1104.             // Mettre à jour le sous-total avec les valeurs exactes du serveur
  1105.             if (data.subtotal !== undefined) {
  1106.                 updateSubtotalDisplay(data);
  1107.                 updateCartBadge(data.totalQty || 0);
  1108.             }
  1109.             console.log('✅ Panier mis à jour avec succès - Sous-total:', data.subtotal, 'HTG');
  1110.         } else {
  1111.             // En cas d'erreur, restaurer la valeur précédente
  1112.             const oldQty = item.qty;
  1113.             updateCartDisplay(productId, oldQty);
  1114.             showAlert('Erreur', data.message || 'Erreur lors de la mise à jour du panier.', 'error');
  1115.         }
  1116.     })
  1117.     .catch(error => {
  1118.         console.error('❌ Erreur détaillée:', error);
  1119.         console.error('❌ Type d\'erreur:', error.constructor.name);
  1120.         console.error('❌ Message d\'erreur:', error.message);
  1122.         // Restaurer la valeur précédente en cas d'erreur
  1123.         const oldQty = item.qty;
  1124.         updateCartDisplay(productId, oldQty);
  1126.         // Afficher un message d'erreur plus détaillé
  1127.         let errorMessage = 'Une erreur de connexion est survenue. Veuillez réessayer.';
  1128.         if (error.message.includes('HTTP')) {
  1129.             errorMessage = 'Erreur du serveur: ' + error.message;
  1130.         } else if (error.message.includes('JSON')) {
  1131.             errorMessage = 'Erreur de traitement des données. Veuillez recharger la page.';
  1132.         }
  1134.         showAlert('Erreur de connexion', errorMessage, 'error');
  1135.     });
  1136. }
  1138. function updateCartDisplay(productId, qty) {
  1139.     const item = cartData[productId];
  1140.     if (!item) return;
  1141.     
  1142.     // Mettre à jour les données locales
  1143.     item.qty = qty;
  1144.     
  1145.     // Mettre à jour la quantité dans l'input
  1146.     const qtyInput = document.getElementById('qty-' + productId);
  1147.     if (qtyInput) {
  1148.         qtyInput.value = qty;
  1149.     }
  1150.     
  1151.     // Mettre à jour le bouton de diminution/suppression
  1152.     const decreaseBtn = document.getElementById('decrease-btn-' + productId);
  1153.     if (decreaseBtn) {
  1154.         if (qty === 1) {
  1155.             // Changer en bouton de suppression (poubelle)
  1156.             decreaseBtn.innerHTML = '<i class="lnr lnr-trash"></i>';
  1157.             decreaseBtn.classList.add('quantity-btn-remove');
  1158.             decreaseBtn.classList.remove('quantity-btn-decrease');
  1159.         } else {
  1160.             // Changer en bouton de diminution (moins)
  1161.             decreaseBtn.innerHTML = '<span>−</span>';
  1162.             decreaseBtn.classList.add('quantity-btn-decrease');
  1163.             decreaseBtn.classList.remove('quantity-btn-remove');
  1164.         }
  1165.     }
  1166.     
  1167.     // Mettre à jour le total du produit
  1168.     const totalElement = document.getElementById('total-' + productId);
  1169.     if (totalElement) {
  1170.         const itemTotal = (item.price * qty);
  1171.         totalElement.textContent = itemTotal.toLocaleString('fr-FR', {
  1172.             minimumFractionDigits: 2,
  1173.             maximumFractionDigits: 2
  1174.         }) + ' HTG';
  1175.     }
  1176.     
  1177.     // Mettre à jour les totaux généraux
  1178.     updateCartSummary();
  1179. }
  1181. function updateCartTotals(data) {
  1182.     // Utiliser la fonction unifiée pour mettre à jour les totaux
  1183.     updateSubtotalDisplay(data);
  1184. }
  1186. function updateCartSummary() {
  1187.     // Calculer les totaux côté client depuis cartData
  1188.     let subtotal = 0;
  1189.     let totalItems = 0;
  1191.     Object.values(cartData).forEach(item => {
  1192.         subtotal += item.price * item.qty;
  1193.         totalItems += item.qty;
  1194.     });
  1196.     // Mettre à jour l'affichage du sous-total
  1197.     const subtotalElement = document.getElementById('cart-subtotal');
  1198.     if (subtotalElement) {
  1199.         subtotalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1200.             minimumFractionDigits: 2,
  1201.             maximumFractionDigits: 2
  1202.         }) + ' HTG';
  1203.     }
  1205.     // Mettre à jour l'affichage du total
  1206.     const totalElement = document.getElementById('cart-total');
  1207.     if (totalElement) {
  1208.         totalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1209.             minimumFractionDigits: 2,
  1210.             maximumFractionDigits: 2
  1211.         }) + ' HTG';
  1212.     }
  1214.     // Mettre à jour le compteur d'articles
  1215.     const itemCountElement = document.getElementById('cart-item-count');
  1216.     if (itemCountElement) {
  1217.         itemCountElement.textContent = totalItems;
  1218.     }
  1220.     // Mettre à jour le label du sous-total
  1221.     const subtotalLabel = document.getElementById('cart-subtotal-label');
  1222.     if (subtotalLabel) {
  1223.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1224.         subtotalLabel.innerHTML = 'Sous-total (<span id="cart-item-count">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1225.     }
  1227.     // Mettre à jour l'état du bouton checkout
  1228.     updateCheckoutButtonState();
  1229. }
  1231. // Fonction pour mettre à jour l'état du bouton checkout
  1232. function updateCheckoutButtonState() {
  1233.     const checkoutBtn = document.querySelector('.checkout-btn');
  1234.     const isCartEmpty = Object.keys(cartData).length === 0;
  1236.     if (checkoutBtn) {
  1237.         if (isCartEmpty) {
  1238.             checkoutBtn.classList.add('disabled');
  1239.             checkoutBtn.title = 'Votre panier est vide';
  1240.         } else {
  1241.             checkoutBtn.classList.remove('disabled');
  1242.             checkoutBtn.title = 'Procéder à la commande';
  1243.         }
  1244.     }
  1245. }
  1247. // Fonction pour mettre à jour le badge du panier
  1248. function updateCartBadge(totalQty) {
  1249.     const cartBadge = document.querySelector('.cart-badge');
  1250.     if (cartBadge) {
  1251.         cartBadge.textContent = totalQty || 0;
  1252.         console.log('🛒 Badge du panier mis à jour:', totalQty);
  1254.         // Animation du badge si la quantité change
  1255.         if (totalQty > 0) {
  1256.             cartBadge.style.animation = 'none';
  1257.             cartBadge.offsetHeight; // Trigger reflow
  1258.             cartBadge.style.animation = 'bounce 0.5s ease';
  1259.         }
  1260.     }
  1261. }
  1263. // Fonction améliorée pour mettre à jour le sous-total avec débogage
  1264. function updateSubtotalDisplay(data = null) {
  1265.     // Si des données serveur sont fournies, les utiliser (priorité absolue)
  1266.     if (data && data.subtotal !== undefined) {
  1267.         console.log('🔄 Mise à jour sous-total avec données serveur:', data.subtotal, 'HTG');
  1269.         const subtotalElement = document.getElementById('cart-subtotal');
  1270.         const totalElement = document.getElementById('cart-total');
  1272.         const formattedSubtotal = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  1273.             minimumFractionDigits: 2,
  1274.             maximumFractionDigits: 2
  1275.         }) + ' HTG';
  1277.         if (subtotalElement) {
  1278.             subtotalElement.textContent = formattedSubtotal;
  1279.         }
  1281.         if (totalElement) {
  1282.             totalElement.textContent = formattedSubtotal;
  1283.         }
  1285.         // Mettre à jour le compteur d'articles
  1286.         const itemCountElement = document.getElementById('cart-item-count');
  1287.         if (itemCountElement && data.totalQty !== undefined) {
  1288.             const totalItems = data.totalQty;
  1289.             console.log('🔢 Mise à jour compteur articles:', totalItems, 'articles au total');
  1291.             const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1292.             const subtotalLabel = document.getElementById('cart-subtotal-label');
  1293.             if (subtotalLabel) {
  1294.                 subtotalLabel.innerHTML = 'Sous-total (<span id="cart-item-count">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1295.                 console.log('📊 Label mis à jour:', subtotalLabel.innerHTML);
  1296.             }
  1297.         }
  1299.         // Vérification de cohérence (debug)
  1300.         let clientSubtotal = 0;
  1301.         let clientTotalItems = 0;
  1302.         Object.values(cartData).forEach(item => {
  1303.             clientSubtotal += parseFloat(item.price) * parseInt(item.qty);
  1304.             clientTotalItems += parseInt(item.qty);
  1305.         });
  1307.         const serverSubtotal = parseFloat(data.subtotal);
  1308.         if (Math.abs(clientSubtotal - serverSubtotal) > 0.01) {
  1309.             console.warn('⚠️ Incohérence détectée:', {
  1310.                 client: clientSubtotal.toFixed(2),
  1311.                 server: serverSubtotal.toFixed(2),
  1312.                 difference: Math.abs(clientSubtotal - serverSubtotal).toFixed(2)
  1313.             });
  1314.         }
  1316.     } else {
  1317.         // Calcul de secours côté client (si pas de données serveur)
  1318.         console.log('🔄 Calcul sous-total côté client (secours)');
  1320.         let subtotal = 0;
  1321.         let totalItems = 0;
  1323.         Object.values(cartData).forEach(item => {
  1324.             subtotal += parseFloat(item.price) * parseInt(item.qty);
  1325.             totalItems += parseInt(item.qty);
  1326.         });
  1328.         const formattedSubtotal = subtotal.toLocaleString('fr-FR', {
  1329.             minimumFractionDigits: 2,
  1330.             maximumFractionDigits: 2
  1331.         }) + ' HTG';
  1333.         // Mettre à jour l'affichage du sous-total
  1334.         const subtotalElement = document.getElementById('cart-subtotal');
  1335.         if (subtotalElement) {
  1336.             subtotalElement.textContent = formattedSubtotal;
  1337.         }
  1339.         const totalElement = document.getElementById('cart-total');
  1340.         if (totalElement) {
  1341.             totalElement.textContent = formattedSubtotal;
  1342.         }
  1344.         // Mettre à jour le label du sous-total
  1345.         const subtotalLabel = document.getElementById('cart-subtotal-label');
  1346.         if (subtotalLabel) {
  1347.             const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1348.             subtotalLabel.innerHTML = 'Sous-total (<span id="cart-item-count">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1349.         }
  1350.     }
  1351. }
  1353. function removeFromCart(productId) {
  1354.     const item = cartData[productId];
  1355.     const itemName = item ? item.name : 'cet article';
  1356.     
  1357.     showConfirm(
  1358.         'Supprimer l\'article',
  1359.         `Êtes-vous sûr de vouloir supprimer "${itemName}" de votre panier ?`,
  1360.         function() {
  1361.             // Mettre à jour l'interface immédiatement
  1362.             const row = document.querySelector(`tr:has(#qty-${productId})`);
  1363.             if (row) {
  1364.                 row.style.opacity = '0.5';
  1365.                 row.style.pointerEvents = 'none';
  1366.             }
  1367.             
  1368.             performRemoveFromCart(productId, row);
  1369.         },
  1370.         null,
  1371.         'warning'
  1372.     );
  1373. }
  1375. function performRemoveFromCart(productId, row) {
  1376.     
  1377.     fetch('{{ path("ui_cart_remove") }}', {
  1378.         method: 'POST',
  1379.         headers: { 
  1380.             'Content-Type': 'application/x-www-form-urlencoded',
  1381.             'X-Requested-With': 'XMLHttpRequest'
  1382.         },
  1383.         body: 'productId=' + productId
  1384.     })
  1385.     .then(response => response.json())
  1386.     .then(data => {
  1387.         if (data.ok) {
  1388.             // Supprimer des données locales
  1389.             delete cartData[productId];
  1390.             
  1391.             // Supprimer la ligne du DOM
  1392.             const row = document.querySelector(`tr:has(#qty-${productId})`);
  1393.             if (row) {
  1394.                 row.remove();
  1395.             }
  1396.             
  1397.             // Mettre à jour les totaux
  1398.             updateCartTotals(data);
  1399.             
  1400.             // Mettre à jour le résumé du panier
  1401.             updateCartSummary();
  1402.             
  1403.             // Afficher un message de succès
  1404.             showAlert('Article supprimé', 'L\'article a été supprimé de votre panier avec succès.', 'success');
  1405.             
  1406.             // Vérifier si le panier est vide
  1407.             if (Object.keys(cartData).length === 0) {
  1408.                 setTimeout(function() {
  1409.                     location.reload();
  1410.                 }, 1500);
  1411.             }
  1412.         } else {
  1413.             // Restaurer l'affichage en cas d'erreur
  1414.             if (row) {
  1415.                 row.style.opacity = '1';
  1416.                 row.style.pointerEvents = 'auto';
  1417.             }
  1418.             showAlert('Erreur', data.message || 'Erreur lors de la suppression de l\'article.', 'error');
  1419.         }
  1420.     })
  1421.     .catch(error => {
  1422.         console.error('Erreur:', error);
  1423.         // Restaurer l'affichage en cas d'erreur réseau
  1424.         if (row) {
  1425.             row.style.opacity = '1';
  1426.             row.style.pointerEvents = 'auto';
  1427.         }
  1428.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  1429.     });
  1430. }
  1432. // Script pour forcer l'application des styles des boutons de quantité et initialiser l'état du bouton checkout
  1433. document.addEventListener('DOMContentLoaded', function() {
  1434.     // Initialiser l'état du bouton checkout
  1435.     updateCheckoutButtonState();
  1437.     const quantityControls = document.querySelectorAll('.quantity-controls');
  1438.     quantityControls.forEach(function(control) {
  1439.         if (control) {
  1440.             // Forcer les styles sur le conteneur
  1441.             control.style.display = 'flex';
  1442.             control.style.alignItems = 'center';
  1443.             control.style.justifyContent = 'center';
  1444.             control.style.border = '1px solid #ddd';
  1445.             control.style.borderRadius = '4px';
  1446.             control.style.width = '120px';
  1447.             control.style.height = '40px';
  1448.             control.style.position = 'relative';
  1449.             control.style.background = 'white';
  1450.             control.style.overflow = 'hidden';
  1452.             // Forcer les styles sur les boutons
  1453.             const buttons = control.querySelectorAll('.quantity-btn');
  1454.             buttons.forEach(function(btn, index) {
  1455.                 btn.style.background = '#f8f8f8';
  1456.                 btn.style.border = 'none';
  1457.                 btn.style.width = '35px';
  1458.                 btn.style.height = '100%';
  1459.                 btn.style.cursor = 'pointer';
  1460.                 btn.style.fontSize = '18px';
  1461.                 btn.style.fontWeight = '600';
  1462.                 btn.style.color = '#333';
  1463.                 btn.style.display = 'flex';
  1464.                 btn.style.alignItems = 'center';
  1465.                 btn.style.justifyContent = 'center';
  1466.                 btn.style.padding = '0';
  1467.                 btn.style.margin = '0';
  1468.                 btn.style.lineHeight = '1';
  1469.                 btn.style.position = 'relative';
  1470.                 btn.style.zIndex = '1';
  1472.                 // Ajouter les bordures entre les boutons
  1473.                 if (index === 0) {
  1474.                     btn.style.borderRight = '1px solid #ddd';
  1475.                 } else if (index === buttons.length - 1) {
  1476.                     btn.style.borderLeft = '1px solid #ddd';
  1477.                 }
  1478.             });
  1480.             // Forcer les styles sur l'input
  1481.             const input = control.querySelector('.quantity-input');
  1482.             if (input) {
  1483.                 input.style.border = 'none';
  1484.                 input.style.width = '50px';
  1485.                 input.style.height = '100%';
  1486.                 input.style.textAlign = 'center';
  1487.                 input.style.fontSize = '15px';
  1488.                 input.style.fontWeight = '500';
  1489.                 input.style.padding = '0';
  1490.                 input.style.margin = '0';
  1491.                 input.style.background = 'white';
  1492.                 input.style.color = '#333';
  1493.                 input.style.outline = 'none';
  1494.                 input.style.boxShadow = 'none';
  1495.                 input.style.position = 'relative';
  1496.                 input.style.zIndex = '1';
  1497.             }
  1498.         }
  1499.     });
  1500. });
  1502. </script>
  1503. {% endblock %}