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. *, *::before, *::after { box-sizing: border-box; }
  11. html, body { max-width: 100%; overflow-x: hidden; }
  12. img, video, iframe { max-width: 100%; height: auto; }
  14. body{background:var(--gray-50);min-height:100vh}
  15. .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}
  16. .prod-body{max-width:1280px;margin:0 auto;padding:28px 24px}
  17. .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-400);margin-bottom:24px;flex-wrap:wrap}
  18. .breadcrumb a{color:var(--gray-400);text-decoration:none;transition:color .2s}
  19. .breadcrumb a:hover{color:var(--brand)}
  20. .breadcrumb span{color:var(--gray-800);font-weight:600}
  21. .prod-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  22. .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}
  23. .main-image img{width:80%;height:80%;object-fit:contain;transition:transform .3s}
  24. .main-image:hover img{transform:scale(1.05)}
  25. .main-image .no-img{font-size:80px;opacity:0.2}
  26. .thumb-grid{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
  27. .thumb-grid::-webkit-scrollbar{display:none}
  28. .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}
  29. .thumb:hover,.thumb.active{border-color:var(--brand)}
  30. .thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none}
  31. .prod-info{}
  32. .prod-badges{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  33. .prod-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px}
  34. .badge-promo{background:#fef3c7;color:#b45309}
  35. .badge-new{background:#dcfce7;color:#166534}
  36. .badge-b2b{background:var(--brand-light);color:var(--brand-dark)}
  37. .badge-oos{background:#fee2e2;color:#991b1b}
  38. .prod-name{font-size:28px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em;line-height:1.2;margin-bottom:8px}
  39. .prod-cat{font-size:13px;font-weight:600;color:var(--brand);margin-bottom:16px}
  40. .prod-desc{font-size:14px;color:var(--gray-500);line-height:1.7;margin-bottom:20px}
  41. .prod-price-box{background:var(--brand-light);border:1.5px solid var(--brand-mid);border-radius:var(--r);padding:20px;margin-bottom:14px}
  42. .prod-price{font-size:36px;font-weight:800;color:var(--brand);letter-spacing:-0.02em;line-height:1}
  43. .prod-price sup{font-size:18px;font-weight:700;vertical-align:super}
  44. .prod-old-price{font-size:16px;color:var(--gray-400);text-decoration:line-through;font-weight:500;margin-top:4px}
  45. .prod-tax{font-size:12px;color:var(--gray-400);margin-top:6px}
  46. .delivery-card{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--r);padding:14px 16px;margin-bottom:18px;display:flex;align-items:flex-start;gap:12px}
  47. .delivery-card.ok{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border-color:#86efac}
  48. .delivery-card.no{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#fca5a5}
  49. .delivery-card.warn{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fcd34d}
  50. .delivery-card .dc-icon{font-size:22px;line-height:1;flex:0 0 22px}
  51. .delivery-card .dc-body{flex:1;font-size:13px;line-height:1.5}
  52. .delivery-card .dc-title{font-weight:800;color:var(--gray-900);margin-bottom:2px}
  53. .delivery-card.ok .dc-title{color:#166534}
  54. .delivery-card.no .dc-title{color:#991b1b}
  55. .delivery-card.warn .dc-title{color:#92400e}
  56. .delivery-card .dc-sub{color:var(--gray-500);font-size:12px}
  57. .delivery-card .dc-sub a{color:var(--brand);font-weight:700;text-decoration:none}
  58. .delivery-card .dc-fee{font-weight:800;color:var(--gray-900);font-size:14px}
  59. .prod-stock{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:20px}
  60. .stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  61. .stock-in{background:#22c55e}
  62. .stock-out{background:#ef4444}
  63. .variants-section{margin-bottom:20px}
  64. .variants-label{font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:10px}
  65. .color-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  66. .color-opt{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;outline:2px solid var(--gray-200);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  67. .color-opt:hover,.color-opt.active{outline-color:var(--brand);outline-offset:2px}
  68. .size-options{display:flex;gap:8px;flex-wrap:wrap}
  69. .size-opt{min-height:44px;padding:10px 18px;border:1.5px solid var(--gray-200);border-radius:var(--rsm);font-size:14px;font-weight:600;color:var(--gray-700);cursor:pointer;transition:all .2s;background:var(--white);font-family:var(--font);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  70. .size-opt:hover,.size-opt.active{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
  71. .variant-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
  72. .variant-card{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--rsm);background:var(--white);cursor:pointer;font-family:var(--font);transition:all .2s;-webkit-tap-highlight-color:transparent}
  73. .variant-card:hover{border-color:var(--brand);background:var(--brand-light)}
  74. .variant-card.active{border-color:var(--brand);background:var(--brand-light);box-shadow:0 0 0 3px rgba(0,167,181,.12)}
  75. .vc-thumb{width:56px;height:56px;flex-shrink:0;border-radius:var(--rsm);overflow:hidden;background:var(--gray-50);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center}
  76. .vc-thumb img{width:100%;height:100%;object-fit:contain}
  77. .vc-thumb .vc-noimg{font-size:24px;opacity:0.3}
  78. .vc-text{display:flex;flex-direction:column;gap:4px;min-width:0}
  79. .vc-label{font-size:14px;font-weight:700;color:var(--gray-900);line-height:1.3;overflow-wrap:anywhere}
  80. .vc-meta{font-size:12px;font-weight:600;color:var(--gray-500)}
  81. .variant-card.active .vc-meta{color:var(--brand-dark)}
  82. .prod-actions{display:flex;gap:12px;align-items:center;margin-bottom:20px}
  83. .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)}
  84. .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)}
  85. .qty-btn-large:hover{background:var(--gray-100)}
  86. .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}
  87. .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}
  88. .btn-add-cart:hover{background:var(--brand-dark)}
  89. .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}
  90. .btn-checkout-now:hover{background:var(--gray-700)}
  91. .platform-note{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--r);padding:14px 16px;margin-top:20px;display:flex;align-items:flex-start;gap:10px;box-shadow:var(--shadow-sm)}
  92. .platform-note-icon{font-size:18px;flex-shrink:0;margin-top:1px}
  93. .platform-note-text{font-size:12px;color:var(--gray-500);line-height:1.55}
  94. .platform-note-text strong{color:var(--gray-800);font-weight:700}
  95. .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}
  96. .cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  97. .cart-toast a{color:var(--brand);font-weight:700;text-decoration:none;margin-left:4px}
  98. @media(max-width:900px){.prod-layout{grid-template-columns:1fr}.prod-actions{flex-wrap:wrap}}
  100. @media (max-width: 768px) {
  101.   .prod-nav { padding: 0 14px !important; height: 60px !important; }
  102.   .prod-nav img { height: 38px !important; }
  103.   .prod-body { padding: 20px 14px !important; }
  104.   .breadcrumb { font-size: 12px !important; margin-bottom: 16px !important; }
  105.   .prod-layout { gap: 22px !important; }
  106.   .prod-name { font-size: 22px !important; }
  107.   .prod-cat { font-size: 12px !important; margin-bottom: 12px !important; }
  108.   .prod-desc { font-size: 13px !important; }
  109.   .prod-price { font-size: 30px !important; }
  110.   .prod-price sup { font-size: 15px !important; }
  111.   .prod-price-box { padding: 16px !important; }
  112.   .delivery-card { padding: 12px 14px !important; }
  113.   .delivery-card .dc-body { font-size: 12px !important; }
  114.   .delivery-card .dc-icon { font-size: 20px !important; }
  115.   .cart-toast {
  116.     left: 16px !important; right: 16px !important; width: auto !important;
  117.     max-width: calc(100vw - 32px) !important; transform: translateY(20px) !important;
  118.     white-space: normal !important; justify-content: center !important; text-align: center !important;
  119.     box-sizing: border-box !important; padding: 12px 18px !important;
  120.   }
  121.   .cart-toast.show { transform: translateY(0) !important; }
  122. }
  124. @media (max-width: 480px) {
  125.   .prod-body { padding: 16px 12px !important; }
  126.   .prod-name { font-size: 20px !important; }
  127.   .prod-price { font-size: 26px !important; }
  128.   .prod-actions { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  129.   .qty-wrap { width: 100% !important; justify-content: center !important; }
  130.   .qty-btn-large { flex: 1 !important; max-width: 80px !important; }
  131.   .qty-input { flex: 1 !important; max-width: 100px !important; }
  132.   .btn-add-cart, .btn-checkout-now { width: 100% !important; flex: none !important; font-size: 14px !important; }
  133.   .platform-note { padding: 12px 14px !important; }
  134.   .platform-note-text { font-size: 11px !important; }
  135.   .cart-toast { bottom: 16px !important; font-size: 12px !important; }
  136. }
  138. @media (max-width: 380px) {
  139.   .prod-nav { padding: 0 10px !important; }
  140.   .prod-nav img { height: 32px !important; }
  141.   .prod-body { padding: 14px 10px !important; }
  142.   .prod-name { font-size: 18px !important; }
  143.   .prod-price { font-size: 24px !important; }
  144. }
  145. </style>
  146. </head>
  147. <body>
  149. <nav class="prod-nav">
  150.   <a href="{{ path('app_home') }}">
  151.     <img src="/images/julico-logo.png" alt="Julico" style="height:48px;object-fit:contain">
  152.   </a>
  153.   <div style="display:flex;align-items:center;gap:12px">
  154.     <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)">
  155.       🛒 Cart
  156.     </a>
  157.     {% if app.user %}
  158.       <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>
  159.       <a href="{{ path('app_profile') }}" style="font-size:13px;font-weight:600;color:var(--brand);text-decoration:none">{{ app.user.pseudo }}</a>
  160.     {% else %}
  161.       <a href="/login" style="font-size:13px;font-weight:600;color:var(--brand);text-decoration:none">Sign In</a>
  162.     {% endif %}
  163.   </div>
  164. </nav>
  166. <div class="prod-body">
  168.   <div class="breadcrumb">
  169.     <a href="{{ path('app_home') }}">Home</a> ›
  170.     {% if produit.category is defined and produit.category %}
  171.       <a href="{{ path('app_home') }}">{{ produit.category.nom }}</a> ›
  172.     {% endif %}
  173.     <span>{{ produit.productName }}</span>
  174.   </div>
  176.   <div class="prod-layout">
  178.     <!-- IMAGES -->
  179.     <div class="prod-images">
  180.       <div class="main-image">
  181.         {% if produit.images|length > 0 %}
  182.           <img id="main-img"
  183.                src="{{ asset('assets/uploads/products/' ~ produit.images|first.fileName) }}"
  184.                alt="{{ produit.productName }}"
  185.                onerror="this.onerror=null;this.parentNode.innerHTML='<div class=no-img>📦</div>'">
  186.         {% else %}
  187.           <div class="no-img">📦</div>
  188.         {% endif %}
  189.       </div>
  191.       {% if produit.images|length > 1 %}
  192.       <div class="thumb-grid" id="thumb-grid">
  193.         {% for image in produit.images %}
  194.         <div class="thumb {% if loop.first %}active{% endif %}"
  195.              data-src="{{ asset('assets/uploads/products/' ~ image.fileName) }}"
  196.              data-fallback="/assets/uploads/products/{{ image.fileName }}"
  197.              data-vid="{% if image.produitVariant %}{{ image.produitVariant.id }}{% endif %}">
  198.           <img src="{{ asset('assets/uploads/products/' ~ image.fileName) }}"
  199.                alt="{{ loop.index }}"
  200.                onerror="this.onerror=null;this.src='/assets/uploads/products/{{ image.fileName }}'">
  201.         </div>
  202.         {% endfor %}
  203.       </div>
  204.       {% endif %}
  205.     </div>
  207.     <!-- INFO -->
  208.     <div class="prod-info">
  210.       {% set isFlex = produit.produitVariants|length > 0 and groupedVariantscolor|length == 0 and groupedVariantssize|length == 0 %}
  212.       <div class="prod-badges">
  213.         {% if produit.promo %}<span class="prod-badge badge-promo">🔥 On Promo</span>{% endif %}
  214.         {% if produit.qtt > 0 %}
  215.           <span class="prod-badge badge-new">✅ In Stock</span>
  216.         {% else %}
  217.           <span class="prod-badge badge-oos">❌ Out of Stock</span>
  218.         {% endif %}
  219.         {% if produit.magasin is defined and produit.magasin %}
  220.           <span class="prod-badge badge-b2b">{{ produit.magasin.nom }}</span>
  221.         {% endif %}
  222.       </div>
  224.       <div class="prod-name">{{ produit.productName }}</div>
  225.       <div class="prod-cat">
  226.         {% if produit.category is defined and produit.category %}{{ produit.category.nom }}{% endif %}
  227.         {% if produit.magasin is defined and produit.magasin %} · Sold by {{ produit.magasin.nom }}{% endif %}
  228.       </div>
  229.       <div class="prod-desc">{{ produit.description }}</div>
  231.       <div class="prod-price-box">
  232.         {% if isFlex %}
  233.           <div class="prod-price"><sup>$</sup><span id="disp-price">{{ produit.prix|number_format(2) }}</span></div>
  234.           <div class="prod-tax" id="disp-price-note">Select an option below</div>
  235.         {% elseif produit.promo and produit.salePrice and produit.salePrice > 0 and produit.salePrice < produit.prix %}
  236.           <div class="prod-price"><sup>$</sup>{{ produit.salePrice|number_format(2) }}</div>
  237.           <div class="prod-old-price">${{ produit.prix|number_format(2) }}</div>
  238.           <div class="prod-tax">Price set by seller</div>
  239.         {% else %}
  240.           <div class="prod-price"><sup>$</sup>{{ produit.prix|number_format(2) }}</div>
  241.           <div class="prod-tax">Price set by seller</div>
  242.         {% endif %}
  243.       </div>
  245.       {# ────── Delivery preview card (Phase 3) ────── #}
  246.       {% if deliveryInfo is defined and deliveryInfo.shop_id %}
  247.         {% if not app.user %}
  248.           <div class="delivery-card">
  249.             <div class="dc-icon">🚚</div>
  250.             <div class="dc-body">
  251.               <div class="dc-title">Sign in to see delivery cost</div>
  252.               <div class="dc-sub"><a href="/login">Sign in</a> and set your delivery address to see if <strong>{{ deliveryInfo.shop_name }}</strong> delivers to your region.</div>
  253.             </div>
  254.           </div>
  255.         {% elseif not deliveryInfo.address_set %}
  256.           <div class="delivery-card warn">
  257.             <div class="dc-icon">📍</div>
  258.             <div class="dc-body">
  259.               <div class="dc-title">Add a delivery address</div>
  260.               <div class="dc-sub"><a href="/addresse/add">Add an address</a> to see delivery availability and fees from <strong>{{ deliveryInfo.shop_name }}</strong>.</div>
  261.             </div>
  262.           </div>
  263.         {% elseif not deliveryInfo.has_region %}
  264.           <div class="delivery-card warn">
  265.             <div class="dc-icon">📍</div>
  266.             <div class="dc-body">
  267.               <div class="dc-title">Set your region</div>
  268.               <div class="dc-sub">Your address has no region set. <a href="{{ path('app_profile') }}">Update your profile</a> to see delivery fees.</div>
  269.             </div>
  270.           </div>
  271.         {% elseif deliveryInfo.can_deliver is null %}
  272.           <div class="delivery-card warn">
  273.             <div class="dc-icon">🚚</div>
  274.             <div class="dc-body">
  275.               <div class="dc-title">Delivery info unavailable</div>
  276.               <div class="dc-sub"><strong>{{ deliveryInfo.shop_name }}</strong> has not configured delivery for <strong>{{ deliveryInfo.region_name }}</strong> yet.</div>
  277.             </div>
  278.           </div>
  279.         {% elseif not deliveryInfo.can_deliver %}
  280.           <div class="delivery-card no">
  281.             <div class="dc-icon">❌</div>
  282.             <div class="dc-body">
  283.               <div class="dc-title">Cannot deliver to {{ deliveryInfo.region_name }}</div>
  284.               <div class="dc-sub"><strong>{{ deliveryInfo.shop_name }}</strong> does not currently deliver to your region.</div>
  285.             </div>
  286.           </div>
  287.         {% else %}
  288.           <div class="delivery-card ok">
  289.             <div class="dc-icon">✅</div>
  290.             <div class="dc-body">
  291.               <div class="dc-title">Delivers to {{ deliveryInfo.region_name }}</div>
  292.               <div class="dc-sub">Delivery fee: <span class="dc-fee">${{ deliveryInfo.fee|number_format(2) }}</span> set by {{ deliveryInfo.shop_name }}</div>
  293.             </div>
  294.           </div>
  295.         {% endif %}
  296.       {% endif %}
  298.       <div class="prod-stock">
  299.         <span class="stock-dot {{ produit.qtt > 0 ? 'stock-in' : 'stock-out' }}"></span>
  300.         <span id="disp-stock" style="color:{{ produit.qtt > 0 ? '#16a34a' : '#dc2626' }}">
  301.           {% if produit.qtt > 0 %}In Stock ({{ produit.qtt }} available){% else %}Out of Stock{% endif %}
  302.         </span>
  303.       </div>
  305.       {# ── OLD color/size variants (legacy products) ── #}
  306.       {% if groupedVariantscolor|length > 0 %}
  307.       <div class="variants-section">
  308.         <div class="variants-label">Color:</div>
  309.         <div class="color-options">
  310.           {% for color, variants in groupedVariantscolor %}
  311.           <div class="color-opt" data-color="{{ color }}"
  312.                style="background-color:{{ color }}" title="{{ color }}"></div>
  313.           {% endfor %}
  314.         </div>
  315.       </div>
  316.       {% endif %}
  318.       {% if groupedVariantssize|length > 0 %}
  319.       <div class="variants-section">
  320.         <div class="variants-label">Size:</div>
  321.         <div class="size-options">
  322.           {% for size, variants in groupedVariantssize %}
  323.           <button type="button" class="size-opt" data-size="{{ size }}">{{ size }}</button>
  324.           {% endfor %}
  325.         </div>
  326.       </div>
  327.       {% endif %}
  329.       {# ── NEW flexible variants (Scent/Size/etc. typed by the vendor) ── #}
  330.       {% if isFlex %}
  331.       <div class="variants-section">
  332.         <div class="variants-label">
  333.           {% set dimNames = [] %}
  334.           {% if produit.variantType %}{% set dimNames = dimNames|merge([produit.variantType]) %}{% endif %}
  335.           {% if produit.variantType2 %}{% set dimNames = dimNames|merge([produit.variantType2]) %}{% endif %}
  336.           {% if produit.variantType3 %}{% set dimNames = dimNames|merge([produit.variantType3]) %}{% endif %}
  337.           Choose {% if dimNames|length > 0 %}{{ dimNames|join(' / ') }}{% else %}an option{% endif %}:
  338.         </div>
  339.         <div class="variant-list" id="variant-list">
  340.           {% for v in produit.produitVariants %}
  341.             {% set vals = [] %}
  342.             {% if v.optionLabel %}{% set vals = vals|merge([v.optionLabel]) %}{% endif %}
  343.             {% if v.optionLabel2 %}{% set vals = vals|merge([v.optionLabel2]) %}{% endif %}
  344.             {% if v.optionLabel3 %}{% set vals = vals|merge([v.optionLabel3]) %}{% endif %}
  345.             {% if vals|length > 0 %}
  346.               {% set vimg = v.images|length > 0 ? asset('assets/uploads/products/' ~ v.images|first.fileName) : '' %}
  347.               <button type="button" class="variant-card {% if loop.first %}active{% endif %}"
  348.                       data-vid="{{ v.id }}"
  349.                       data-price="{{ v.prix }}"
  350.                       data-stock="{{ v.qtt }}"
  351.                       data-img="{{ vimg }}">
  352.                 <span class="vc-thumb">
  353.                   {% if vimg %}
  354.                     <img src="{{ vimg }}" alt="{{ vals|join(' ') }}"
  355.                          onerror="this.onerror=null;this.style.display='none';this.parentNode.innerHTML='<span class=vc-noimg>📦</span>'">
  356.                   {% else %}
  357.                     <span class="vc-noimg">📦</span>
  358.                   {% endif %}
  359.                 </span>
  360.                 <span class="vc-text">
  361.                   <span class="vc-label">{{ vals|join(' · ') }}</span>
  362.                   <span class="vc-meta">${{ v.prix|number_format(2) }} · {{ v.qtt|number_format(0) }} in stock</span>
  363.                 </span>
  364.               </button>
  365.             {% endif %}
  366.           {% endfor %}
  367.         </div>
  368.       </div>
  369.       {% endif %}
  371.       {% if produit.qtt > 0 %}
  372.       <form method="post" id="cart-form">
  373.         <input type="hidden" id="chosenColor" name="chosenColor">
  374.         <input type="hidden" id="chosenSize"  name="chosenSize">
  375.         <input type="hidden" name="productid"   value="{{ produit.id }}">
  376.         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  378.         <div class="prod-actions">
  379.           <div class="qty-wrap">
  380.             <button type="button" class="qty-btn-large" id="qty-minus">−</button>
  381.             <input type="number" class="qty-input" id="qttprdid" name="qttprdid"
  382.                    min="1" max="{{ produit.qtt }}" value="1">
  383.             <button type="button" class="qty-btn-large" id="qty-plus">+</button>
  384.           </div>
  386.           <button type="button" class="btn-add-cart" id="btn-add-cart"
  387.                   data-add-url="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'continue'}) }}"
  388.                   data-add-base="{{ path('panier_add', {'id': produit.id, 'idVariante': '__VID__', 'option': 'continue'}) }}">
  389.             🛒 Add to Cart
  390.           </button>
  392.           <button type="submit" class="btn-checkout-now" id="btn-buy-now"
  393.                   formaction="{{ path('panier_add', {'id': produit.id, 'idVariante': 'notdefined', 'option': 'done'}) }}"
  394.                   data-buy-base="{{ path('panier_add', {'id': produit.id, 'idVariante': '__VID__', 'option': 'done'}) }}">
  395.             ⚡ Buy Now
  396.           </button>
  397.         </div>
  398.       </form>
  399.       {% else %}
  400.       <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">
  401.         ❌ This product is currently out of stock
  402.       </div>
  403.       {% endif %}
  405.       <div class="platform-note">
  406.         <span class="platform-note-icon">ℹ️</span>
  407.         <div class="platform-note-text">
  408.           <strong>Julico is a marketplace platform.</strong>
  409.           Pricing, delivery, and transactions are handled directly between you and the seller. Julico is not responsible for shipping, payments, or returns.
  410.         </div>
  411.       </div>
  413.     </div>
  414.   </div>
  415. </div>
  417. <div class="cart-toast" id="cart-toast">
  418.   <span>✓ Added to cart!</span>
  419.   <a href="{{ path('app_panier') }}">View Cart →</a>
  420. </div>
  422. <script>
  423. document.addEventListener('DOMContentLoaded', function() {
  425.   var thumbGrid = document.getElementById('thumb-grid');
  426.   var mainImgEl = document.getElementById('main-img');
  427.   var variantList = document.getElementById('variant-list');
  428.   var dispPrice = document.getElementById('disp-price');
  429.   var dispNote  = document.getElementById('disp-price-note');
  430.   var dispStock = document.getElementById('disp-stock');
  431.   var addBtnEl  = document.getElementById('btn-add-cart');
  432.   var buyBtnEl  = document.getElementById('btn-buy-now');
  433.   var qtyEl     = document.getElementById('qttprdid');
  435.   function activateThumbForVid(vid) {
  436.     if (!thumbGrid) return;
  437.     var thumbs = thumbGrid.querySelectorAll('.thumb');
  438.     var found = false;
  439.     for (var i = 0; i < thumbs.length; i++) {
  440.       if (thumbs[i].dataset.vid && thumbs[i].dataset.vid === String(vid)) {
  441.         thumbs.forEach(function(t){ t.classList.remove('active'); });
  442.         thumbs[i].classList.add('active');
  443.         found = true;
  444.         break;
  445.       }
  446.     }
  447.     return found;
  448.   }
  450.   function selectVariant(card) {
  451.     if (!card) return;
  452.     if (variantList) {
  453.       variantList.querySelectorAll('.variant-card').forEach(function(c) { c.classList.remove('active'); });
  454.     }
  455.     card.classList.add('active');
  457.     var vid   = card.dataset.vid;
  458.     var price = parseFloat(card.dataset.price || '0');
  459.     var stock = parseInt(card.dataset.stock || '0', 10);
  460.     var img   = card.dataset.img;
  462.     if (dispPrice) dispPrice.textContent = price.toFixed(2);
  463.     if (dispNote)  dispNote.textContent  = 'Price set by seller';
  464.     if (dispStock) dispStock.textContent = stock > 0 ? ('In Stock (' + stock + ' available)') : 'Out of Stock';
  465.     if (qtyEl) {
  466.       qtyEl.max = stock > 0 ? stock : 1;
  467.       if (parseInt(qtyEl.value, 10) > stock) { qtyEl.value = Math.max(1, stock); }
  468.     }
  469.     if (img && mainImgEl) { mainImgEl.src = img; }
  471.     if (addBtnEl && addBtnEl.dataset.addBase) {
  472.       addBtnEl.dataset.addUrl = addBtnEl.dataset.addBase.replace('__VID__', vid);
  473.     }
  474.     if (buyBtnEl && buyBtnEl.dataset.buyBase) {
  475.       buyBtnEl.setAttribute('formaction', buyBtnEl.dataset.buyBase.replace('__VID__', vid));
  476.     }
  478.     activateThumbForVid(vid);
  479.   }
  481.   function selectVariantById(vid) {
  482.     if (!variantList) return false;
  483.     var cards = variantList.querySelectorAll('.variant-card');
  484.     for (var i = 0; i < cards.length; i++) {
  485.       if (cards[i].dataset.vid === String(vid)) {
  486.         selectVariant(cards[i]);
  487.         return true;
  488.       }
  489.     }
  490.     return false;
  491.   }
  493.   if (thumbGrid) {
  494.     thumbGrid.addEventListener('click', function(e) {
  495.       var thumb = e.target.closest('.thumb');
  496.       if (!thumb) return;
  498.       var vid = thumb.dataset.vid;
  499.       if (vid && selectVariantById(vid)) {
  500.         return;
  501.       }
  503.       var src      = thumb.dataset.src;
  504.       var fallback = thumb.dataset.fallback;
  505.       if (mainImgEl && src) {
  506.         mainImgEl.src = src;
  507.         mainImgEl.onerror = function() { this.onerror = null; this.src = fallback; };
  508.       }
  509.       thumbGrid.querySelectorAll('.thumb').forEach(function(t) { t.classList.remove('active'); });
  510.       thumb.classList.add('active');
  511.     });
  512.   }
  514.   var qtyMinus = document.getElementById('qty-minus');
  515.   var qtyPlus  = document.getElementById('qty-plus');
  516.   if (qtyMinus && qtyEl) {
  517.     qtyMinus.addEventListener('click', function() {
  518.       var val = parseInt(qtyEl.value) - 1;
  519.       qtyEl.value = Math.max(1, val);
  520.     });
  521.   }
  522.   if (qtyPlus && qtyEl) {
  523.     qtyPlus.addEventListener('click', function() {
  524.       var val = parseInt(qtyEl.value) + 1;
  525.       var max = parseInt(qtyEl.max) || 999;
  526.       qtyEl.value = Math.min(max, val);
  527.     });
  528.   }
  530.   document.querySelectorAll('.color-opt').forEach(function(el) {
  531.     el.addEventListener('click', function() {
  532.       document.querySelectorAll('.color-opt').forEach(function(c) { c.classList.remove('active'); });
  533.       el.classList.add('active');
  534.       var chosenColor = document.getElementById('chosenColor');
  535.       if (chosenColor) chosenColor.value = el.dataset.color;
  536.     });
  537.   });
  539.   document.querySelectorAll('.size-opt').forEach(function(el) {
  540.     el.addEventListener('click', function() {
  541.       document.querySelectorAll('.size-opt').forEach(function(s) { s.classList.remove('active'); });
  542.       el.classList.add('active');
  543.       var chosenSize = document.getElementById('chosenSize');
  544.       if (chosenSize) chosenSize.value = el.dataset.size;
  545.     });
  546.   });
  548.   if (variantList) {
  549.     variantList.addEventListener('click', function(e) {
  550.       var card = e.target.closest('.variant-card');
  551.       if (card) selectVariant(card);
  552.     });
  553.     var firstCard = variantList.querySelector('.variant-card');
  554.     if (firstCard) selectVariant(firstCard);
  555.   }
  557.   var addBtn = document.getElementById('btn-add-cart');
  558.   if (addBtn) {
  559.     addBtn.addEventListener('click', function() {
  560.       var form    = document.getElementById('cart-form');
  561.       var addUrl  = addBtn.dataset.addUrl;
  562.       var origTxt = addBtn.innerHTML;
  563.       addBtn.innerHTML  = '…';
  564.       addBtn.style.opacity = '0.7';
  565.       addBtn.disabled   = true;
  566.       var formData = new FormData(form);
  567.       var xhr = new XMLHttpRequest();
  568.       xhr.open('POST', addUrl);
  569.       xhr.withCredentials = true;
  570.       xhr.onload = function() {
  571.         var toast = document.getElementById('cart-toast');
  572.         if (toast) {
  573.           toast.classList.add('show');
  574.           setTimeout(function() { toast.classList.remove('show'); }, 4000);
  575.         }
  576.         addBtn.innerHTML = '✓ Added!';
  577.         addBtn.style.background = '#16a34a';
  578.         addBtn.style.opacity = '1';
  579.         setTimeout(function() {
  580.           addBtn.innerHTML = origTxt;
  581.           addBtn.style.background = '';
  582.           addBtn.disabled = false;
  583.         }, 1500);
  584.       };
  585.       xhr.onerror = function() {
  586.         addBtn.innerHTML = origTxt;
  587.         addBtn.style.opacity = '1';
  588.         addBtn.disabled = false;
  589.         form.action = addUrl;
  590.         form.submit();
  591.       };
  592.       xhr.send(formData);
  593.     });
  594.   }
  596. });
  597. </script>
  598. </body>
  599. </html>