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. *, *::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. .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}
  16. .cart-body{max-width:1280px;margin:0 auto;padding:32px 24px}
  17. .cart-title{font-size:28px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em;margin-bottom:6px}
  18. .cart-subtitle{font-size:14px;color:var(--gray-400);font-weight:500;margin-bottom:28px}
  19. .cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
  20. .cart-items{display:flex;flex-direction:column;gap:18px}
  21. .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)}
  22. .cart-empty-icon{font-size:64px;margin-bottom:16px}
  23. .cart-empty-title{font-size:20px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
  24. .cart-empty-sub{font-size:14px;color:var(--gray-400);margin-bottom:24px}
  26. /* Address picker */
  27. .addr-card{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rlg);padding:18px 20px;box-shadow:var(--shadow-sm)}
  28. .addr-card-title{font-size:13px;font-weight:800;color:var(--gray-700);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;display:flex;align-items:center;gap:7px}
  29. .addr-select{width:100%;height:46px;border:1.5px solid var(--gray-200);border-radius:var(--rsm);padding:0 14px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--gray-800);background:var(--white);outline:none;cursor:pointer}
  30. .addr-select:focus{border-color:var(--brand)}
  31. .addr-zone{font-size:12px;font-weight:600;margin-top:9px;color:var(--gray-500)}
  32. .addr-zone b{color:var(--brand)}
  33. .addr-warn{background:#fef9c3;border:1.5px solid #fde047;border-radius:var(--rsm);padding:11px 14px;font-size:12.5px;font-weight:600;color:#854d0e;margin-top:10px;line-height:1.45}
  34. .addr-warn a{color:#854d0e;font-weight:800;text-decoration:underline}
  35. .addr-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--brand);text-decoration:none}
  36. .addr-link:hover{text-decoration:underline}
  38. /* Shop group */
  39. .shop-group{background:var(--white);border:1.5px solid var(--gray-100);border-radius:var(--rlg);box-shadow:var(--shadow-sm);overflow:hidden}
  40. .shop-group.undeliverable{border-color:#fecaca}
  41. .shop-group-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);flex-wrap:wrap}
  42. .shop-group-name{font-size:14px;font-weight:800;color:var(--gray-900);display:flex;align-items:center;gap:7px}
  43. .shop-badge{font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
  44. .shop-badge.ok{background:#dcfce7;color:#16a34a}
  45. .shop-badge.no{background:#fee2e2;color:#dc2626}
  46. .shop-badge.unknown{background:var(--gray-100);color:var(--gray-500)}
  47. .shop-items{display:flex;flex-direction:column}
  48. .cart-item{padding:18px 20px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--gray-100);transition:opacity .2s}
  49. .cart-item:last-child{border-bottom:none}
  50. .cart-item-img{width:74px;height:74px;background:var(--gray-50);border-radius:var(--rsm);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  51. .cart-item-img img{width:100%;height:100%;object-fit:contain}
  52. .cart-item-info{flex:1;min-width:0}
  53. .cart-item-cat{font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px}
  54. .cart-item-name{font-size:15px;font-weight:700;color:var(--gray-900);margin-bottom:4px;overflow-wrap:anywhere;line-height:1.3}
  55. .cart-item-variant{font-size:12px;color:var(--gray-400);font-weight:500}
  56. .cart-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
  57. .cart-item-price{font-size:19px;font-weight:800;color:var(--gray-900);letter-spacing:-0.02em}
  58. .cart-item-price sup{font-size:12px;font-weight:700;vertical-align:super}
  59. .cart-item-subtotal{font-size:11px;color:var(--gray-400);font-weight:500}
  60. .cart-qty{display:flex;align-items:center;border:1.5px solid var(--gray-200);border-radius:var(--rsm);overflow:hidden}
  61. .qty-btn{width:36px;height:36px;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;}
  62. .qty-btn:hover{background:var(--brand-light);color:var(--brand)}
  63. .qty-num{width:40px;height:36px;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}
  64. .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:1.5px solid transparent;font-family:var(--font);padding:8px 12px;border-radius:var(--rsm);min-height:36px}
  65. .remove-btn:hover{color:#ef4444;border-color:#fecaca;background:#fef2f2}
  66. .shop-delivery-line{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--gray-50);font-size:13px;font-weight:600}
  67. .shop-delivery-line .lbl{color:var(--gray-500)}
  68. .shop-delivery-line .val{font-weight:800;color:var(--gray-800)}
  69. .shop-delivery-line .val.free{color:#16a34a}
  70. .shop-delivery-line .val.no{color:#dc2626}
  71. .shop-undeliver-note{padding:12px 20px;background:#fef2f2;border-top:1px solid #fecaca;font-size:12.5px;font-weight:600;color:#991b1b;line-height:1.45}
  73. /* Summary */
  74. .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}
  75. .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)}
  76. .summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px}
  77. .summary-row .label{color:var(--gray-500);font-weight:500}
  78. .summary-row .value{font-weight:700;color:var(--gray-800)}
  79. .summary-row.sub-ship{font-size:12.5px;margin-bottom:8px}
  80. .summary-row.sub-ship .label{color:var(--gray-400);padding-left:10px}
  81. .summary-row.sub-ship .value{color:var(--gray-500);font-weight:600}
  82. .summary-row.sub-ship .value.no{color:#dc2626}
  83. .summary-divider{border:none;border-top:1px solid var(--gray-100);margin:16px 0}
  84. .summary-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
  85. .summary-total .label{font-size:16px;font-weight:700;color:var(--gray-900)}
  86. .summary-total .value{font-size:22px;font-weight:800;color:var(--brand)}
  87. .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}
  88. .btn-checkout:hover{background:var(--brand-dark)}
  89. .btn-checkout.disabled{background:var(--gray-300);cursor:not-allowed;pointer-events:none}
  90. .checkout-block-note{background:#fef2f2;border:1.5px solid #fecaca;border-radius:var(--rsm);padding:11px 14px;font-size:12.5px;font-weight:600;color:#991b1b;margin-bottom:12px;line-height:1.45}
  91. .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}
  92. .btn-continue:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
  93. .trust-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-100)}
  94. .trust-chip{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--gray-500)}
  95. .updating{opacity:0.5;pointer-events:none}
  97. @media(max-width:768px){
  98.   .cart-layout{grid-template-columns:1fr}
  99.   .cart-nav { padding: 0 14px !important; height: 60px !important; }
  100.   .cart-nav img { height: 38px !important; }
  101.   .cart-body { padding: 20px 14px !important; }
  102.   .cart-title { font-size: 22px !important; }
  103.   .cart-summary { position: static !important; top: auto !important; padding:20px !important; }
  104. }
  105. @media (max-width: 480px) {
  106.   .cart-body { padding: 16px 10px !important; }
  107.   .cart-item { padding: 14px !important; gap: 12px !important; flex-wrap: wrap !important; align-items: flex-start !important; }
  108.   .cart-item-img { width: 64px !important; height: 64px !important; }
  109.   .cart-item-info { flex: 1 1 calc(100% - 80px) !important; min-width: 0 !important; }
  110.   .cart-item-right { flex: 1 1 100% !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 6px !important; padding-top: 12px !important; border-top: 1px solid var(--gray-100) !important; }
  111.   .cart-item-subtotal { order: 3 !important; flex-basis: 100% !important; text-align: right !important; }
  112.   .qty-btn { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  113.   .qty-num { width: 44px !important; height: 40px !important; font-size: 15px !important; }
  114. }
  115. </style>
  116. </head>
  117. <body>
  119. <nav class="cart-nav">
  120.   <a href="{{ path('app_home') }}">
  121.     <img src="/images/julico-logo.png" alt="Julico" style="height:48px;object-fit:contain">
  122.   </a>
  123.   <div style="font-size:18px;font-weight:800;color:var(--gray-900)">🛒 My Cart</div>
  124.   <a href="{{ path('app_home') }}" style="font-size:13px;font-weight:600;color:var(--gray-500);text-decoration:none">← Continue Shopping</a>
  125. </nav>
  127. <div class="cart-body">
  128.   <div class="cart-title">Shopping Cart</div>
  129.   <div class="cart-subtitle">
  130.     {% if itemCount > 0 %}{{ itemCount }} item{% if itemCount > 1 %}s{% endif %} in your cart{% else %}Your cart is empty{% endif %}
  131.   </div>
  133.   <div class="cart-layout">
  134.     <div class="cart-items">
  136.       {% if itemCount > 0 %}
  138.         {# ── Address picker ── #}
  139.         {% if isLoggedIn %}
  140.           <div class="addr-card">
  141.             <div class="addr-card-title">📍 Deliver to</div>
  142.             {% if addresses|length > 0 %}
  143.               <select class="addr-select" onchange="window.location.href='{{ path('app_panier') }}?addr=' + encodeURIComponent(this.value)">
  144.                 {% for a in addresses %}
  145.                   <option value="{{ a.id }}" {{ a.id == selectedAddressId ? 'selected' : '' }}>
  146.                     {{ a.label ?? 'Address' }} — {{ a.fullAddresse ?? a.ville ?? 'Saved address' }}{% if a.region %} ({{ a.region.name }}){% endif %}
  147.                   </option>
  148.                 {% endfor %}
  149.               </select>
  151.               {% if selectedRegionName %}
  152.                 <div class="addr-zone">Delivery zone: <b>{{ selectedRegionName }}</b></div>
  153.               {% else %}
  154.                 <div class="addr-warn">
  155.                   ⚠️ This address has no delivery zone set, so we can't calculate delivery fees.
  156.                   <a href="{{ path('add_addresse') }}">Add a new address</a> (drop a map pin to auto-set the zone), or edit this one.
  157.                 </div>
  158.               {% endif %}
  159.             {% else %}
  160.               <div class="addr-warn">
  161.                 ⚠️ You have no saved addresses. <a href="{{ path('add_addresse') }}">Add one</a> to calculate delivery and check out.
  162.               </div>
  163.             {% endif %}
  164.           </div>
  165.         {% else %}
  166.           <div class="addr-card">
  167.             <div class="addr-card-title">📍 Deliver to</div>
  168.             <div class="addr-warn">⚠️ <a href="/login">Sign in</a> to choose a delivery address and see shipping fees.</div>
  169.           </div>
  170.         {% endif %}
  172.         {# ── Shop groups ── #}
  173.         {% for g in shopGroups %}
  174.           <div class="shop-group {{ (g.canDeliver is same as(false)) ? 'undeliverable' : '' }}">
  175.             <div class="shop-group-header">
  176.               <div class="shop-group-name">🏪 {{ g.shopName }}</div>
  177.               {% if g.canDeliver is null %}
  178.                 <span class="shop-badge unknown">Select an address</span>
  179.               {% elseif g.canDeliver %}
  180.                 <span class="shop-badge ok">✓ Delivers here</span>
  181.               {% else %}
  182.                 <span class="shop-badge no">✗ No delivery</span>
  183.               {% endif %}
  184.             </div>
  186.             <div class="shop-items">
  187.               {% for item in g.items %}
  188.                 {% set variantId = (item.productVariant and item.productVariant.id is defined) ? item.productVariant.id : 'notdefined' %}
  189.                 <div class="cart-item" id="cart-item-{{ item.product.id }}-{{ variantId }}"
  190.                      data-id="{{ item.product.id }}"
  191.                      data-variant="{{ variantId }}"
  192.                      data-shop="{{ g.shopId }}"
  193.                      data-price="{{ item.unitPrice }}"
  194.                      data-csrf="{{ csrf_token('authenticate') }}"
  195.                      data-add-url="{{ path('panier_add',    {'id': item.product.id, 'idVariante': variantId, 'option': 'continue'}) }}"
  196.                      data-minus-url="{{ path('panier_minus', {'id': item.product.id, 'idVariante': variantId, 'option': 'continue'}) }}"
  197.                      data-remove-url="{{ path('panier_remove',{'id': item.product.id, 'idVariante': variantId}) }}">
  199.                   <div class="cart-item-img">
  200.                     {% if item.product.images|length > 0 %}
  201.                       <img src="{{ asset('assets/uploads/products/' ~ item.product.images[0].fileName) }}"
  202.                            alt="{{ item.product.productName }}"
  203.                            onerror="this.onerror=null;this.parentNode.innerHTML='<span style=font-size:32px;opacity:0.3>📦</span>'">
  204.                     {% else %}
  205.                       <span style="font-size:32px;opacity:0.3">📦</span>
  206.                     {% endif %}
  207.                   </div>
  209.                   <div class="cart-item-info">
  210.                     <div class="cart-item-cat">
  211.                       {% if item.product.category is defined and item.product.category %}{{ item.product.category.nom }}{% endif %}
  212.                     </div>
  213.                     <a href="{{ path('show_produit', {'id': item.product.id}) }}" style="text-decoration:none">
  214.                       <div class="cart-item-name">{{ item.product.productName }}</div>
  215.                     </a>
  216.                     {% if item.productVariant %}
  217.                       <div class="cart-item-variant">
  218.                         {% set cvals = [] %}
  219.                         {% if item.productVariant.optionLabel %}{% set cvals = cvals|merge([item.productVariant.optionLabel]) %}{% endif %}
  220.                         {% if item.productVariant.optionLabel2 %}{% set cvals = cvals|merge([item.productVariant.optionLabel2]) %}{% endif %}
  221.                         {% if item.productVariant.optionLabel3 %}{% set cvals = cvals|merge([item.productVariant.optionLabel3]) %}{% endif %}
  222.                         {% if cvals|length > 0 %}
  223.                           {{ cvals|join(' · ') }}
  224.                         {% else %}
  225.                           {% if item.productVariant.paramColor is defined and item.productVariant.paramColor %}Color: {{ item.productVariant.paramColor.colorName }}{% endif %}
  226.                           {% if item.productVariant.paramSize is defined and item.productVariant.paramSize %} · Size: {{ item.productVariant.paramSize.sizeAbreviation }}{% endif %}
  227.                         {% endif %}
  228.                       </div>
  229.                     {% endif %}
  230.                   </div>
  232.                   <div class="cart-item-right">
  233.                     <div class="cart-item-price"><sup>$</sup>{{ item.unitPrice|number_format(2) }}</div>
  234.                     <div class="cart-item-subtotal" id="subtotal-{{ item.product.id }}-{{ variantId }}">
  235.                       × {{ item.quantity }} = ${{ item.lineTotal|number_format(2) }}
  236.                     </div>
  237.                     <div class="cart-qty">
  238.                       <button type="button" class="qty-btn btn-minus" title="Remove one">−</button>
  239.                       <input type="number" class="qty-num" value="{{ item.quantity }}" readonly>
  240.                       <button type="button" class="qty-btn btn-plus" title="Add one">+</button>
  241.                     </div>
  242.                     <button type="button" class="remove-btn btn-remove">🗑 Remove</button>
  243.                   </div>
  244.                 </div>
  245.               {% endfor %}
  246.             </div>
  248.             {# Per-shop delivery line #}
  249.             <div class="shop-delivery-line">
  250.               <span class="lbl">Items: <span id="shopsub-{{ g.shopId }}">${{ g.subtotal|number_format(2) }}</span></span>
  251.               {% if g.canDeliver is null %}
  252.                 <span class="val">Delivery: —</span>
  253.               {% elseif g.canDeliver %}
  254.                 <span class="val {{ g.deliveryFee == 0 ? 'free' : '' }}">
  255.                   Delivery: {% if g.deliveryFee == 0 %}Free{% else %}${{ g.deliveryFee|number_format(2) }}{% endif %}
  256.                 </span>
  257.               {% else %}
  258.                 <span class="val no">Delivery: unavailable</span>
  259.               {% endif %}
  260.             </div>
  262.             {% if g.canDeliver is same as(false) %}
  263.               <div class="shop-undeliver-note">
  264.                 ❌ {{ g.shopName }} doesn't deliver to {{ selectedRegionName ?? 'this area' }}. Remove these items or choose a different delivery address to continue.
  265.               </div>
  266.             {% endif %}
  267.           </div>
  268.         {% endfor %}
  270.       {% else %}
  271.         <div class="cart-empty">
  272.           <div class="cart-empty-icon">🛒</div>
  273.           <div class="cart-empty-title">Your cart is empty</div>
  274.           <div class="cart-empty-sub">Looks like you haven't added anything yet.</div>
  275.           <a href="{{ path('app_home') }}" class="btn-checkout" style="max-width:220px;margin:0 auto">Browse Products →</a>
  276.         </div>
  277.       {% endif %}
  279.     </div>
  281.     {% if itemCount > 0 %}
  282.     <div class="cart-summary">
  283.       <div class="summary-title">Order Summary</div>
  285.       <div class="summary-row">
  286.         <span class="label">Subtotal</span>
  287.         <span class="value" id="summary-subtotal">${{ subtotal|number_format(2) }}</span>
  288.       </div>
  290.       {# Per-shop delivery breakdown #}
  291.       {% if deliveryResolvable %}
  292.         {% for g in shopGroups %}
  293.           <div class="summary-row sub-ship">
  294.             <span class="label">🚚 {{ g.shopName }}</span>
  295.             {% if g.canDeliver %}
  296.               <span class="value">{% if g.deliveryFee == 0 %}Free{% else %}${{ g.deliveryFee|number_format(2) }}{% endif %}</span>
  297.             {% else %}
  298.               <span class="value no">Unavailable</span>
  299.             {% endif %}
  300.           </div>
  301.         {% endfor %}
  302.         <div class="summary-row">
  303.           <span class="label">Total delivery</span>
  304.           <span class="value">{% if totalDelivery == 0 %}Free{% else %}${{ totalDelivery|number_format(2) }}{% endif %}</span>
  305.         </div>
  306.       {% else %}
  307.         <div class="summary-row">
  308.           <span class="label">Delivery</span>
  309.           <span class="value" style="color:var(--gray-400)">Select address</span>
  310.         </div>
  311.       {% endif %}
  313.       <hr class="summary-divider">
  314.       <div class="summary-total">
  315.         <span class="label">Total</span>
  316.         <span class="value" id="summary-total">${{ grandTotal|number_format(2) }}</span>
  317.       </div>
  319.       {% if not isLoggedIn %}
  320.         <a href="/login" class="btn-checkout">Sign In to Checkout →</a>
  321.       {% elseif not deliveryResolvable %}
  322.         <div class="checkout-block-note">📍 Select a delivery address with a zone to continue.</div>
  323.         <span class="btn-checkout disabled">Proceed to Checkout →</span>
  324.       {% elseif hasUndeliverable %}
  325.         <div class="checkout-block-note">⚠️ One or more shops can't deliver to {{ selectedRegionName }}. Remove those items or change your address.</div>
  326.         <span class="btn-checkout disabled">Proceed to Checkout →</span>
  327.       {% else %}
  328.         <form action="{{ path('panier_validationcmd', {'option': 'goprofile', 'addresseid': 'notdefined', 'cmdid': 'notdefined'}) }}" method="POST">
  329.           <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  330.           <button type="submit" class="btn-checkout">Proceed to Checkout →</button>
  331.         </form>
  332.       {% endif %}
  334.       <a href="{{ path('app_home') }}" class="btn-continue">← Continue Shopping</a>
  336.       <div class="trust-chips">
  337.         <div class="trust-chip">🔒 Secure checkout</div>
  338.         <div class="trust-chip">🚚 Per-shop delivery</div>
  339.         <div class="trust-chip">↩️ Easy returns</div>
  340.       </div>
  341.     </div>
  342.     {% endif %}
  344.   </div>
  345. </div>
  347. <script>
  348. document.addEventListener('DOMContentLoaded', function() {
  349.   document.querySelectorAll('.cart-item').forEach(function(itemEl) {
  350.     var id        = itemEl.dataset.id;
  351.     var variant   = itemEl.dataset.variant;
  352.     var shopId    = itemEl.dataset.shop;
  353.     var csrf      = itemEl.dataset.csrf;
  354.     var addUrl    = itemEl.dataset.addUrl;
  355.     var minusUrl  = itemEl.dataset.minusUrl;
  356.     var removeUrl = itemEl.dataset.removeUrl;
  357.     var price     = parseFloat(itemEl.dataset.price);
  359.     var qtyInput  = itemEl.querySelector('.qty-num');
  360.     var subtotal  = document.getElementById('subtotal-' + id + '-' + variant);
  361.     var plusBtn   = itemEl.querySelector('.btn-plus');
  362.     var minusBtn  = itemEl.querySelector('.btn-minus');
  363.     var removeBtn = itemEl.querySelector('.btn-remove');
  365.     plusBtn.addEventListener('click', function() {
  366.       ajaxQty(addUrl, csrf, price, 1, itemEl, qtyInput, subtotal, shopId);
  367.     });
  368.     minusBtn.addEventListener('click', function() {
  369.       var qty = parseInt(qtyInput.value, 10);
  370.       if (isNaN(qty) || qty <= 1) {
  371.         ajaxRemove(removeUrl, csrf, itemEl);
  372.       } else {
  373.         ajaxQty(minusUrl, csrf, price, -1, itemEl, qtyInput, subtotal, shopId);
  374.       }
  375.     });
  376.     removeBtn.addEventListener('click', function() {
  377.       ajaxRemove(removeUrl, csrf, itemEl);
  378.     });
  379.   });
  380. });
  382. function ajaxQty(url, csrf, price, delta, itemEl, qtyInput, subtotalEl, shopId) {
  383.   itemEl.classList.add('updating');
  384.   var fd = new FormData();
  385.   fd.append('_csrf_token', csrf);
  386.   fd.append('qttprdid', '1');
  388.   var xhr = new XMLHttpRequest();
  389.   xhr.open('POST', url);
  390.   xhr.withCredentials = true;
  391.   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  392.   xhr.setRequestHeader('Accept', 'application/json');
  393.   xhr.onload = function() {
  394.     itemEl.classList.remove('updating');
  395.     if (xhr.status === 200) {
  396.       var newQty = Math.max(0, parseInt(qtyInput.value) + delta);
  397.       qtyInput.value = newQty;
  398.       if (subtotalEl) subtotalEl.textContent = '× ' + newQty + ' = $' + (price * newQty).toFixed(2);
  399.       adjustMoney(price * delta, shopId);
  400.     }
  401.   };
  402.   xhr.onerror = function() { itemEl.classList.remove('updating'); };
  403.   xhr.send(fd);
  404. }
  406. function ajaxRemove(url, csrf, itemEl) {
  407.   itemEl.classList.add('updating');
  408.   var fd = new FormData();
  409.   fd.append('_csrf_token', csrf);
  410.   var xhr = new XMLHttpRequest();
  411.   xhr.open('POST', url);
  412.   xhr.withCredentials = true;
  413.   xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  414.   xhr.setRequestHeader('Accept', 'application/json');
  415.   xhr.onload = function() {
  416.     window.location.reload();
  417.   };
  418.   xhr.onerror = function() { itemEl.classList.remove('updating'); };
  419.   xhr.send(fd);
  420. }
  422. function adjustMoney(delta, shopId) {
  423.   var shopSub = document.getElementById('shopsub-' + shopId);
  424.   if (shopSub) {
  425.     var v = parseFloat(shopSub.textContent.replace('$','').replace(',','')) + delta;
  426.     shopSub.textContent = '$' + Math.max(0, v).toFixed(2);
  427.   }
  428.   var subEl = document.getElementById('summary-subtotal');
  429.   var totEl = document.getElementById('summary-total');
  430.   if (subEl) {
  431.     var s = parseFloat(subEl.textContent.replace('$','').replace(',','')) + delta;
  432.     subEl.textContent = '$' + Math.max(0, s).toFixed(2);
  433.   }
  434.   if (totEl) {
  435.     var t = parseFloat(totEl.textContent.replace('$','').replace(',','')) + delta;
  436.     totEl.textContent = '$' + Math.max(0, t).toFixed(2);
  437.   }
  438. }
  439. </script>
  440. </body>
  441. </html>