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
+18 -1
View File
@@ -14,13 +14,30 @@
{
<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;">
<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">
@if (!string.IsNullOrWhiteSpace(BookImageUrl))
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 />
MidrandBookshop/Setup.cs
+2
View File
@@ -16,6 +16,8 @@ public static class Setup
services.AddRazorComponents()
.AddInteractiveServerComponents();
services.AddBlazoredToast();
services.AddEndpointsApiExplorer();
services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
MidrandBookshop/wwwroot/app.css
+110
View File
@@ -112,3 +112,113 @@ h1:focus, h2:focus, h3:focus, h4:focus, p:focus, div:focus, span:focus {
[tabindex="-1"]:focus {
outline: none !important;
}
/* ==========================================================================
Global Toast Notification Framework Extensions
========================================================================== */
.blazored-toast-container {
position: fixed;
/* 🛠️ Shift anchors from top-right to bottom-left */
bottom: 24px;
left: 24px;
top: auto;
right: auto;
z-index: 2000 !important;
display: flex;
flex-direction: column-reverse; /* 💡 Newest toasts will now stack cleanly on top of old ones */
gap: 12px;
max-width: 400px;
width: 100%;
pointer-events: none;
}
.blazored-toast {
display: flex;
align-items: center;
padding: 16px 20px;
border-radius: var(--mb-radius);
background-color: var(--mb-card-bg);
color: var(--mb-text-dark);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.05);
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 500;
animation: toastFadeIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.125) forwards;
}
/* Success Toast Core Variants */
.blazored-toast-success {
border-left: 4px solid var(--mb-text-dark);
}
/* Error Toast Core Variants */
.blazored-toast-error {
border-left: 4px solid var(--mb-accent-red);
color: var(--mb-accent-red);
}
.blazored-toast-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
/* Entry Transition Keyframes */
@keyframes toastFadeIn {
from {
opacity: 0;
transform: translateY(-12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.book-shadow {
filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.15)) drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.1));
}
.sm-icon {
width: 14px;
height: 14px;
vertical-align: middle;
}
/* 🛠️ Micro-interactions for the header icon placement */
.btn-cart-icon:hover {
transform: scale(1.08);
background-color: var(--mb-text-dark) !important;
}
.btn-cart-icon:hover svg {
stroke: #FFFFFF !important;
}
@keyframes toastFadeIn {
from {
opacity: 0;
transform: translateX(-24px) scale(0.95); /* Slide rightward into view */
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.blazored-toast button.blazored-toast-close,
.blazored-toast-close-icon {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}