Khwezi Mngoma
98 lines
7.3 KiB
Plaintext
98 lines
7.3 KiB
Plaintext
@page "/cart"
|
|
@rendermode InteractiveServer
|
|
|
|
<div class="container py-5" style="max-width: 1000px; font-family: system-ui, -apple-system, sans-serif;">
|
|
|
|
<div class="d-flex align-items-baseline justify-content-between mb-5 border-bottom pb-3">
|
|
<h1 class="ff-serif mb-0" style="font-size: 2.25rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -0.5px;">Your Cart</h1>
|
|
<a href="/" class="text-dark text-decoration-none small fw-semibold tracking-widest text-uppercase" style="font-size: 0.75rem; letter-spacing: 1.5px;">Continue Shopping</a>
|
|
</div>
|
|
|
|
@if (!ShoppingCart.Items.Any())
|
|
{
|
|
<div class="text-center py-5 my-4">
|
|
<div class="mb-4 text-muted-50">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-secondary opacity-50"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
</div>
|
|
<h3 class="ff-serif mb-2" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400;">Your collection is currently vacant.</h3>
|
|
<p class="text-muted small mb-4" style="letter-spacing: 0.2px;">Even with careful scrutiny, the requested shelf remains empty.</p>
|
|
<a href="/" class="btn btn-dark rounded-pill px-4 py-2 text-uppercase fw-semibold tracking-widest" style="font-size: 0.75rem; letter-spacing: 1px; background-color: #1c1f22;">Browse Catalog</a>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="row g-5">
|
|
<div class="col-12 col-lg-7">
|
|
<div class="d-flex flex-column gap-1">
|
|
@foreach (var item in ShoppingCart.Items)
|
|
{
|
|
<div class="row align-items-center py-4 border-bottom position-relative">
|
|
|
|
<div class="col-12 col-md-7 d-flex align-items-center gap-4 mb-3 mb-md-0">
|
|
<div class="bg-light d-flex align-items-center justify-content-center p-2 rounded-1 state-card-shadow"
|
|
style="width: 70px; height: 95px; background-color: #f8f9fa; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);">
|
|
@if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
|
|
{
|
|
<img src="@item.Product!.ImageUrl" class="img-fluid" style="max-height: 80px; object-fit: contain; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));" alt="@item.Product.Name" />
|
|
}
|
|
else
|
|
{
|
|
<span class="text-muted fw-bold font-monospace" style="font-size: 0.6rem; letter-spacing: 1px;">[COVER]</span>
|
|
}
|
|
</div>
|
|
<div style="max-width: 75%;">
|
|
<h5 class="fw-semibold mb-1 text-dark" style="font-size: 0.95rem; line-height: 1.4; letter-spacing: -0.1px;">@item.Product!.Name</h5>
|
|
<p class="text-muted small mb-0" style="font-size: 0.8rem; letter-spacing: 0.1px;">by @($"{item.Author!.Name} {item.Author!.LastName}")</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-3 d-flex justify-content-md-center align-items-center">
|
|
<div class="d-flex align-items-center border rounded-pill bg-white px-1 py-1" style="border-color: #e9ecef !important;">
|
|
<button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => DecreaseQty(item, -1)">—</button>
|
|
<span class="px-2 fw-semibold text-dark" style="font-size: 0.85rem; min-width: 20px; text-align: center;">@item.Quantity</span>
|
|
<button class="btn btn-sm border-0 bg-transparent text-muted px-2 py-0" style="font-size: 0.9rem;" @onclick="() => IncreaseQty(item)">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-2 text-end d-flex align-items-center justify-content-end gap-3">
|
|
<span class="fw-semibold text-dark" style="font-size: 0.95rem; letter-spacing: -0.2px;">R @(item.Amount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
<button class="btn btn-sm p-1 text-muted opacity-50 hover-opacity-100 border-0 bg-transparent" style="transition: opacity 0.2s;" @onclick="() => RemoveFromCart(item)" title="Remove item">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-5">
|
|
<div class="bg-white p-4 rounded-3 border-0 sticky-top" style="top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #f1f3f5 !important;">
|
|
<h4 class="ff-serif mb-4" style="font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.3rem;">Order Summary</h4>
|
|
|
|
<div class="d-flex justify-content-between mb-3" style="font-size: 0.9rem;">
|
|
<span class="text-muted">Subtotal</span>
|
|
<span class="fw-normal text-dark">R @(ShoppingCart.TotalAmount.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mb-4" style="font-size: 0.9rem;">
|
|
<span class="text-muted">VAT (15%)</span>
|
|
<span class="fw-normal text-dark">R @(ShoppingCart.TotalVat.ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
</div>
|
|
|
|
<hr style="border-color: #f1f3f5;" />
|
|
|
|
<div class="d-flex justify-content-between align-items-baseline mb-4 mt-2">
|
|
<span class="fw-semibold h6 mb-0 text-dark" style="font-size: 1rem;">Total</span>
|
|
<span class="fw-bold text-dark" style="font-size: 1.4rem; letter-spacing: -0.5px;">R @((ShoppingCart.TotalAmount + ShoppingCart.TotalVat).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("js")))</span>
|
|
</div>
|
|
|
|
<a href="/checkout" class="btn btn-dark w-100 rounded-pill py-3 text-uppercase fw-semibold tracking-widest border-0"
|
|
style="font-size: 0.75rem; letter-spacing: 1.5px; background-color: #1c1f22; transition: background-color 0.2s;">
|
|
Proceed to Checkout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div> |