templates/produit/show.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>{{ produit.productName }} — 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. .prod-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. .prod-body{max-width:1280px;margin:0 auto;padding:28px 24px}
  13. .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-400);margin-bottom:24px;flex-wrap:wrap}
  14. .breadcrumb a{color:var(--gray-400);text-decoration:none;transition:color .2s}
  15. .breadcrumb a:hover{color:var(--brand)}
  16. .breadcrumb span{color:var(--gray-800);font-weight:600}
  17. .prod-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  18. .main-image{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rlg);overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:var(--shadow-sm);position:relative}
  19. .main-image img{width:80%;height:80%;object-fit:contain;transition:transform .3s}
  20. .main-image:hover img{transform:scale(1.05)}
  21. .main-image .no-img{font-size:80px;opacity:0.2}
  22. .thumb-grid{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
  23. .thumb-grid::-webkit-scrollbar{display:none}
  24. .thumb{width:72px;height:72px;background:var(--white);border:2px solid var(--gray-200);border-radius:var(--rsm);overflow:hidden;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .2s}
  25. .thumb:hover,.thumb.active{border-color:var(--brand)}
  26. .thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none}
  27. .prod-info{}
  28. .prod-badges{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  29. .prod-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px}
  30. .badge-promo{background:#fef3c7;color:#b45309}
  31. .badge-new{background:#dcfce7;color:#166534}
  32. .badge-b2b{background:var(--brand-light);color:var(--brand-dark)}
  33. .badge-oos{background:#fee2e2;color:#991b1b}
  34. .prod-name{font-size:28px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em;line-height:1.2;margin-bottom:8px}
  35. .prod-cat{font-size:13px;font-weight:600;color:var(--brand);margin-bottom:16px}
  36. .prod-desc{font-size:14px;color:var(--gray-500);line-height:1.7;margin-bottom:20px}
  37. .prod-price-box{background:var(--brand-light);border:1.5px solid var(--brand-mid);border-radius:var(--r);padding:20px;margin-bottom:20px}
  38. .prod-price{font-size:36px;font-weight:800;color:var(--brand);letter-spacing:-0.02em;line-height:1}
  39. .prod-price sup{font-size:18px;font-weight:700;vertical-align:super}
  40. .prod-old-price{font-size:16px;color:var(--gray-400);text-decoration:line-through;font-weight:500;margin-top:4px}
  41. .prod-tax{font-size:12px;color:var(--gray-400);margin-top:6px}
  42. .prod-stock{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:20px}
  43. .stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  44. .stock-in{background:#22c55e}
  45. .stock-out{background:#ef4444}
  46. .variants-section{margin-bottom:20px}
  47. .variants-label{font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:10px}
  48. .color-options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  49. .color-opt{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;outline:2px solid var(--gray-200)}
  50. .color-opt:hover,.color-opt.active{outline-color:var(--brand);outline-offset:2px}
  51. .size-options{display:flex;gap:8px;flex-wrap:wrap}
  52. .size-opt{padding:8px 16px;border:1.5px solid var(--gray-200);border-radius:var(--rsm);font-size:13px;font-weight:600;color:var(--gray-700);cursor:pointer;transition:all .2s;background:var(--white);font-family:var(--font)}
  53. .size-opt:hover,.size-opt.active{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
  54. .prod-actions{display:flex;gap:12px;align-items:center;margin-bottom:20px}
  55. .qty-wrap{display:flex;align-items:center;gap:0;border:1.5px solid var(--gray-200);border-radius:var(--rsm);overflow:hidden;background:var(--white)}
  56. .qty-btn-large{width:44px;height:50px;background:var(--white);border:none;color:var(--gray-700);font-size:20px;font-weight:600;cursor:pointer;transition:background .2s;font-family:var(--font)}
  57. .qty-btn-large:hover{background:var(--gray-100)}
  58. .qty-input{width:60px;height:50px;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:16px;font-weight:700;color:var(--gray-900);outline:none}
  59. .btn-add-cart{flex:1;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;display:flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
  60. .btn-add-cart:hover{background:var(--brand-dark)}
  61. .btn-checkout-now{flex:1;height:50px;background:var(--gray-900);color:white;border:none;border-radius:var(--rsm);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
  62. .btn-checkout-now:hover{background:var(--gray-700)}
  63. .info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
  64. .info-card{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--r);padding:14px;text-align:center;box-shadow:var(--shadow-sm)}
  65. .info-card-icon{font-size:22px;margin-bottom:6px}
  66. .info-card-title{font-size:12px;font-weight:700;color:var(--gray-700)}
  67. .info-card-sub{font-size:11px;color:var(--gray-400);margin-top:2px}
  68. .cart-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--gray-900);color:white;padding:14px 24px;border-radius:100px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:12px;box-shadow:0 8px 32px rgba(0,0,0,0.25);z-index:400;opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap}
  69. .cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  70. .cart-toast a{color:var(--brand);font-weight:700;text-decoration:none;margin-left:4px}
  71. @media(max-width:900px){.prod-layout{grid-template-columns:1fr}.prod-actions{flex-wrap:wrap}}
  72. </style>
  73. </head>
  74. <body>
  76. <nav class="prod-nav">
  77.   <a href="{{ path('app_home') }}">
  78.     <img src="/images/julico-logo.png" alt="Julico" style="height:48px;object-fit:contain">
  79.   </a>
  80.   <div style="display:flex;align-items:center;gap:12px">
  81.     <a href="{{ path('app_panier') }}" style="display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gray-600);text-decoration:none;padding:8px 14px;border:1.5px solid var(--gray-200);border-radius:var(--rsm)">
  82.       🛒 Cart
  83.     </a>
  84.     {% if app.user %}
  85.       <a href="{{ path('app_orders') }}" style="font-size:13px;font-weight:600;color:var(--gray-600);text-decoration:none;padding:8px 14px;border:1.5px solid var(--gray-200);border-radius:var(--rsm)">📦 Orders</a>
  86.       <a href="{{ path('app_profile') }}" style="font-size:13px;font-weight:600;color:var(--brand);text-decoration:none">{{ app.user.pseudo }}</a>
  87.     {% else %}
  88.       <a href="/login" style="font-size:13px;font-weight:600;color:var(--brand);text-decoration:none">Sign In</a>
  89.     {% endif %}
  90.   </div>
  91. </nav>
  93. <div class="prod-body">
  95.   <div class="breadcrumb">
  96.     <a href="{{ path('app_home') }}">Home</a> ›
  97.     {% if produit.category is defined and produit.category %}
  98.       <a href="{{ path('app_home') }}">{{ produit.category.nom }}</a> ›
  99.     {% endif %}
  100.     <span>{{ produit.productName }}</span>
  101.   </div>
  103.   <div class="prod-layout">
  105.     <!-- IMAGES -->
  106.     <div class="prod-images">
  107.       <div class="main-image">
  108.         {% if produit.images|length > 0 %}
  109.           {# ── Main image — src set by JS on thumb click ── #}
  110.           <img id="main-img"
  111.                src="{{ asset('assets/uploads/products/' ~ produit.images|first.fileName) }}"
  112.                alt="{{ produit.productName }}"
  113.                onerror="this.onerror=null;this.parentNode.innerHTML='<div class=no-img>📦</div>'">
  114.         {% else %}
  115.           <div class="no-img">📦</div>
  116.         {% endif %}
  117.       </div>
  119.       {% if produit.images|length > 1 %}
  120.       <div class="thumb-grid" id="thumb-grid">
  121.         {% for image in produit.images %}
  122.         <div class="thumb {% if loop.first %}active{% endif %}"
  123.              data-src="{{ asset('assets/uploads/products/' ~ image.fileName) }}"
  124.              data-fallback="/assets/uploads/products/{{ image.fileName }}">
  125.           <img src="{{ asset('assets/uploads/products/' ~ image.fileName) }}"
  126.                alt="{{ loop.index }}"
  127.                onerror="this.onerror=null;this.src='/assets/uploads/products/{{ image.fileName }}'">
  128.         </div>
  129.         {% endfor %}
  130.       </div>
  131.       {% endif %}
  132.     </div>
  134.     <!-- INFO -->
  135.     <div class="prod-info">
  137.       <div class="prod-badges">
  138.         {% if produit.promo %}<span class="prod-badge badge-promo">🔥 On Promo</span>{% endif %}
  139.         {% if produit.qtt > 0 %}
  140.           <span class="prod-badge badge-new">✅ In Stock</span>
  141.         {% else %}
  142.           <span class="prod-badge badge-oos">❌ Out of Stock</span>
  143.         {% endif %}
  144.         {% if produit.magasin is defined and produit.magasin %}
  145.           <span class="prod-badge badge-b2b">{{ produit.magasin.nom }}</span>
  146.         {% endif %}
  147.       </div>
  149.       <div class="prod-name">{{ produit.productName }}</div>
  150.       <div class="prod-cat">
  151.         {% if produit.category is defined and produit.category %}{{ produit.category.nom }}{% endif %}
  152.         {% if produit.magasin is defined and produit.magasin %} · {{ produit.magasin.nom }}{% endif %}
  153.       </div>
  154.       <div class="prod-desc">{{ produit.description }}</div>
  156.       <div class="prod-price-box">
  157.         {% if produit.promo and produit.salePrice and produit.salePrice > 0 and produit.salePrice < produit.prix %}
  158.           <div class="prod-price"><sup>$</sup>{{ produit.salePrice|number_format(2) }}</div>
  159.           <div class="prod-old-price">${{ produit.prix|number_format(2) }}</div>
  160.         {% else %}
  161.           <div class="prod-price"><sup>$</sup>{{ produit.prix|number_format(2) }}</div>
  162.         {% endif %}
  163.         <div class="prod-tax">Price includes applicable taxes</div>
  164.       </div>
  166.       <div class="prod-stock">
  167.         <span class="stock-dot {{ produit.qtt > 0 ? 'stock-in' : 'stock-out' }}"></span>
  168.         {% if produit.qtt > 0 %}
  169.           <span style="color:#16a34a">In Stock ({{ produit.qtt }} available)</span>
  170.         {% else %}
  171.           <span style="color:#dc2626">Out of Stock</span>
  172.         {% endif %}
  173.       </div>
  175.       {% if groupedVariantscolor|length > 0 %}
  176.       <div class="variants-section">
  177.         <div class="variants-label">Color:</div>
  178.         <div class="color-options">
  179.           {% for color, variants in groupedVariantscolor %}
  180.           <div class="color-opt" data-color="{{ color }}"
  181.                style="background-color:{{ color }}" title="{{ color }}"></div>
  182.           {% endfor %}
  183.         </div>
  184.       </div>
  185.       {% endif %}
  187.       {% if groupedVariantssize|length > 0 %}
  188.       <div class="variants-section">
  189.         <div class="variants-label">Size:</div>
  190.         <div class="size-options">
  191.           {% for size, variants in groupedVariantssize %}
  192.           <button type="button" class="size-opt" data-size="{{ size }}">{{ size }}</button>
  193.           {% endfor %}
  194.         </div>
  195.       </div>
  196.       {% endif %}
  198.       {% if produit.qtt > 0 %}
  199.       <form method="post" id="cart-form">
  200.         <input type="hidden" id="chosenColor" name="chosenColor">
  201.         <input type="hidden" id="chosenSize"  name="chosenSize">
  202.         <input type="hidden" name="productid"   value="{{ produit.id }}">
  203.         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  205.         <div class="prod-actions">
  206.           <div class="qty-wrap">
  207.             <button type="button" class="qty-btn-large" id="qty-minus">−</button>
  208.             <input type="number" class="qty-input" id="qttprdid" name="qttprdid"
  209.                    min="1" max="{{ produit.qtt }}" value="1">
  210.             <button type="button" class="qty-btn-large" id="qty-plus">+</button>
  211.           </div>
  213.           <button type="button" class="btn-add-cart" id="btn-add-cart"
  214.                   data-add-url="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'continue'}) }}">
  215.             🛒 Add to Cart
  216.           </button>
  218.           <button type="submit" class="btn-checkout-now"
  219.                   formaction="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'done'}) }}">
  220.             ⚡ Buy Now
  221.           </button>
  222.         </div>
  223.       </form>
  224.       {% else %}
  225.       <div style="background:#fee2e2;border:1.5px solid #fecaca;border-radius:var(--rsm);padding:16px;text-align:center;color:#dc2626;font-weight:600;margin-bottom:20px">
  226.         ❌ This product is currently out of stock
  227.       </div>
  228.       {% endif %}
  230.       <div class="info-cards">
  231.         <div class="info-card"><div class="info-card-icon">🚚</div><div class="info-card-title">Fast Delivery</div><div class="info-card-sub">Next-day dispatch</div></div>
  232.         <div class="info-card"><div class="info-card-icon">🔒</div><div class="info-card-title">Secure Payment</div><div class="info-card-sub">100% protected</div></div>
  233.         <div class="info-card"><div class="info-card-icon">↩️</div><div class="info-card-title">Easy Returns</div><div class="info-card-sub">Hassle-free policy</div></div>
  234.       </div>
  236.     </div>
  237.   </div>
  238. </div>
  240. <div class="cart-toast" id="cart-toast">
  241.   <span>✓ Added to cart!</span>
  242.   <a href="{{ path('app_panier') }}">View Cart →</a>
  243. </div>
  245. <script>
  246. // ── IMAGE GALLERY — data-src approach, no inline onclick ──
  247. document.addEventListener('DOMContentLoaded', function() {
  249.   // Thumbnail click — switch main image
  250.   var thumbGrid = document.getElementById('thumb-grid');
  251.   if (thumbGrid) {
  252.     thumbGrid.addEventListener('click', function(e) {
  253.       var thumb = e.target.closest('.thumb');
  254.       if (!thumb) return;
  256.       var src      = thumb.dataset.src;
  257.       var fallback = thumb.dataset.fallback;
  258.       var mainImg  = document.getElementById('main-img');
  260.       if (mainImg && src) {
  261.         mainImg.src = src;
  262.         mainImg.onerror = function() {
  263.           this.onerror = null;
  264.           this.src = fallback;
  265.         };
  266.       }
  268.       // Update active state
  269.       document.querySelectorAll('.thumb').forEach(function(t) {
  270.         t.classList.remove('active');
  271.       });
  272.       thumb.classList.add('active');
  273.     });
  274.   }
  276.   // ── Qty buttons ──
  277.   var qtyInput = document.getElementById('qttprdid');
  278.   var qtyMinus = document.getElementById('qty-minus');
  279.   var qtyPlus  = document.getElementById('qty-plus');
  281.   if (qtyMinus && qtyInput) {
  282.     qtyMinus.addEventListener('click', function() {
  283.       var val = parseInt(qtyInput.value) - 1;
  284.       qtyInput.value = Math.max(1, val);
  285.     });
  286.   }
  287.   if (qtyPlus && qtyInput) {
  288.     qtyPlus.addEventListener('click', function() {
  289.       var val = parseInt(qtyInput.value) + 1;
  290.       var max = parseInt(qtyInput.max) || 999;
  291.       qtyInput.value = Math.min(max, val);
  292.     });
  293.   }
  295.   // ── Color selection ──
  296.   document.querySelectorAll('.color-opt').forEach(function(el) {
  297.     el.addEventListener('click', function() {
  298.       document.querySelectorAll('.color-opt').forEach(function(c) { c.classList.remove('active'); });
  299.       el.classList.add('active');
  300.       var chosenColor = document.getElementById('chosenColor');
  301.       if (chosenColor) chosenColor.value = el.dataset.color;
  302.     });
  303.   });
  305.   // ── Size selection ──
  306.   document.querySelectorAll('.size-opt').forEach(function(el) {
  307.     el.addEventListener('click', function() {
  308.       document.querySelectorAll('.size-opt').forEach(function(s) { s.classList.remove('active'); });
  309.       el.classList.add('active');
  310.       var chosenSize = document.getElementById('chosenSize');
  311.       if (chosenSize) chosenSize.value = el.dataset.size;
  312.     });
  313.   });
  315.   // ── AJAX Add to Cart ──
  316.   var addBtn = document.getElementById('btn-add-cart');
  317.   if (addBtn) {
  318.     addBtn.addEventListener('click', function() {
  319.       var form    = document.getElementById('cart-form');
  320.       var addUrl  = addBtn.dataset.addUrl;
  321.       var origTxt = addBtn.innerHTML;
  323.       addBtn.innerHTML  = '…';
  324.       addBtn.style.opacity = '0.7';
  325.       addBtn.disabled   = true;
  327.       var formData = new FormData(form);
  329.       var xhr = new XMLHttpRequest();
  330.       xhr.open('POST', addUrl);
  331.       xhr.withCredentials = true;
  332.       xhr.onload = function() {
  333.         // Show toast
  334.         var toast = document.getElementById('cart-toast');
  335.         if (toast) {
  336.           toast.classList.add('show');
  337.           setTimeout(function() { toast.classList.remove('show'); }, 4000);
  338.         }
  339.         addBtn.innerHTML = '✓ Added!';
  340.         addBtn.style.background = '#16a34a';
  341.         addBtn.style.opacity = '1';
  342.         setTimeout(function() {
  343.           addBtn.innerHTML = origTxt;
  344.           addBtn.style.background = '';
  345.           addBtn.disabled = false;
  346.         }, 1500);
  347.       };
  348.       xhr.onerror = function() {
  349.         // Fallback: normal submit
  350.         addBtn.innerHTML = origTxt;
  351.         addBtn.style.opacity = '1';
  352.         addBtn.disabled = false;
  353.         form.action = addUrl;
  354.         form.submit();
  355.       };
  356.       xhr.send(formData);
  357.     });
  358.   }
  360. });
  361. </script>
  362. </body>
  363. </html>