templates/panier/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="{{ app.session.get('_locale') ?? 'en' }}">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>My Cart — Julico</title>
  7. <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  8. <link rel="stylesheet" href="/css/julico-home.css">
  9. <style>
  10. body{background:var(--gray-50);min-height:100vh}
  11. .cart-nav{background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}
  12. .cart-body{max-width:1280px;margin:0 auto;padding:32px 24px}
  13. .cart-title{font-size:28px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em;margin-bottom:6px}
  14. .cart-subtitle{font-size:14px;color:var(--gray-400);font-weight:500;margin-bottom:28px}
  15. .cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
  16. .cart-items{display:flex;flex-direction:column;gap:14px}
  17. .cart-empty{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rlg);padding:60px 24px;text-align:center;box-shadow:var(--shadow-sm)}
  18. .cart-empty-icon{font-size:64px;margin-bottom:16px}
  19. .cart-empty-title{font-size:20px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
  20. .cart-empty-sub{font-size:14px;color:var(--gray-400);margin-bottom:24px}
  21. .cart-item{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rlg);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
  22. .cart-item:hover{box-shadow:var(--shadow-md)}
  23. .cart-item-img{width:80px;height:80px;background:var(--gray-50);border-radius:var(--rsm);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  24. .cart-item-img img{width:100%;height:100%;object-fit:contain}
  25. .cart-item-info{flex:1}
  26. .cart-item-cat{font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px}
  27. .cart-item-name{font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:4px}
  28. .cart-item-variant{font-size:12px;color:var(--gray-400);font-weight:500}
  29. .cart-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
  30. .cart-item-price{font-size:20px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em}
  31. .cart-item-price sup{font-size:12px;font-weight:700;vertical-align:super}
  32. .cart-item-subtotal{font-size:11px;color:var(--gray-400);font-weight:500}
  33. .cart-qty{display:flex;align-items:center;border:1.5px solid var(--gray-200);border-radius:var(--rsm);overflow:hidden}
  34. .qty-btn{width:32px;height:32px;background:var(--white);border:none;color:var(--gray-700);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s;font-family:var(--font);display:flex;align-items:center;justify-content:center;touch-action:manipulation;}
  35. .qty-btn:hover{background:var(--brand-light);color:var(--brand)}
  36. .qty-btn:disabled{opacity:0.4;cursor:not-allowed}
  37. .qty-num{width:36px;height:32px;border:none;border-left:1px solid var(--gray-200);border-right:1px solid var(--gray-200);text-align:center;font-family:var(--font);font-size:14px;font-weight:700;color:var(--gray-900);background:var(--white);outline:none}
  38. .remove-btn{color:var(--gray-400);cursor:pointer;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s;background:none;border:none;font-family:var(--font);padding:0}
  39. .remove-btn:hover{color:#ef4444}
  40. .cart-summary{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rlg);padding:24px;box-shadow:var(--shadow-sm);position:sticky;top:88px}
  41. .summary-title{font-size:18px;font-weight:800;color:var(--gray-900);margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gray-100)}
  42. .summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px}
  43. .summary-row .label{color:var(--gray-500);font-weight:500}
  44. .summary-row .value{font-weight:700;color:var(--gray-800)}
  45. .summary-divider{border:none;border-top:1px solid var(--gray-100);margin:16px 0}
  46. .summary-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
  47. .summary-total .label{font-size:16px;font-weight:700;color:var(--gray-900)}
  48. .summary-total .value{font-size:22px;font-weight:800;color:var(--brand)}
  49. .btn-checkout{width:100%;height:50px;background:var(--brand);color:white;border:none;border-radius:var(--rsm);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
  50. .btn-checkout:hover{background:var(--brand-dark)}
  51. .btn-continue{width:100%;height:44px;background:var(--white);color:var(--gray-700);border:1.5px solid var(--gray-200);border-radius:var(--rsm);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:flex;align-items:center;justify-content:center}
  52. .btn-continue:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
  53. .trust-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-100)}
  54. .trust-chip{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--gray-500)}
  55. .updating{opacity:0.5;pointer-events:none}
  56. @media(max-width:768px){.cart-layout{grid-template-columns:1fr}.cart-item{flex-wrap:wrap}}
  57. </style>
  58. </head>
  59. <body>
  61. <nav class="cart-nav">
  62.   <a href="{{ path('app_home') }}">
  63.     <img src="/images/julico-logo.png" alt="Julico" style="height:48px;object-fit:contain">
  64.   </a>
  65.   <div style="font-size:18px;font-weight:800;color:var(--gray-900)">🛒 My Cart</div>
  66.   <a href="{{ path('app_home') }}" style="font-size:13px;font-weight:600;color:var(--gray-500);text-decoration:none">← Continue Shopping</a>
  67. </nav>
  69. <div class="cart-body">
  70.   <div class="cart-title">Shopping Cart</div>
  71.   <div class="cart-subtitle" id="cart-subtitle">
  72.     {% if items|length > 0 %}
  73.       {{ items|length }} item{% if items|length > 1 %}s{% endif %} in your cart
  74.     {% else %}
  75.       Your cart is empty
  76.     {% endif %}
  77.   </div>
  79.   <div class="cart-layout">
  80.     <div class="cart-items">
  82.       {% if items|length > 0 %}
  83.         {% for item in items %}
  85.           {% set unitPrice = item.product.prix %}
  86.           {% if item.product.salePrice is defined and item.product.salePrice is not null and item.product.salePrice > 0 %}
  87.             {% set unitPrice = item.product.salePrice %}
  88.           {% endif %}
  90.           {% set variantId = 'notdefined' %}
  92.           <div class="cart-item" id="cart-item-{{ item.product.id }}"
  93.                data-id="{{ item.product.id }}"
  94.                data-variant="{{ variantId }}"
  95.                data-price="{{ unitPrice }}"
  96.                data-qty="{{ item.quantity }}"
  97.                data-csrf="{{ csrf_token('authenticate') }}"
  98.                data-add-url="{{ path('panier_add',   {'id': item.product.id, 'idVariante': variantId, 'option': 'continue'}) }}"
  99.                data-minus-url="{{ path('panier_minus', {'id': item.product.id, 'idVariante': variantId, 'option': 'continue'}) }}"
  100.                data-remove-url="{{ path('panier_remove', {'id': item.product.id, 'idVariante': variantId}) }}">
  102.             {# Image — fixed path #}
  103.             <div class="cart-item-img">
  104.               {% if item.product.images|length > 0 %}
  105.                 <img src="{{ asset('assets/uploads/products/' ~ item.product.images[0].fileName) }}"
  106.                      alt="{{ item.product.productName }}"
  107.                      onerror="this.onerror=null;this.parentNode.innerHTML='<span style=font-size:32px;opacity:0.3>📦</span>'">
  108.               {% else %}
  109.                 <span style="font-size:32px;opacity:0.3">📦</span>
  110.               {% endif %}
  111.             </div>
  113.             <div class="cart-item-info">
  114.               <div class="cart-item-cat">
  115.                 {% if item.product.category is defined and item.product.category %}{{ item.product.category.nom }}{% endif %}
  116.                 {% if item.product.magasin is defined and item.product.magasin %} · {{ item.product.magasin.nom }}{% endif %}
  117.               </div>
  118.               <a href="{{ path('show_produit', {'id': item.product.id}) }}" style="text-decoration:none">
  119.                 <div class="cart-item-name">{{ item.product.productName }}</div>
  120.               </a>
  121.               {% if item.productVariant is defined and item.productVariant %}
  122.                 <div class="cart-item-variant">
  123.                   {% if item.productVariant.paramColor is defined and item.productVariant.paramColor %}Color: {{ item.productVariant.paramColor.colorName }}{% endif %}
  124.                   {% if item.productVariant.paramSize is defined and item.productVariant.paramSize %} · Size: {{ item.productVariant.paramSize.sizeAbreviation }}{% endif %}
  125.                 </div>
  126.               {% endif %}
  127.             </div>
  129.             <div class="cart-item-right">
  130.               <div class="cart-item-price"><sup>$</sup>{{ unitPrice|number_format(2) }}</div>
  131.               <div class="cart-item-subtotal" id="subtotal-{{ item.product.id }}">
  132.                 × {{ item.quantity }} = ${{ (unitPrice * item.quantity)|number_format(2) }}
  133.               </div>
  135.               {# Qty controls — AJAX, no page reload #}
  136.               <div class="cart-qty">
  137.                 <button type="button" class="qty-btn btn-minus" data-action="minus" title="Remove one">−</button>
  138.                 <input type="number" class="qty-num" value="{{ item.quantity }}" readonly>
  139.                 <button type="button" class="qty-btn btn-plus" data-action="plus" title="Add one">+</button>
  140.               </div>
  142.               <button type="button" class="remove-btn btn-remove">🗑 Remove</button>
  143.             </div>
  145.           </div>
  146.         {% endfor %}
  148.       {% else %}
  149.         <div class="cart-empty">
  150.           <div class="cart-empty-icon">🛒</div>
  151.           <div class="cart-empty-title">Your cart is empty</div>
  152.           <div class="cart-empty-sub">Looks like you haven't added anything yet.</div>
  153.           <a href="{{ path('app_home') }}" class="btn-checkout" style="max-width:220px;margin:0 auto">Browse Products →</a>
  154.         </div>
  155.       {% endif %}
  157.     </div>
  159.     {% if items|length > 0 %}
  160.     <div class="cart-summary">
  161.       <div class="summary-title">Order Summary</div>
  162.       <div class="summary-row">
  163.         <span class="label">Subtotal</span>
  164.         <span class="value" id="summary-subtotal">${{ (total - frais)|number_format(2) }}</span>
  165.       </div>
  166.       <div class="summary-row">
  167.         <span class="label">Delivery</span>
  168.         <span class="value" style="color:var(--green)">
  169.           {% if frais == 0 %}Free{% else %}${{ frais|number_format(2) }}{% endif %}
  170.         </span>
  171.       </div>
  172.       <hr class="summary-divider">
  173.       <div class="summary-total">
  174.         <span class="label">Total</span>
  175.         <span class="value" id="summary-total">${{ total|number_format(2) }}</span>
  176.       </div>
  178.       {% if app.user %}
  179.         <form action="{{ path('panier_validationcmd', {'option': 'goprofile', 'addresseid': 'notdefined', 'cmdid': 'notdefined'}) }}" method="POST">
  180.           <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  181.           <button type="submit" class="btn-checkout">Proceed to Checkout →</button>
  182.         </form>
  183.       {% else %}
  184.         <a href="/login" class="btn-checkout">Sign In to Checkout →</a>
  185.       {% endif %}
  187.       <a href="{{ path('app_home') }}" class="btn-continue">← Continue Shopping</a>
  189.       <div class="trust-chips">
  190.         <div class="trust-chip">🔒 Secure checkout</div>
  191.         <div class="trust-chip">🚚 Fast delivery</div>
  192.         <div class="trust-chip">↩️ Easy returns</div>
  193.       </div>
  194.     </div>
  195.     {% endif %}
  197.   </div>
  198. </div>
  200. <script>
  201. // ── Cart item AJAX handlers ────────────────────────────────────
  202. var frais = {{ frais }};
  204. document.addEventListener('DOMContentLoaded', function() {
  206.   document.querySelectorAll('.cart-item').forEach(function(itemEl) {
  207.     var id        = itemEl.dataset.id;
  208.     var csrf      = itemEl.dataset.csrf;
  209.     var addUrl    = itemEl.dataset.addUrl;
  210.     var minusUrl  = itemEl.dataset.minusUrl;
  211.     var removeUrl = itemEl.dataset.removeUrl;
  212.     var price     = parseFloat(itemEl.dataset.price);
  214.     var qtyInput  = itemEl.querySelector('.qty-num');
  215.     var subtotal  = document.getElementById('subtotal-' + id);
  216.     var plusBtn   = itemEl.querySelector('.btn-plus');
  217.     var minusBtn  = itemEl.querySelector('.btn-minus');
  218.     var removeBtn = itemEl.querySelector('.btn-remove');
  220.     // ── + button ──
  221.     plusBtn.addEventListener('click', function() {
  222.       ajaxQty(addUrl, id, csrf, price, 1, itemEl, qtyInput, subtotal);
  223.     });
  225.     // ── − button ──
  226.     minusBtn.addEventListener('click', function() {
  227.       var qty = parseInt(qtyInput.value);
  228.       if (qty <= 1) {
  229.         // Remove item
  230.         ajaxRemove(removeUrl, id, itemEl);
  231.       } else {
  232.         ajaxQty(minusUrl, id, csrf, price, -1, itemEl, qtyInput, subtotal);
  233.       }
  234.     });
  236.     // ── Remove button ──
  237.     removeBtn.addEventListener('click', function() {
  238.       ajaxRemove(removeUrl, id, itemEl);
  239.     });
  240.   });
  242. });
  244. function ajaxQty(url, id, csrf, price, delta, itemEl, qtyInput, subtotalEl) {
  245.   itemEl.classList.add('updating');
  247.   var formData = new FormData();
  248.   formData.append('_csrf_token', csrf);
  249.   formData.append('productid',   id);
  250.   formData.append('qttprdid',    '1');
  252.   var xhr = new XMLHttpRequest();
  253.   xhr.open('POST', url);
  254.   xhr.withCredentials = true;
  255.   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  256.   xhr.setRequestHeader('Accept', 'application/json');
  257.   xhr.onload = function() {
  258.     itemEl.classList.remove('updating');
  259.     if (xhr.status === 200) {
  260.       try {
  261.         var data = JSON.parse(xhr.responseText);
  262.         if (data.success) {
  263.           var newQty = parseInt(qtyInput.value) + delta;
  264.           qtyInput.value = newQty;
  265.           if (subtotalEl) {
  266.             var sub = price * newQty;
  267.             subtotalEl.textContent = '× ' + newQty + ' = $' + sub.toFixed(2);
  268.           }
  269.           updateSummary(price * delta);
  270.         }
  271.       } catch(e) {
  272.         // JSON parse failed — don't reload, just ignore
  273.         var newQty = parseInt(qtyInput.value) + delta;
  274.         qtyInput.value = Math.max(0, newQty);
  275.         if (subtotalEl && newQty > 0) {
  276.           subtotalEl.textContent = '× ' + newQty + ' = $' + (price * newQty).toFixed(2);
  277.         }
  278.         updateSummary(price * delta);
  279.       }
  280.     }
  281.   };
  282.   xhr.onerror = function() {
  283.     itemEl.classList.remove('updating');
  284.   };
  285.   xhr.send(formData);
  286. }
  288. function ajaxRemove(url, id, itemEl) {
  289.   itemEl.classList.add('updating');
  291.   // Check if this is the last item BEFORE removing
  292.   var remaining = document.querySelectorAll('.cart-item');
  293.   var isLast = remaining.length === 1;
  295.   var xhr = new XMLHttpRequest();
  296.   xhr.open('GET', url);
  297.   xhr.withCredentials = true;
  298.   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  299.   xhr.setRequestHeader('Accept', 'application/json');
  300.   xhr.onload = function() {
  301.     if (isLast) {
  302.       // Last item — reload immediately to show empty cart
  303.       window.location.reload();
  304.       return;
  305.     }
  306.     // Animate removal
  307.     itemEl.style.transition = 'all 0.3s';
  308.     itemEl.style.opacity = '0';
  309.     itemEl.style.height = itemEl.offsetHeight + 'px';
  310.     setTimeout(function() {
  311.       itemEl.style.height = '0';
  312.       itemEl.style.padding = '0';
  313.       itemEl.style.margin = '0';
  314.       itemEl.style.overflow = 'hidden';
  315.       setTimeout(function() { itemEl.remove(); }, 300);
  316.     }, 300);
  317.     // Update summary
  318.     var price = parseFloat(itemEl.dataset.price);
  319.     var qty   = parseInt(itemEl.querySelector('.qty-num').value);
  320.     updateSummary(-(price * qty));
  321.   };
  322.   xhr.onerror = function() { window.location.href = url; };
  323.   xhr.send();
  324. }
  326. function updateSummary(priceDelta) {
  327.   var subtotalEl = document.getElementById('summary-subtotal');
  328.   var totalEl    = document.getElementById('summary-total');
  330.   if (subtotalEl) {
  331.     var sub = parseFloat(subtotalEl.textContent.replace('$','').replace(',','')) + priceDelta;
  332.     subtotalEl.textContent = '$' + Math.max(0, sub).toFixed(2);
  333.   }
  334.   if (totalEl) {
  335.     var tot = parseFloat(totalEl.textContent.replace('$','').replace(',','')) + priceDelta;
  336.     totalEl.textContent = '$' + Math.max(0, tot + frais).toFixed(2);
  337.   }
  338. }
  339. </script>
  340. </body>
  341. </html>