litecharms/midrandbooks
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 64 Wiki Activity

Wired up CartDrawel and ProductView to cart service and local storage
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-06-10 23:01:21 +02:00
parent 3bce80c963
commit 64e0fcba27
5 changed files with 85 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Layout/MainLayout.razor
+17 -10
View File
@@ -6,7 +6,7 @@
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
<h5 class="fw-bold m-0 text-dark tracking-tight" style="font-family: 'Inter', sans-serif; font-size: 1.1rem;">
YOUR CART (@CartItems.Sum(i => i.Quantity))
YOUR CART (@ShoppingCart.Items.Count())
</h5>
<button class="btn btn-sm text-dark p-1 border-0" @onclick="ToggleCart" type="button">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -17,7 +17,7 @@
</div>
<div class="cart-body flex-grow-1 overflow-y-auto p-4">
@if (!CartItems.Any())
@if (!ShoppingCart.Items.Any())
{
<div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted py-5">
<svg class="mb-3 opacity-50" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -29,22 +29,29 @@
else
{
<div class="d-flex flex-column gap-4">
@foreach (var item in CartItems)
@foreach (var item in ShoppingCart.Items)
{
<div class="cart-item d-flex gap-3 align-items-start pb-3 border-bottom-dashed">
<div class="cart-item-thumb bg-dark text-white-50 d-flex align-items-center justify-content-center px-2 text-center" style="width: 54px; height: 74px; font-size: 0.45rem; letter-spacing: 0.5px;">
[ COVER ]
@if (!string.IsNullOrWhiteSpace(item.Product!.ImageUrl))
{
<img src="@item.Product!.ImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@item.Product.Name" />
}
else
{
@:[COVER]
}
</div>
<div class="flex-grow-1">
<h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Title</h6>
<p class="text-muted xx-small mb-2">by @item.Author</p>
<h6 class="text-dark small fw-bold mb-0 text-truncate" style="max-width: 180px;">@item.Product!.Name</h6>
<p class="text-muted xx-small mb-2">by @($"{item.Author!.Name} {item.Author.LastName}")</p>
<div class="d-flex align-items-center justify-content-between">
<div class="quantity-picker d-flex align-items-center border rounded-pill bg-light">
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, -1)" type="button">-</button>
<span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@item.Quantity</span>
<span class="px-1 text-dark fw-medium" style="font-size: 0.75rem;">@ShoppingCart.Items.FirstOrDefault(i => i.Price!.Id == item.Price!.Id)!.Quantity</span>
<button class="btn btn-sm py-0 px-2 text-dark border-0" @onclick="() => ChangeQuantity(item, 1)" type="button">+</button>
</div>
<span class="small fw-semibold text-dark">R @(item.Price * item.Quantity)</span>
<span class="small fw-semibold text-dark">R @(item.Price!.Amount * item.Quantity)</span>
</div>
</div>
<button class="btn text-muted p-0 border-0 mt-1 align-self-start" style="background: none;" @onclick="() => RemoveFromCart(item)" type="button">
@@ -56,7 +63,7 @@
}
</div>
@if (CartItems.Any())
@if (ShoppingCart.Items.Any())
{
<div class="cart-footer p-4 bg-light border-top mt-auto">
<div class="d-flex align-items-center justify-content-between mb-4">
@@ -156,7 +163,7 @@
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z M3 6h18 M16 10a4 4 0 0 1-8 0" />
</svg>
@if (CartItems.Any())
@if (ShoppingCart.Items.Any())
{
<span class="cart-badge">@ShoppingCart.Items.Count</span>
}