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

Implemented AddToCart functionality on home page

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-06-16 14:37:44 +02:00
parent 31423ea48d
commit 02294d36e8
5 changed files with 170 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/BookCard.razor
+24 -7
View File
@@ -14,12 +14,29 @@
{
<div></div>
}
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
<line x1="7" y1="17" x2="17" y2="7" />
<polyline points="7,7 17,7 17,17" />
</svg>
</button>
<div class="d-flex align-items-center gap-2">
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0 btn-cart-icon"
style="width: 32px; height: 32px; transition: all 0.2s ease;"
title="Add to Cart"
data-bs-toggle="tooltip"
data-bs-placement="top"
@onclick="HandleAddToCart" @onclick:stopPropagation>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<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>
</button>
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0"
style="width: 32px; height: 32px;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
<line x1="7" y1="17" x2="17" y2="7" />
<polyline points="7,7 17,7 17,17" />
</svg>
</button>
</div>
</div>
<div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
@@ -49,4 +66,4 @@
</div>
</div>
</div>
</div>
MidrandBookshop/Components/BookCard.razor.cs
+31 -1
View File
@@ -1,4 +1,9 @@
namespace MidrandBookshop.Components;
using LiteCharms.Features.MidrandBooks.AuthorBooks;
using LiteCharms.Features.MidrandBooks.Authors;
using LiteCharms.Features.MidrandBooks.Payments;
using LiteCharms.Features.MidrandBooks.Products;
namespace MidrandBookshop.Components;
public partial class BookCard
{
@@ -11,4 +16,29 @@ public partial class BookCard
[Parameter] public string BookImageUrl { get; set; } = string.Empty;
[Parameter] public EventCallback OnCardClick { get; set; }
[Inject] private CartService CartService { get; set; } = default!;
[Inject] private ProductService ProductService { get; set; } = default!;
[Inject] private AuthorService AuthorService { get; set; } = default!;
[Inject] private BooksService BooksService { get; set; } = default!;
[Inject] private IToastService ToastService { get; set; } = default!;
[Inject] private CancellationToken CancellationToken { get; set; } = default!;
private async Task HandleAddToCart()
{
try
{
var bookFetch = await BooksService.GetBookByProductIdAsync(Id, CancellationToken);
var authorFetch = await AuthorService.GetAuthorAsync(bookFetch.Value.AuthorId, CancellationToken);
var productPriceFetch = await ProductService.GetProductPriceAsync(Id, CancellationToken);
CartService.AddItem(productPriceFetch.Value, bookFetch.Value.Product!, authorFetch.Value);
ToastService.ShowSuccess($"Added '{Title}' to your order.", "Add To Cart");
}
catch
{
ToastService.ShowError("Could not update cart. Please try again.");
}
}
}
MidrandBookshop/Components/Layout/MainLayout.razor
+3 -1
View File
@@ -1,4 +1,5 @@
@inherits LayoutComponentBase
@using Blazored.Toast
@inherits LayoutComponentBase
@inject NavigationManager Navigation
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
@@ -295,3 +296,4 @@
</div>
</div>
<BlazoredToasts />