202 lines
8.7 KiB
PHP
202 lines
8.7 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
$pageTitle = $title ?? 'Cart';
|
|
$items = is_array($items ?? null) ? $items : [];
|
|
$totals = is_array($totals ?? null) ? $totals : ['count' => 0, 'subtotal' => 0.0, 'discount_amount' => 0.0, 'amount' => 0.0, 'currency' => 'GBP', 'discount_code' => ''];
|
|
$discountCode = (string)($totals['discount_code'] ?? '');
|
|
ob_start();
|
|
?>
|
|
<section class="card" style="display:grid; gap:16px;">
|
|
<a href="/releases" class="badge" style="text-decoration:none; display:inline-block;">Continue shopping</a>
|
|
<h1 style="margin:0; font-size:32px;">Your Cart</h1>
|
|
<?php if (!$items): ?>
|
|
<div style="padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.2); color:var(--muted);">
|
|
Your basket is empty.
|
|
</div>
|
|
<?php else: ?>
|
|
<div style="display:grid; gap:10px;">
|
|
<?php foreach ($items as $item): ?>
|
|
<?php
|
|
$key = (string)($item['key'] ?? '');
|
|
$title = (string)($item['title'] ?? 'Item');
|
|
$coverUrl = (string)($item['cover_url'] ?? '');
|
|
$qty = max(1, (int)($item['qty'] ?? 1));
|
|
$price = (float)($item['price'] ?? 0);
|
|
$currency = (string)($item['currency'] ?? ($totals['currency'] ?? 'GBP'));
|
|
?>
|
|
<div style="display:grid; grid-template-columns:58px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.2);">
|
|
<div style="width:58px; height:58px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);">
|
|
<?php if ($coverUrl !== ''): ?>
|
|
<img src="<?= htmlspecialchars($coverUrl, ENT_QUOTES, 'UTF-8') ?>" alt="" style="width:100%; height:100%; object-fit:cover; display:block;">
|
|
<?php else: ?>
|
|
<div style="width:100%; height:100%; display:grid; place-items:center; font-size:10px; color:var(--muted);">AC</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div style="min-width:0;">
|
|
<div style="font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></div>
|
|
<div style="font-size:12px; color:var(--muted); margin-top:4px;"><?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?> <?= number_format($price, 2) ?> x <?= $qty ?></div>
|
|
</div>
|
|
<div style="font-weight:700;"><?= htmlspecialchars($currency, ENT_QUOTES, 'UTF-8') ?> <?= number_format($price * $qty, 2) ?></div>
|
|
<form method="post" action="/cart/remove" style="margin:0;">
|
|
<input type="hidden" name="key" value="<?= htmlspecialchars($key, ENT_QUOTES, 'UTF-8') ?>">
|
|
<input type="hidden" name="return_url" value="/cart">
|
|
<button type="submit" class="cart-btn cart-btn-ghost">Remove</button>
|
|
</form>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div style="display:grid; gap:12px; padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.25);">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
|
|
<div style="color:var(--muted);"><?= (int)($totals['count'] ?? 0) ?> item(s)</div>
|
|
<div style="display:grid; justify-items:end; gap:4px;">
|
|
<div style="font-size:12px; color:var(--muted);">Subtotal: <?= htmlspecialchars((string)($totals['currency'] ?? 'GBP'), ENT_QUOTES, 'UTF-8') ?> <?= number_format((float)($totals['subtotal'] ?? 0), 2) ?></div>
|
|
<?php if ((float)($totals['discount_amount'] ?? 0) > 0): ?>
|
|
<div style="font-size:12px; color:#9be7c6;">Discount (<?= htmlspecialchars($discountCode, ENT_QUOTES, 'UTF-8') ?>): -<?= htmlspecialchars((string)($totals['currency'] ?? 'GBP'), ENT_QUOTES, 'UTF-8') ?> <?= number_format((float)($totals['discount_amount'] ?? 0), 2) ?></div>
|
|
<?php endif; ?>
|
|
<div style="font-size:20px; font-weight:700;"><?= htmlspecialchars((string)($totals['currency'] ?? 'GBP'), ENT_QUOTES, 'UTF-8') ?> <?= number_format((float)($totals['amount'] ?? 0), 2) ?></div>
|
|
</div>
|
|
</div>
|
|
<div id="discountWrap" class="cart-discount-wrap<?= $discountCode !== '' ? ' is-open' : '' ?>">
|
|
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px;">
|
|
<?php if ($discountCode !== ''): ?>
|
|
<span style="font-size:12px; color:var(--muted);">Applied discount</span>
|
|
<span class="cart-discount-chip"><?= htmlspecialchars($discountCode, ENT_QUOTES, 'UTF-8') ?></span>
|
|
<form method="post" action="/cart/discount/remove" style="margin:0;">
|
|
<input type="hidden" name="return_url" value="/cart">
|
|
<button type="submit" class="cart-btn cart-btn-danger">Remove</button>
|
|
</form>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div id="discountBox" class="cart-discount-box<?= $discountCode !== '' ? ' is-open' : '' ?>">
|
|
<form method="post" action="/cart/discount/apply" style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
|
|
<input type="hidden" name="return_url" value="/cart">
|
|
<input name="discount_code" value="<?= htmlspecialchars($discountCode, ENT_QUOTES, 'UTF-8') ?>" class="input cart-discount-input" placeholder="Enter discount code">
|
|
<button type="submit" class="cart-btn cart-btn-primary">Apply code</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;">
|
|
<button type="button" class="cart-btn cart-btn-ghost" id="toggleDiscountBox">
|
|
<?= $discountCode !== '' ? 'Discount Active' : 'Have a discount code?' ?>
|
|
</button>
|
|
<a href="/checkout" class="cart-btn cart-btn-primary">Checkout</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
</section>
|
|
<style>
|
|
.cart-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255,255,255,.18);
|
|
background: rgba(255,255,255,.08);
|
|
color: #e9eefc;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.cart-btn:hover { background: rgba(255,255,255,.14); }
|
|
.cart-btn-primary {
|
|
background: rgba(34,242,165,.18);
|
|
border-color: rgba(34,242,165,.48);
|
|
color: #cffff0;
|
|
}
|
|
.cart-btn-primary:hover { background: rgba(34,242,165,.28); }
|
|
.cart-btn-ghost {
|
|
background: rgba(255,255,255,.06);
|
|
}
|
|
.cart-btn-danger {
|
|
border-color: rgba(255, 120, 120, 0.4);
|
|
color: #ffd4d4;
|
|
background: rgba(255, 120, 120, 0.12);
|
|
}
|
|
.cart-btn-danger:hover {
|
|
background: rgba(255, 120, 120, 0.2);
|
|
}
|
|
.cart-discount-wrap {
|
|
display: none;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
|
|
rgba(10, 12, 18, 0.72);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
|
|
}
|
|
.cart-discount-wrap.is-open {
|
|
display: block;
|
|
}
|
|
.cart-discount-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(34,242,165,.38);
|
|
background: rgba(34,242,165,.14);
|
|
color: #cffff0;
|
|
font-size: 11px;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-weight: 600;
|
|
}
|
|
.cart-discount-box {
|
|
display: none;
|
|
margin-top: 10px;
|
|
padding-top: 2px;
|
|
}
|
|
.cart-discount-box.is-open {
|
|
display: block;
|
|
}
|
|
.cart-discount-input {
|
|
min-width: 220px;
|
|
height: 38px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,.18);
|
|
background: rgba(7,9,14,.72);
|
|
color: #f0f4ff;
|
|
padding: 0 12px;
|
|
}
|
|
.cart-discount-input::placeholder {
|
|
color: rgba(220,228,245,.42);
|
|
}
|
|
.cart-discount-input:focus {
|
|
outline: none;
|
|
border-color: rgba(34,242,165,.5);
|
|
box-shadow: 0 0 0 2px rgba(34,242,165,.14);
|
|
}
|
|
@media (max-width: 720px) {
|
|
.cart-discount-input {
|
|
min-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
(function () {
|
|
const toggleBtn = document.getElementById('toggleDiscountBox');
|
|
const box = document.getElementById('discountBox');
|
|
const wrap = document.getElementById('discountWrap');
|
|
if (!toggleBtn || !box || !wrap) return;
|
|
toggleBtn.addEventListener('click', function () {
|
|
box.classList.toggle('is-open');
|
|
wrap.classList.toggle('is-open');
|
|
});
|
|
})();
|
|
</script>
|
|
<?php
|
|
$content = ob_get_clean();
|
|
require __DIR__ . '/../../../../views/site/layout.php';
|