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" onclick="changeQuantity({{ item.id }}, -1)">-</button>
  57.                                                 <input type="text" value="{{ item.qty }}" class="quantity-input" id="qty-{{ item.id }}" onchange="updateQuantity({{ item.id }}, this.value)">
  58.                                                 <button class="quantity-btn" onclick="changeQuantity({{ item.id }}, 1)">+</button>
  59.                                             </div>
  60.                                         </td>
  61.                                         <td data-label="Total">
  62.                                             <span class="cart-item-total" id="total-{{ item.id }}">{{ (item.price * item.qty)|number_format(2, '.', ' ') }} HTG</span>
  63.                                         </td>
  64.                                         <td data-label="Action">
  65.                                             <button class="remove-btn" onclick="removeFromCart({{ item.id }})">Supprimer</button>
  66.                                         </td>
  67.                                     </tr>
  68.                                     {% else %}
  69.                                         <tr>
  70.                                             <td colspan="5" style="text-align: center; padding: 50px;">
  71.                                                 Votre panier est vide.
  72.                                                 <br>
  73.                                                 <a href="{{ path('ui_listing') }}" style="color: #007185;">Continuer vos achats</a>
  74.                                             </td>
  75.                                         </tr>
  76.                                     {% endfor %}
  77.                                 </tbody>
  78.                             </table>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.                 <div class="col-lg-4">
  83.                     <div class="cart-summary">
  84.                         <h3>Résumé de la commande</h3>
  85.                         <div class="cart-subtotal">
  86.                             <span id="cart-subtotal-label">Sous-total (<span id="cart-item-count">{{ items|length }}</span> article{{ items|length > 1 ? 's' : '' }})</span>
  87.                             <span id="cart-subtotal">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  88.                         </div>
  89.                         <div class="cart-total">
  90.                             <span>Total</span>
  91.                             <span id="cart-total">{{ subtotal|number_format(2, '.', ' ') }} HTG</span>
  92.                         </div>
  93.                         <button class="checkout-btn mt-3" onclick="proceedToCheckout()">Passer la commande</button>
  94.                         <button class="continue-shopping" onclick="window.location.href='{{ path('ui_listing') }}'">Continuer vos achats</button>
  95.                     </div>
  96.                 </div>
  97.             </div>
  98.         </div>
  99.     </section>
  100.     <!--================End Cart Area =================-->
  102.     <!-- Modal personnalisé -->
  103.     <div id="customModal" class="custom-modal">
  104.         <div class="custom-modal-overlay"></div>
  105.         <div class="custom-modal-content">
  106.             <div class="custom-modal-header">
  107.                 <h3 class="custom-modal-title" id="modalTitle">Titre</h3>
  108.                 <button class="custom-modal-close" onclick="closeCustomModal()" aria-label="Fermer">
  109.                     <span>&times;</span>
  110.                 </button>
  111.             </div>
  112.             <div class="custom-modal-body" id="modalBody">
  113.                 <p id="modalMessage">Message</p>
  114.             </div>
  115.             <div class="custom-modal-footer" id="modalFooter">
  116.                 <button class="custom-modal-btn custom-modal-btn-primary" id="modalConfirmBtn" onclick="confirmModalAction()">Confirmer</button>
  117.                 <button class="custom-modal-btn custom-modal-btn-secondary" id="modalCancelBtn" onclick="closeCustomModal()">Annuler</button>
  118.             </div>
  119.         </div>
  120.     </div>
  122. {% endblock %}
  124. {% block stylesheets %}
  125. <style>
  126. .cart_area {
  127.     background-color: #f8f8f8;
  128.     padding: 20px 0;
  129. }
  131. .cart_inner {
  132.     background: white;
  133.     border-radius: 8px;
  134.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  135.     overflow: hidden;
  136. }
  138. .table th {
  139.     background-color: #f3f3f3;
  140.     border-bottom: 2px solid #ddd;
  141.     font-weight: 600;
  142.     color: #333;
  143.     padding: 15px;
  144. }
  146. .table td {
  147.     vertical-align: middle;
  148.     padding: 15px;
  149. }
  151. .cart-item {
  152.     display: flex;
  153.     align-items: center;
  154. }
  156. .cart-item-image {
  157.     width: 80px;
  158.     height: 80px;
  159.     object-fit: cover;
  160.     border-radius: 8px;
  161.     margin-right: 15px;
  162. }
  164. .cart-item-info {
  165.     flex-grow: 1;
  166. }
  168. .cart-item-name {
  169.     font-weight: 500;
  170.     color: #007185;
  171.     text-decoration: none;
  172.     margin-bottom: 5px;
  173. }
  175. .cart-item-name:hover {
  176.     text-decoration: underline;
  177. }
  179. .cart-item-price {
  180.     color: #333;
  181.     font-size: 18px;
  182.     font-weight: 700;
  183. }
  185. .quantity-controls {
  186.     display: flex !important;
  187.     align-items: center !important;
  188.     justify-content: center !important;
  189.     border: 1px solid #ddd !important;
  190.     border-radius: 4px !important;
  191.     width: 120px !important;
  192.     height: 40px !important;
  193.     position: relative !important;
  194.     background: white !important;
  195.     overflow: hidden !important;
  196. }
  198. .quantity-controls .quantity-btn {
  199.     background: #f8f8f8 !important;
  200.     border: none !important;
  201.     width: 35px !important;
  202.     height: 100% !important;
  203.     min-width: 35px !important;
  204.     cursor: pointer !important;
  205.     font-size: 18px !important;
  206.     font-weight: 600 !important;
  207.     color: #333 !important;
  208.     display: flex !important;
  209.     align-items: center !important;
  210.     justify-content: center !important;
  211.     padding: 0 !important;
  212.     margin: 0 !important;
  213.     line-height: 1 !important;
  214.     transition: background-color 0.2s ease !important;
  215.     position: relative !important;
  216.     z-index: 1 !important;
  217. }
  219. .quantity-controls .quantity-btn:first-child {
  220.     border-right: 1px solid #ddd !important;
  221. }
  223. .quantity-controls .quantity-btn:last-child {
  224.     border-left: 1px solid #ddd !important;
  225. }
  227. .quantity-controls .quantity-btn:hover {
  228.     background: #e7e7e7 !important;
  229.     color: #000 !important;
  230. }
  232. .quantity-controls .quantity-btn:active {
  233.     background: #d0d0d0 !important;
  234. }
  236. .quantity-controls .quantity-input {
  237.     border: none !important;
  238.     width: 50px !important;
  239.     min-width: 50px !important;
  240.     height: 100% !important;
  241.     text-align: center !important;
  242.     font-size: 15px !important;
  243.     font-weight: 500 !important;
  244.     padding: 0 !important;
  245.     margin: 0 !important;
  246.     background: white !important;
  247.     color: #333 !important;
  248.     outline: none !important;
  249.     box-shadow: none !important;
  250.     -moz-appearance: textfield !important;
  251.     position: relative !important;
  252.     z-index: 1 !important;
  253. }
  255. .quantity-controls .quantity-input::-webkit-outer-spin-button,
  256. .quantity-controls .quantity-input::-webkit-inner-spin-button {
  257.     -webkit-appearance: none !important;
  258.     margin: 0 !important;
  259. }
  261. /* Surcharger les styles externes qui pourraient interférer */
  262. .cart_inner .table tbody tr td .quantity-controls,
  263. .cart_inner .table tbody tr td .quantity-controls .quantity-btn,
  264. .cart_inner .table tbody tr td .quantity-controls .quantity-input {
  265.     position: relative !important;
  266. }
  268. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:before,
  269. .cart_inner .table tbody tr td .quantity-controls .quantity-btn:after {
  270.     display: none !important;
  271.     content: none !important;
  272. }
  274. .cart-item-total {
  275.     font-size: 18px;
  276.     font-weight: 700;
  277.     color: #333;
  278. }
  280. /* Responsive Styles */
  281. @media (max-width: 991.98px) {
  282.     .cart_area {
  283.         padding: 15px 0;
  284.     }
  285.     
  286.     .cart-summary {
  287.         margin-top: 2rem;
  288.     }
  289. }
  291. @media (max-width: 767.98px) {
  292.     .cart_inner {
  293.         border-radius: 0;
  294.     }
  295.     
  296.     .table {
  297.         font-size: 0.875rem;
  298.     }
  299.     
  300.     .table th {
  301.         padding: 10px 8px;
  302.         font-size: 0.8rem;
  303.     }
  304.     
  305.     .table td {
  306.         padding: 10px 8px;
  307.     }
  308.     
  309.     .cart-item {
  310.         flex-direction: column;
  311.         align-items: flex-start;
  312.     }
  313.     
  314.     .cart-item-image {
  315.         width: 60px;
  316.         height: 60px;
  317.         margin-right: 0;
  318.         margin-bottom: 10px;
  319.     }
  320.     
  321.     .cart-item-name {
  322.         font-size: 0.9rem;
  323.     }
  324.     
  325.     .cart-item-price,
  326.     .cart-item-total {
  327.         font-size: 1rem;
  328.     }
  329.     
  330.     .quantity-controls {
  331.         width: 110px !important;
  332.         height: 38px !important;
  333.     }
  334.     
  335.     .quantity-controls .quantity-btn {
  336.         width: 32px !important;
  337.         font-size: 16px !important;
  338.     }
  339.     
  340.     .quantity-controls .quantity-input {
  341.         width: 46px !important;
  342.         font-size: 14px !important;
  343.     }
  344.     
  345.     .cart-summary {
  346.         margin-top: 1.5rem;
  347.         padding: 1.5rem;
  348.     }
  349.     
  350.     .checkout-btn,
  351.     .continue-shopping {
  352.         width: 100%;
  353.         margin-bottom: 0.5rem;
  354.     }
  355. }
  357. @media (max-width: 575.98px) {
  358.     .table thead {
  359.         display: none;
  360.     }
  361.     
  362.     .table tbody tr {
  363.         display: block;
  364.         margin-bottom: 1rem;
  365.         border: 1px solid #dee2e6;
  366.         border-radius: 8px;
  367.         padding: 1rem;
  368.     }
  369.     
  370.     .table tbody td {
  371.         display: flex;
  372.         justify-content: space-between;
  373.         align-items: center;
  374.         padding: 0.5rem 0;
  375.         border: none;
  376.         text-align: right;
  377.     }
  378.     
  379.     .table tbody td::before {
  380.         content: attr(data-label);
  381.         font-weight: bold;
  382.         text-align: left;
  383.         margin-right: 1rem;
  384.     }
  385.     
  386.     .table tbody td:first-child {
  387.         flex-direction: column;
  388.         align-items: flex-start;
  389.     }
  390.     
  391.     .cart-item-image {
  392.         width: 100%;
  393.         height: 200px;
  394.         margin-bottom: 1rem;
  395.     }
  396.     
  397.     .cart-item-name {
  398.         font-size: 1rem;
  399.         margin-bottom: 0.5rem;
  400.     }
  401.     
  402.     .quantity-controls {
  403.         width: 100% !important;
  404.         max-width: 150px !important;
  405.         margin: 0 auto !important;
  406.         justify-content: center !important;
  407.         height: 40px !important;
  408.     }
  409.     
  410.     .quantity-controls .quantity-btn {
  411.         width: 40px !important;
  412.         font-size: 18px !important;
  413.     }
  414.     
  415.     .quantity-controls .quantity-input {
  416.         width: 60px !important;
  417.         font-size: 16px !important;
  418.     }
  419.     
  420.     .remove-btn {
  421.         width: 100%;
  422.         margin-top: 0.5rem;
  423.     }
  424. }
  426. .remove-btn {
  427.     background: #ff9900;
  428.     color: white;
  429.     border: none;
  430.     padding: 8px 16px;
  431.     border-radius: 4px;
  432.     cursor: pointer;
  433.     font-size: 12px;
  434. }
  436. .remove-btn:hover {
  437.     background: #e68900;
  438. }
  440. .cart-summary {
  441.     background: white;
  442.     border-radius: 8px;
  443.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  444.     padding: 20px;
  445.     height: fit-content;
  446. }
  448. .cart-subtotal {
  449.     display: flex;
  450.     justify-content: space-between;
  451.     padding: 10px 0;
  452.     border-bottom: 1px solid #ddd;
  453.     margin-bottom: 15px;
  454. }
  456. .cart-total {
  457.     font-size: 20px;
  458.     font-weight: 700;
  459.     color: #333;
  460. }
  462. .checkout-btn {
  463.     background: #ffa200;
  464.     color: white;
  465.     border: none;
  466.     padding: 12px 24px;
  467.     border-radius: 4px;
  468.     cursor: pointer;
  469.     width: 100%;
  470.     font-size: 16px;
  471.     font-weight: 600;
  472. }
  474. .checkout-btn:hover {
  475.     background: #e68900;
  476. }
  478. .continue-shopping {
  479.     background: #095ad3;
  480.     color: #ffffff;
  481.     border: none;
  482.     padding: 12px 24px;
  483.     border-radius: 4px;
  484.     cursor: pointer;
  485.     width: 100%;
  486.     font-size: 16px;
  487.     font-weight: 600;
  488.     margin-top: 10px;
  489. }
  491. .continue-shopping:hover {
  492.     background: #e68900;
  493.     color: #ffffff
  494. }
  496. /* ============================================
  497.    MODAL PERSONNALISÉ
  498.    ============================================ */
  499. .custom-modal {
  500.     display: none;
  501.     position: fixed;
  502.     top: 0;
  503.     left: 0;
  504.     width: 100%;
  505.     height: 100%;
  506.     z-index: 10000;
  507.     opacity: 0;
  508.     transition: opacity 0.3s ease;
  509. }
  511. .custom-modal.show {
  512.     display: flex;
  513.     align-items: center;
  514.     justify-content: center;
  515.     opacity: 1;
  516. }
  518. .custom-modal-overlay {
  519.     position: absolute;
  520.     top: 0;
  521.     left: 0;
  522.     width: 100%;
  523.     height: 100%;
  524.     background: rgba(0, 0, 0, 0.5);
  525.     backdrop-filter: blur(4px);
  526.     -webkit-backdrop-filter: blur(4px);
  527. }
  529. .custom-modal-content {
  530.     position: relative;
  531.     background: white;
  532.     border-radius: 12px;
  533.     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  534.     max-width: 500px;
  535.     width: 90%;
  536.     max-height: 90vh;
  537.     overflow: hidden;
  538.     transform: scale(0.9) translateY(-20px);
  539.     transition: transform 0.3s ease;
  540.     z-index: 10001;
  541. }
  543. .custom-modal.show .custom-modal-content {
  544.     transform: scale(1) translateY(0);
  545. }
  547. .custom-modal-header {
  548.     display: flex;
  549.     align-items: center;
  550.     justify-content: space-between;
  551.     padding: 20px 24px;
  552.     border-bottom: 1px solid #e0e0e0;
  553.     background: linear-gradient(135deg, #ffa200 0%, #ff9900 100%);
  554. }
  556. .custom-modal-header.error {
  557.     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  558. }
  560. .custom-modal-header.success {
  561.     background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  562. }
  564. .custom-modal-header.warning {
  565.     background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  566. }
  568. .custom-modal-header.info {
  569.     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  570. }
  572. .custom-modal-title {
  573.     margin: 0;
  574.     font-size: 20px;
  575.     font-weight: 600;
  576.     color: white;
  577.     display: flex;
  578.     align-items: center;
  579.     gap: 10px;
  580. }
  582. .custom-modal-title::before {
  583.     content: '';
  584.     width: 24px;
  585.     height: 24px;
  586.     display: inline-block;
  587.     background-size: contain;
  588.     background-repeat: no-repeat;
  589.     background-position: center;
  590. }
  592. .custom-modal-title.success::before {
  593.     content: '✓';
  594.     font-size: 20px;
  595.     font-weight: bold;
  596. }
  598. .custom-modal-title.error::before {
  599.     content: '✕';
  600.     font-size: 20px;
  601.     font-weight: bold;
  602. }
  604. .custom-modal-title.warning::before {
  605.     content: '⚠';
  606.     font-size: 20px;
  607.     font-weight: bold;
  608. }
  610. .custom-modal-title.info::before {
  611.     content: 'ℹ';
  612.     font-size: 20px;
  613.     font-weight: bold;
  614. }
  616. .custom-modal-close {
  617.     background: rgba(255, 255, 255, 0.15);
  618.     border: 2px solid rgba(255, 255, 255, 0.3);
  619.     color: white;
  620.     font-size: 22px;
  621.     font-weight: 300;
  622.     line-height: 1;
  623.     width: 36px;
  624.     height: 36px;
  625.     border-radius: 50%;
  626.     cursor: pointer;
  627.     display: flex;
  628.     align-items: center;
  629.     justify-content: center;
  630.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  631.     padding: 0;
  632.     margin: 0;
  633.     position: relative;
  634.     overflow: hidden;
  635. }
  637. .custom-modal-close::before {
  638.     content: '';
  639.     position: absolute;
  640.     top: 50%;
  641.     left: 50%;
  642.     width: 0;
  643.     height: 0;
  644.     border-radius: 50%;
  645.     background: rgba(255, 255, 255, 0.2);
  646.     transform: translate(-50%, -50%);
  647.     transition: width 0.3s ease, height 0.3s ease;
  648. }
  650. .custom-modal-close:hover {
  651.     background: rgba(255, 255, 255, 0.25);
  652.     border-color: rgba(255, 255, 255, 0.5);
  653.     transform: rotate(90deg) scale(1.1);
  654.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  655. }
  657. .custom-modal-close:hover::before {
  658.     width: 100%;
  659.     height: 100%;
  660. }
  662. .custom-modal-close:active {
  663.     transform: rotate(90deg) scale(0.95);
  664.     background: rgba(255, 255, 255, 0.3);
  665. }
  667. .custom-modal-close span {
  668.     position: relative;
  669.     z-index: 1;
  670.     display: block;
  671.     line-height: 1;
  672. }
  674. .custom-modal-body {
  675.     padding: 24px;
  676.     font-size: 16px;
  677.     line-height: 1.6;
  678.     color: #333;
  679.     max-height: 60vh;
  680.     overflow-y: auto;
  681. }
  683. .custom-modal-body p {
  684.     margin: 0;
  685. }
  687. .custom-modal-footer {
  688.     display: flex;
  689.     gap: 12px;
  690.     justify-content: flex-end;
  691.     padding: 16px 24px;
  692.     border-top: 1px solid #e0e0e0;
  693.     background: #f8f9fa;
  694. }
  696. .custom-modal-footer.single-button {
  697.     justify-content: center;
  698. }
  700. .custom-modal-btn {
  701.     padding: 10px 24px;
  702.     border: none;
  703.     border-radius: 6px;
  704.     font-size: 15px;
  705.     font-weight: 500;
  706.     cursor: pointer;
  707.     transition: all 0.2s ease;
  708.     min-width: 100px;
  709. }
  711. .custom-modal-btn-primary {
  712.     background: #ffa200;
  713.     color: white;
  714. }
  716. .custom-modal-btn-primary:hover {
  717.     background: #e68900;
  718.     transform: translateY(-1px);
  719.     box-shadow: 0 4px 8px rgba(255, 162, 0, 0.3);
  720. }
  722. .custom-modal-btn-secondary {
  723.     background: #6c757d;
  724.     color: white;
  725. }
  727. .custom-modal-btn-secondary:hover {
  728.     background: #5a6268;
  729.     transform: translateY(-1px);
  730.     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
  731. }
  733. .custom-modal-btn-success {
  734.     background: #28a745;
  735.     color: white;
  736. }
  738. .custom-modal-btn-success:hover {
  739.     background: #218838;
  740.     transform: translateY(-1px);
  741.     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
  742. }
  744. .custom-modal-btn-danger {
  745.     background: #dc3545;
  746.     color: white;
  747. }
  749. .custom-modal-btn-danger:hover {
  750.     background: #c82333;
  751.     transform: translateY(-1px);
  752.     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
  753. }
  755. /* Animation pour les modals */
  756. @keyframes modalFadeIn {
  757.     from {
  758.         opacity: 0;
  759.     }
  760.     to {
  761.         opacity: 1;
  762.     }
  763. }
  765. @keyframes modalSlideIn {
  766.     from {
  767.         transform: scale(0.9) translateY(-20px);
  768.         opacity: 0;
  769.     }
  770.     to {
  771.         transform: scale(1) translateY(0);
  772.         opacity: 1;
  773.     }
  774. }
  776. .custom-modal.show .custom-modal-overlay {
  777.     animation: modalFadeIn 0.3s ease;
  778. }
  780. .custom-modal.show .custom-modal-content {
  781.     animation: modalSlideIn 0.3s ease;
  782. }
  784. /* Responsive */
  785. @media (max-width: 575.98px) {
  786.     .custom-modal-content {
  787.         width: 95%;
  788.         margin: 20px;
  789.     }
  790.     
  791.     .custom-modal-header {
  792.         padding: 16px 20px;
  793.     }
  794.     
  795.     .custom-modal-title {
  796.         font-size: 18px;
  797.     }
  798.     
  799.     .custom-modal-body {
  800.         padding: 20px;
  801.         font-size: 15px;
  802.     }
  803.     
  804.     .custom-modal-footer {
  805.         flex-direction: column;
  806.         padding: 16px 20px;
  807.     }
  808.     
  809.     .custom-modal-btn {
  810.         width: 100%;
  811.     }
  812. }
  813. </style>
  814. {% endblock %}
  816. {% block javascripts %}
  817. <script>
  818. // Variables globales pour le modal
  819. let modalConfirmCallback = null;
  820. let modalCancelCallback = null;
  822. // Fonctions pour gérer le modal personnalisé
  823. function showCustomModal(options) {
  824.     const modal = document.getElementById('customModal');
  825.     const title = document.getElementById('modalTitle');
  826.     const message = document.getElementById('modalMessage');
  827.     const footer = document.getElementById('modalFooter');
  828.     const confirmBtn = document.getElementById('modalConfirmBtn');
  829.     const cancelBtn = document.getElementById('modalCancelBtn');
  830.     const header = modal.querySelector('.custom-modal-header');
  831.     
  832.     // Réinitialiser les classes
  833.     header.className = 'custom-modal-header';
  834.     title.className = 'custom-modal-title';
  835.     footer.className = 'custom-modal-footer';
  836.     
  837.     // Définir le titre et le message
  838.     title.textContent = options.title || 'Information';
  839.     message.textContent = options.message || '';
  840.     
  841.     // Définir le type (success, error, warning, info)
  842.     const type = options.type || 'info';
  843.     header.classList.add(type);
  844.     title.classList.add(type);
  845.     
  846.     // Configurer les boutons
  847.     if (options.showCancel !== false) {
  848.         cancelBtn.style.display = 'block';
  849.         footer.classList.remove('single-button');
  850.     } else {
  851.         cancelBtn.style.display = 'none';
  852.         footer.classList.add('single-button');
  853.     }
  854.     
  855.     // Configurer le bouton de confirmation
  856.     if (options.confirmText) {
  857.         confirmBtn.textContent = options.confirmText;
  858.     }
  859.     
  860.     if (options.confirmClass) {
  861.         confirmBtn.className = 'custom-modal-btn ' + options.confirmClass;
  862.     } else {
  863.         confirmBtn.className = 'custom-modal-btn custom-modal-btn-primary';
  864.     }
  865.     
  866.     // Stocker les callbacks
  867.     modalConfirmCallback = options.onConfirm || null;
  868.     modalCancelCallback = options.onCancel || null;
  869.     
  870.     // Afficher le modal
  871.     modal.classList.add('show');
  872.     document.body.style.overflow = 'hidden';
  873. }
  875. function closeCustomModal() {
  876.     const modal = document.getElementById('customModal');
  877.     const cancelCallback = modalCancelCallback; // Sauvegarder avant réinitialisation
  878.     
  879.     modal.classList.remove('show');
  880.     document.body.style.overflow = '';
  881.     
  882.     // Réinitialiser les callbacks
  883.     modalConfirmCallback = null;
  884.     modalCancelCallback = null;
  885.     
  886.     // Appeler le callback d'annulation si présent
  887.     if (cancelCallback) {
  888.         cancelCallback();
  889.     }
  890. }
  892. function confirmModalAction() {
  893.     if (modalConfirmCallback) {
  894.         modalConfirmCallback();
  895.     }
  896.     closeCustomModal();
  897. }
  899. // Fermer le modal en cliquant sur l'overlay
  900. document.addEventListener('DOMContentLoaded', function() {
  901.     const modal = document.getElementById('customModal');
  902.     const overlay = modal.querySelector('.custom-modal-overlay');
  903.     
  904.     overlay.addEventListener('click', function() {
  905.         closeCustomModal();
  906.     });
  907.     
  908.     // Fermer avec la touche Escape
  909.     document.addEventListener('keydown', function(e) {
  910.         if (e.key === 'Escape' && modal.classList.contains('show')) {
  911.             closeCustomModal();
  912.         }
  913.     });
  914. });
  916. // Fonctions utilitaires pour différents types de modals
  917. function showAlert(title, message, type = 'info') {
  918.     showCustomModal({
  919.         title: title,
  920.         message: message,
  921.         type: type,
  922.         showCancel: false,
  923.         confirmText: 'OK'
  924.     });
  925. }
  927. function showConfirm(title, message, onConfirm, onCancel = null, type = 'warning') {
  928.     showCustomModal({
  929.         title: title,
  930.         message: message,
  931.         type: type,
  932.         showCancel: true,
  933.         confirmText: 'Confirmer',
  934.         cancelText: 'Annuler',
  935.         onConfirm: onConfirm,
  936.         onCancel: onCancel
  937.     });
  938. }
  940. function proceedToCheckout() {
  941.     // Vérifier qu'il y a des articles dans le panier
  942.     if (Object.keys(cartData).length === 0) {
  943.         showAlert('Panier vide', 'Votre panier est vide. Veuillez ajouter des articles avant de continuer.', 'warning');
  944.         return;
  945.     }
  946.     
  947.     // Rediriger vers la page de checkout
  948.     window.location.href = '{{ path('ui_checkout') }}';
  949. }
  951. function changeQuantity(productId, delta) {
  952.     const qtyInput = document.getElementById('qty-' + productId);
  953.     if (!qtyInput) return;
  954.     
  955.     const currentQty = parseInt(qtyInput.value) || 0;
  956.     const newQty = Math.max(0, currentQty + delta);
  957.     
  958.     updateQuantity(productId, newQty);
  959. }
  960. let cartData = {}; // Stocker les données du panier côté client
  962. // Initialiser les données du panier
  963. {% for item in items %}
  964.     {% set image = (item.images is defined and item.images|length > 0) ? item.images[0] : asset('ui/img/category/s-p1.jpg') %}
  966. cartData[{{ item.id }}] = {
  967.     id: {{ item.id }},
  968.     name: '{{ item.name }}',
  969.     price: {{ item.price }},
  970.     qty: {{ item.qty }},
  971.     image: '{{ image }}',
  972.     slug: '{{ item.slug }}'
  973. };
  974. {% endfor %}
  976. function updateQuantity(productId, newQty) {
  977.     const item = cartData[productId];
  978.     
  979.     if (!item) {
  980.         console.error('Produit non trouvé:', productId);
  981.         return;
  982.     }
  983.     
  984.     // Validation de la quantité
  985.     newQty = Math.max(0, parseInt(newQty) || 0);
  986.     
  987.     if (newQty === 0) {
  988.         removeFromCart(productId);
  989.         return;
  990.     }
  991.     
  992.     if (newQty > 99) {
  993.         showAlert('Quantité maximale', 'La quantité maximale est de 99 articles.', 'warning');
  994.         return;
  995.     }
  996.     
  997.     // Mettre à jour l'interface immédiatement (optimistic update)
  998.     updateCartDisplay(productId, newQty);
  999.     
  1000.     // Envoyer la requête au serveur
  1001.     fetch('{{ path("ui_cart_update") }}', {
  1002.         method: 'POST',
  1003.         headers: { 
  1004.             'Content-Type': 'application/x-www-form-urlencoded',
  1005.             'X-Requested-With': 'XMLHttpRequest'
  1006.         },
  1007.         body: 'productId=' + productId + '&qty=' + newQty
  1008.     })
  1009.     .then(response => response.json())
  1010.     .then(data => {
  1011.         if (data.ok) {
  1012.             // Les données serveur confirment la mise à jour
  1013.             // cartData est déjà à jour depuis l'optimistic update
  1014.             console.log('Panier mis à jour avec succès');
  1015.         } else {
  1016.             // En cas d'erreur, restaurer la valeur précédente
  1017.             const oldQty = item.qty;
  1018.             updateCartDisplay(productId, oldQty);
  1019.             showAlert('Erreur', data.message || 'Erreur lors de la mise à jour du panier.', 'error');
  1020.         }
  1021.     })
  1022.     .catch(error => {
  1023.         console.error('Erreur:', error);
  1024.         // Restaurer la valeur précédente en cas d'erreur réseau
  1025.         const oldQty = item.qty;
  1026.         updateCartDisplay(productId, oldQty);
  1027.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  1028.     });
  1029. }
  1031. function updateCartDisplay(productId, qty) {
  1032.     const item = cartData[productId];
  1033.     if (!item) return;
  1034.     
  1035.     // Mettre à jour les données locales
  1036.     item.qty = qty;
  1037.     
  1038.     // Mettre à jour la quantité dans l'input
  1039.     const qtyInput = document.getElementById('qty-' + productId);
  1040.     if (qtyInput) {
  1041.         qtyInput.value = qty;
  1042.     }
  1043.     
  1044.     // Mettre à jour le total du produit
  1045.     const totalElement = document.getElementById('total-' + productId);
  1046.     if (totalElement) {
  1047.         const itemTotal = (item.price * qty);
  1048.         totalElement.textContent = itemTotal.toLocaleString('fr-FR', {
  1049.             minimumFractionDigits: 2,
  1050.             maximumFractionDigits: 2
  1051.         }) + ' HTG';
  1052.     }
  1053.     
  1054.     // Mettre à jour les totaux généraux
  1055.     updateCartSummary();
  1056. }
  1058. function updateCartTotals(data) {
  1059.     // Mettre à jour le sous-total depuis les données serveur
  1060.     const subtotalElement = document.getElementById('cart-subtotal');
  1061.     const totalElement = document.getElementById('cart-total');
  1062.     
  1063.     if (subtotalElement) {
  1064.         subtotalElement.textContent = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  1065.             minimumFractionDigits: 2,
  1066.             maximumFractionDigits: 2
  1067.         }) + ' HTG';
  1068.     }
  1069.     
  1070.     if (totalElement) {
  1071.         totalElement.textContent = parseFloat(data.subtotal).toLocaleString('fr-FR', {
  1072.             minimumFractionDigits: 2,
  1073.             maximumFractionDigits: 2
  1074.         }) + ' HTG';
  1075.     }
  1076.     
  1077.     // Mettre à jour le compteur d'articles
  1078.     const itemCountElement = document.querySelector('.cart-subtotal span');
  1079.     if (itemCountElement) {
  1080.         const totalItems = Object.values(cartData).reduce((sum, item) => sum + item.qty, 0);
  1081.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1082.         itemCountElement.textContent = itemText;
  1083.     }
  1084. }
  1086. function updateCartSummary() {
  1087.     // Calculer les totaux côté client depuis cartData
  1088.     let subtotal = 0;
  1089.     let totalItems = 0;
  1090.     
  1091.     Object.values(cartData).forEach(item => {
  1092.         subtotal += item.price * item.qty;
  1093.         totalItems += item.qty;
  1094.     });
  1095.     
  1096.     // Mettre à jour l'affichage du sous-total
  1097.     const subtotalElement = document.getElementById('cart-subtotal');
  1098.     if (subtotalElement) {
  1099.         subtotalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1100.             minimumFractionDigits: 2,
  1101.             maximumFractionDigits: 2
  1102.         }) + ' HTG';
  1103.     }
  1104.     
  1105.     // Mettre à jour l'affichage du total
  1106.     const totalElement = document.getElementById('cart-total');
  1107.     if (totalElement) {
  1108.         totalElement.textContent = subtotal.toLocaleString('fr-FR', {
  1109.             minimumFractionDigits: 2,
  1110.             maximumFractionDigits: 2
  1111.         }) + ' HTG';
  1112.     }
  1113.     
  1114.     // Mettre à jour le compteur d'articles
  1115.     const itemCountElement = document.getElementById('cart-item-count');
  1116.     if (itemCountElement) {
  1117.         itemCountElement.textContent = totalItems;
  1118.     }
  1119.     
  1120.     // Mettre à jour le label du sous-total
  1121.     const subtotalLabel = document.getElementById('cart-subtotal-label');
  1122.     if (subtotalLabel) {
  1123.         const itemText = totalItems + ' article' + (totalItems > 1 ? 's' : '');
  1124.         subtotalLabel.innerHTML = 'Sous-total (<span id="cart-item-count">' + totalItems + '</span> ' + (totalItems > 1 ? 'articles' : 'article') + ')';
  1125.     }
  1126. }
  1128. function removeFromCart(productId) {
  1129.     const item = cartData[productId];
  1130.     const itemName = item ? item.name : 'cet article';
  1131.     
  1132.     showConfirm(
  1133.         'Supprimer l\'article',
  1134.         `Êtes-vous sûr de vouloir supprimer "${itemName}" de votre panier ?`,
  1135.         function() {
  1136.             // Mettre à jour l'interface immédiatement
  1137.             const row = document.querySelector(`tr:has(#qty-${productId})`);
  1138.             if (row) {
  1139.                 row.style.opacity = '0.5';
  1140.                 row.style.pointerEvents = 'none';
  1141.             }
  1142.             
  1143.             performRemoveFromCart(productId, row);
  1144.         },
  1145.         null,
  1146.         'warning'
  1147.     );
  1148. }
  1150. function performRemoveFromCart(productId, row) {
  1151.     
  1152.     fetch('{{ path("ui_cart_remove") }}', {
  1153.         method: 'POST',
  1154.         headers: { 
  1155.             'Content-Type': 'application/x-www-form-urlencoded',
  1156.             'X-Requested-With': 'XMLHttpRequest'
  1157.         },
  1158.         body: 'productId=' + productId
  1159.     })
  1160.     .then(response => response.json())
  1161.     .then(data => {
  1162.         if (data.ok) {
  1163.             // Supprimer des données locales
  1164.             delete cartData[productId];
  1165.             
  1166.             // Supprimer la ligne du DOM
  1167.             const row = document.querySelector(`tr:has(#qty-${productId})`);
  1168.             if (row) {
  1169.                 row.remove();
  1170.             }
  1171.             
  1172.             // Mettre à jour les totaux
  1173.             updateCartTotals(data);
  1174.             
  1175.             // Mettre à jour le résumé du panier
  1176.             updateCartSummary();
  1177.             
  1178.             // Afficher un message de succès
  1179.             showAlert('Article supprimé', 'L\'article a été supprimé de votre panier avec succès.', 'success');
  1180.             
  1181.             // Vérifier si le panier est vide
  1182.             if (Object.keys(cartData).length === 0) {
  1183.                 setTimeout(function() {
  1184.                     location.reload();
  1185.                 }, 1500);
  1186.             }
  1187.         } else {
  1188.             // Restaurer l'affichage en cas d'erreur
  1189.             if (row) {
  1190.                 row.style.opacity = '1';
  1191.                 row.style.pointerEvents = 'auto';
  1192.             }
  1193.             showAlert('Erreur', data.message || 'Erreur lors de la suppression de l\'article.', 'error');
  1194.         }
  1195.     })
  1196.     .catch(error => {
  1197.         console.error('Erreur:', error);
  1198.         // Restaurer l'affichage en cas d'erreur réseau
  1199.         if (row) {
  1200.             row.style.opacity = '1';
  1201.             row.style.pointerEvents = 'auto';
  1202.         }
  1203.         showAlert('Erreur de connexion', 'Une erreur de connexion est survenue. Veuillez réessayer.', 'error');
  1204.     });
  1205. }
  1207. // Script pour forcer l'application des styles des boutons de quantité
  1208. document.addEventListener('DOMContentLoaded', function() {
  1209.     const quantityControls = document.querySelectorAll('.quantity-controls');
  1210.     quantityControls.forEach(function(control) {
  1211.         if (control) {
  1212.             // Forcer les styles sur le conteneur
  1213.             control.style.display = 'flex';
  1214.             control.style.alignItems = 'center';
  1215.             control.style.justifyContent = 'center';
  1216.             control.style.border = '1px solid #ddd';
  1217.             control.style.borderRadius = '4px';
  1218.             control.style.width = '120px';
  1219.             control.style.height = '40px';
  1220.             control.style.position = 'relative';
  1221.             control.style.background = 'white';
  1222.             control.style.overflow = 'hidden';
  1223.             
  1224.             // Forcer les styles sur les boutons
  1225.             const buttons = control.querySelectorAll('.quantity-btn');
  1226.             buttons.forEach(function(btn, index) {
  1227.                 btn.style.background = '#f8f8f8';
  1228.                 btn.style.border = 'none';
  1229.                 btn.style.width = '35px';
  1230.                 btn.style.height = '100%';
  1231.                 btn.style.cursor = 'pointer';
  1232.                 btn.style.fontSize = '18px';
  1233.                 btn.style.fontWeight = '600';
  1234.                 btn.style.color = '#333';
  1235.                 btn.style.display = 'flex';
  1236.                 btn.style.alignItems = 'center';
  1237.                 btn.style.justifyContent = 'center';
  1238.                 btn.style.padding = '0';
  1239.                 btn.style.margin = '0';
  1240.                 btn.style.lineHeight = '1';
  1241.                 btn.style.position = 'relative';
  1242.                 btn.style.zIndex = '1';
  1243.                 
  1244.                 // Ajouter les bordures entre les boutons
  1245.                 if (index === 0) {
  1246.                     btn.style.borderRight = '1px solid #ddd';
  1247.                 } else if (index === buttons.length - 1) {
  1248.                     btn.style.borderLeft = '1px solid #ddd';
  1249.                 }
  1250.             });
  1251.             
  1252.             // Forcer les styles sur l'input
  1253.             const input = control.querySelector('.quantity-input');
  1254.             if (input) {
  1255.                 input.style.border = 'none';
  1256.                 input.style.width = '50px';
  1257.                 input.style.height = '100%';
  1258.                 input.style.textAlign = 'center';
  1259.                 input.style.fontSize = '15px';
  1260.                 input.style.fontWeight = '500';
  1261.                 input.style.padding = '0';
  1262.                 input.style.margin = '0';
  1263.                 input.style.background = 'white';
  1264.                 input.style.color = '#333';
  1265.                 input.style.outline = 'none';
  1266.                 input.style.boxShadow = 'none';
  1267.                 input.style.position = 'relative';
  1268.                 input.style.zIndex = '1';
  1269.             }
  1270.         }
  1271.     });
  1272. });
  1274. </script>
  1275. {% endblock %}