added on local at 2026-07-01 13:48:01
| 1 | <!DOCTYPE html> | |
| 2 | <html lang="en"> | |
| 3 | <head> | |
| 4 | <meta charset="UTF-8"> | |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | <title>Cart · $store_name</title> | |
| 7 | <link rel="stylesheet" href="/assets/css/site.css"> | |
| 8 | <style>:root { $theme_css_vars }</style> | |
| 9 | <style> | |
| 10 | body { background: var(--col-bg); color: var(--col-text); font-family: var(--font-ui, sans-serif); margin: 0; } | |
| 11 | .cart-page { max-width: 900px; margin: 0 auto; padding: 60px 24px 80px; } | |
| 12 | .cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; } | |
| 13 | .cart-head h1 { font-size: 34px; margin: 0; color: var(--col-text); } | |
| 14 | .cart-head a.back { color: var(--col-text-2); text-decoration: none; font-size: 13px; } | |
| 15 | .cart-head a.back:hover { color: var(--col-accent-bright); } | |
| 16 | .cart-row { | |
| 17 | display: flex; align-items: center; gap: 16px; | |
| 18 | padding: 14px; | |
| 19 | background: var(--col-surface-1); | |
| 20 | border: 1px solid var(--col-border); | |
| 21 | border-radius: 12px; | |
| 22 | margin-bottom: 10px; | |
| 23 | transition: opacity 0.2s; | |
| 24 | } | |
| 25 | .cart-row.is-removing { opacity: 0.3; pointer-events: none; } | |
| 26 | .cart-thumb { width: 90px; height: 90px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; border: 1px solid var(--col-border); } | |
| 27 | .cart-info { flex: 1; min-width: 0; } | |
| 28 | .cart-title { font-size: 16px; font-weight: 600; color: var(--col-text); margin-bottom: 4px; } | |
| 29 | .cart-meta { font-size: 12px; color: var(--col-text-3); } | |
| 30 | .cart-line { font-size: 16px; font-weight: 700; color: var(--col-accent-bright); font-family: var(--font-mono, monospace); } | |
| 31 | .cart-variant { display:inline-block; margin-top:4px; padding:2px 8px; font-size:11px; letter-spacing:0.5px; font-weight:600; border-radius:5px; background:rgba(255,255,255,0.06); color:var(--col-text-2); text-transform:none; } | |
| 32 | .cart-variant.is-physical { background:rgba(217,119,6,0.15); color:#f59e0b; } | |
| 33 | .cart-ship-note { margin-top:12px; padding:10px 14px; background:rgba(217,119,6,0.08); border:1px solid rgba(217,119,6,0.25); border-radius:10px; color:#f59e0b; font-size:13px; display:flex; align-items:center; gap:10px; } | |
| 34 | .cart-x { | |
| 35 | background: none; border: 1px solid var(--col-border); | |
| 36 | color: var(--col-text-3); | |
| 37 | width: 30px; height: 30px; border-radius: 50%; | |
| 38 | cursor: pointer; flex-shrink: 0; | |
| 39 | display: grid; place-items: center; | |
| 40 | font-size: 16px; | |
| 41 | transition: all 0.15s; | |
| 42 | } | |
| 43 | .cart-x:hover { background: rgba(239,68,68,0.18); color: #f87171; border-color: rgba(239,68,68,0.4); } | |
| 44 | .cart-empty { | |
| 45 | text-align: center; padding: 80px 24px; | |
| 46 | border: 1px dashed var(--col-border-2); | |
| 47 | border-radius: 14px; | |
| 48 | color: var(--col-text-2); | |
| 49 | } | |
| 50 | .cart-empty h2 { color: var(--col-text); margin-bottom: 10px; } | |
| 51 | .cart-summary { | |
| 52 | margin-top: 26px; padding: 18px 22px; | |
| 53 | background: var(--col-surface-1); | |
| 54 | border: 1px solid var(--col-border-2); | |
| 55 | border-radius: 12px; | |
| 56 | display: flex; justify-content: space-between; align-items: center; | |
| 57 | flex-wrap: wrap; gap: 14px; | |
| 58 | } | |
| 59 | .cart-summary-total { font-size: 22px; font-weight: 700; color: var(--col-text); } | |
| 60 | .cart-summary-total .num { color: var(--col-accent-bright); font-family: var(--font-mono, monospace); } | |
| 61 | .cart-checkout-btn { | |
| 62 | background: linear-gradient(130deg, var(--col-accent), var(--col-accent-bright)); | |
| 63 | color: #fff; border: 0; padding: 12px 24px; | |
| 64 | font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; | |
| 65 | border-radius: 10px; cursor: pointer; font-family: inherit; | |
| 66 | transition: filter 0.15s; | |
| 67 | text-decoration: none; display: inline-block; | |
| 68 | } | |
| 69 | .cart-checkout-btn:hover { filter: brightness(1.08); } | |
| 70 | </style> | |
| 71 | </head> | |
| 72 | <body> | |
| 73 | ||
| 74 | $store_chrome_html | |
| 75 | ||
| 76 | <main class="cart-page"> | |
| 77 | ||
| 78 | <div class="cart-head"> | |
| 79 | <h1>Your cart</h1> | |
| 80 | <a class="back" href="$back_href">← Keep shopping at $store_name</a> | |
| 81 | </div> | |
| 82 | ||
| 83 | [if:$has_items] | |
| 84 | <div id="cart-rows"> | |
| 85 | [loop:@items] | |
| 86 | <div class="cart-row" data-cart-item-id="$loop1.cart_item_id"> | |
| 87 | <div class="cart-thumb" style="background-image:url('$loop1.hero');background-position:$loop1.hero_pos"></div> | |
| 88 | <div class="cart-info"> | |
| 89 | <div class="cart-title">$loop1.title</div> | |
| 90 | <div class="cart-meta">Qty $loop1.quantity · $loop1.price each</div> | |
| 91 | [if:$loop1.variant_pill]<span class="cart-variant[if:$loop1.is_physical] is-physical[/if]">$loop1.variant_pill</span>[/if] | |
| 92 | </div> | |
| 93 | <div class="cart-line">$loop1.line_total</div> | |
| 94 | <button type="button" class="cart-x" data-rm="$loop1.cart_item_id" title="Remove">×</button> | |
| 95 | </div> | |
| 96 | [/loop] | |
| 97 | </div> | |
| 98 | ||
| 99 | [if:$needs_shipping] | |
| 100 | <div class="cart-ship-note"> | |
| 101 | <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13" rx="2"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg> | |
| 102 | <span>This order includes printed items — you'll enter a shipping address at checkout.</span> | |
| 103 | </div> | |
| 104 | [/if] | |
| 105 | ||
| 106 | <!-- Promo code panel. Inline-styled so storefront themes inherit | |
| 107 | theme_css_vars without us having to ship a separate per-theme | |
| 108 | stylesheet. The discount line below is rendered only when | |
| 109 | cart_promotions has an applied row. --> | |
| 110 | <style> | |
| 111 | .cart-promo { margin:18px 0 6px; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); } | |
| 112 | .cart-promo-flash { padding:8px 10px; margin-bottom:10px; border-radius:8px; font-size:13px; } | |
| 113 | .cart-promo-flash.ok { background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.35); color:#86efac; } | |
| 114 | .cart-promo-flash.err { background:rgba(239,68,68,0.10); border:1px solid rgba(239,68,68,0.35); color:#fca5a5; } | |
| 115 | .cart-promo-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } | |
| 116 | .cart-promo-row input { flex:1; min-width:140px; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.25); color:#fff; font:600 13px var(--font-mono, monospace); letter-spacing:1px; text-transform:uppercase; } | |
| 117 | .cart-promo-row button { padding:9px 16px; border:0; border-radius:8px; background:linear-gradient(135deg,#3b82f6,#7c3aed); color:#fff; font-weight:700; cursor:pointer; } | |
| 118 | .cart-promo-applied { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.30); color:#86efac; font-size:13px; flex-wrap:wrap; } | |
| 119 | .cart-promo-applied code { background:rgba(255,255,255,0.10); padding:2px 7px; border-radius:5px; font-weight:700; } | |
| 120 | .cart-promo-applied .grow { flex:1; } | |
| 121 | .cart-promo-applied button { background:transparent; border:1px solid rgba(252,165,165,0.35); color:#fca5a5; padding:5px 12px; border-radius:6px; font-size:12px; cursor:pointer; } | |
| 122 | .cart-summary-row { display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,0.75); margin-bottom:4px; } | |
| 123 | .cart-summary-row.discount { color:#86efac; } | |
| 124 | </style> | |
| 125 | <div class="cart-promo"> | |
| 126 | [if:$has_promo_flash] | |
| 127 | <div class="cart-promo-flash $promo_flash_kind">$promo_flash_msg</div> | |
| 128 | [/if] | |
| 129 | [if:$has_applied_promo] | |
| 130 | <div class="cart-promo-applied"> | |
| 131 | <span>✓ <strong>$applied_label</strong> with code <code>$applied_code</code></span> | |
| 132 | <span class="grow"></span> | |
| 133 | <form method="POST" action="/cart_promo.cgi" style="margin:0"> | |
| 134 | <input type="hidden" name="action" value="remove"> | |
| 135 | <input type="hidden" name="storefront_id" value="$store_id"> | |
| 136 | <button type="submit">Remove</button> | |
| 137 | </form> | |
| 138 | </div> | |
| 139 | [/if] | |
| 140 | [if:!$has_applied_promo] | |
| 141 | <form class="cart-promo-row" method="POST" action="/cart_promo.cgi"> | |
| 142 | <input type="hidden" name="action" value="apply"> | |
| 143 | <input type="hidden" name="storefront_id" value="$store_id"> | |
| 144 | <input type="text" name="code" placeholder="ENTER CODE" maxlength="64" autocomplete="off"> | |
| 145 | <button type="submit">Apply</button> | |
| 146 | </form> | |
| 147 | [/if] | |
| 148 | </div> | |
| 149 | ||
| 150 | <div class="cart-summary"> | |
| 151 | [if:$has_discount] | |
| 152 | <div class="cart-summary-row"><span>Subtotal</span><span class="num">$subtotal_display</span></div> | |
| 153 | <div class="cart-summary-row discount"><span>Discount ($applied_code)</span><span class="num">-$discount_display</span></div> | |
| 154 | [/if] | |
| 155 | [if:$has_credit] | |
| 156 | <div class="cart-summary-row"><span>Subtotal</span><span class="num">$total_before_credit_display</span></div> | |
| 157 | <div class="cart-summary-row discount"><span>Store credit applied</span><span class="num">-$credit_applied_display</span></div> | |
| 158 | [/if] | |
| 159 | <div class="cart-summary-total">Total <span class="num">$total_display</span></div> | |
| 160 | [if:$has_credit_balance][if:!$has_credit] | |
| 161 | <div style="font-size:11px;color:var(--col-text-3,#888);margin-top:8px;text-align:center">You have $credit_balance_display store credit available.</div> | |
| 162 | [/if][/if] | |
| 163 | <a class="cart-checkout-btn" href="/checkout.cgi?id=$store_id">Checkout →</a> | |
| 164 | </div> | |
| 165 | [/if] | |
| 166 | ||
| 167 | [if:!$has_items] | |
| 168 | <div class="cart-empty"> | |
| 169 | <h2>Your cart is empty</h2> | |
| 170 | <p>Browse the store and tap <strong>Add to cart</strong> on anything you want to take with you.</p> | |
| 171 | <a class="cart-checkout-btn" href="$back_href" style="margin-top:18px">Back to $store_name</a> | |
| 172 | </div> | |
| 173 | [/if] | |
| 174 | ||
| 175 | </main> | |
| 176 | ||
| 177 | <script> | |
| 178 | (function() { | |
| 179 | /* Per-row remove. POSTs to /cart_remove.cgi, hides the row on | |
| 180 | success. Reloads if the cart becomes empty so the empty state | |
| 181 | renders correctly. */ | |
| 182 | document.addEventListener('click', function(e) { | |
| 183 | var btn = e.target.closest('[data-rm]'); | |
| 184 | if (!btn) return; | |
| 185 | var row = btn.closest('.cart-row'); | |
| 186 | var id = btn.getAttribute('data-rm'); | |
| 187 | if (!row || !id) return; | |
| 188 | row.classList.add('is-removing'); | |
| 189 | var fd = new FormData(); | |
| 190 | fd.append('cart_item_id', id); | |
| 191 | fetch('/cart_remove.cgi', { method: 'POST', body: fd, credentials: 'same-origin' }) | |
| 192 | .then(function(r){ return r.json(); }) | |
| 193 | .then(function(data){ | |
| 194 | if (!data || !data.success) throw new Error(data && data.error || 'remove failed'); | |
| 195 | row.style.height = row.offsetHeight + 'px'; | |
| 196 | requestAnimationFrame(function(){ | |
| 197 | row.style.transition = 'opacity 0.2s, height 0.25s, margin 0.25s, padding 0.25s'; | |
| 198 | row.style.opacity = '0'; | |
| 199 | row.style.height = '0'; | |
| 200 | row.style.marginBottom = '0'; | |
| 201 | row.style.padding = '0'; | |
| 202 | setTimeout(function(){ | |
| 203 | row.remove(); | |
| 204 | if (!document.querySelectorAll('.cart-row').length) { | |
| 205 | window.location.reload(); | |
| 206 | } | |
| 207 | }, 260); | |
| 208 | }); | |
| 209 | }) | |
| 210 | .catch(function(err){ | |
| 211 | row.classList.remove('is-removing'); | |
| 212 | appToast({ message: 'Could not remove: ' + err.message, type: 'error' }); | |
| 213 | }); | |
| 214 | }); | |
| 215 | })(); | |
| 216 | </script> | |
| 217 | ||
| 218 | </body> | |
| 219 | </html> |