Now serving a Cart Menu item to direct users directly to cart; includes showing how much is currenty in the cart.

Cart Menu item also visible under side-nav menu when in phone display.
This commit is contained in:
Kira 2022-09-14 15:09:48 -07:00
parent 3af8854b42
commit 78f91aa270
9 changed files with 100 additions and 7 deletions

View File

@ -10,11 +10,32 @@ namespace ShopOnline.Web.Pages
[Inject]
public IProductService ProductService { get; set; }
[Inject]
public IShoppingCartService ShoppingCartService { get; set; }
public IEnumerable<ProductDto> Products { get; set; }
[Inject]
public NavigationManager NavigationManager { get; set; }
public string ErrorMessage { get; set; }
protected override async Task OnInitializedAsync()
{
try
{
Products = await ProductService.GetItems();
var shoppingCartItems = await ShoppingCartService.GetItems(HardCoded.UserId);
var totalQuantity = shoppingCartItems.Sum(i => i.Quantity);
ShoppingCartService.RaiseEventOnShoppingCartChanged(totalQuantity);
}
catch (Exception ex)
{
ErrorMessage = ex.Message;
}
}
protected IOrderedEnumerable<IGrouping<int, ProductDto>> GetGroupedProductsByCategory()

View File

@ -1,4 +1,3 @@
.update-qty{
display: none;
background-color: green;
}

View File

@ -25,7 +25,7 @@ namespace ShopOnline.Web.Pages
try
{
ShoppingCartItems = await ShoppingCartService.GetItems(HardCoded.UserId);
CalculateCartSummaryTotals();
CartChanged();
}
catch (Exception ex)
{
@ -38,7 +38,7 @@ namespace ShopOnline.Web.Pages
var cartItemDto = await ShoppingCartService.DeleteItem(id);
RemoveCartItem(id);
CalculateCartSummaryTotals();
CartChanged();
}
@ -57,7 +57,7 @@ namespace ShopOnline.Web.Pages
var returnedUpdateItemDto = await this.ShoppingCartService.UpdateQuantity(updateItemDto);
UpdateItemTotalPrice(returnedUpdateItemDto);
CalculateCartSummaryTotals();
CartChanged();
await MakeUpdateQuantityButtonVisible(id, false);
}
@ -128,6 +128,11 @@ namespace ShopOnline.Web.Pages
ShoppingCartItems.Remove(CartItemDto);
}
private void CartChanged()
{
CalculateCartSummaryTotals();
ShoppingCartService.RaiseEventOnShoppingCartChanged(TotalQuantity);
}
}
}

View File

@ -8,5 +8,8 @@ namespace ShopOnline.Web.Services.Contracts
Task<CartItemDto> AddItem(CartItemToAddDto cartItemToAddDto);
Task<CartItemDto> DeleteItem(int id);
Task<CartItemDto> UpdateQuantity(CartItemQuantityUpdateDto cartItemQuantityUpdateDto);
event Action<int> OnShoppingCartChanged;
void RaiseEventOnShoppingCartChanged(int totalQuantity);
}
}

View File

@ -15,6 +15,9 @@ namespace ShopOnline.Web.Services
{
this.httpClient = httpClient;
}
public event Action<int> OnShoppingCartChanged;
public async Task<CartItemDto> AddItem(CartItemToAddDto cartItemToAddDto)
{
try
@ -85,6 +88,14 @@ namespace ShopOnline.Web.Services
}
}
public void RaiseEventOnShoppingCartChanged(int totalQuantity)
{
if(OnShoppingCartChanged != null)
{
OnShoppingCartChanged.Invoke(totalQuantity);
}
}
public async Task<CartItemDto> UpdateQuantity(CartItemQuantityUpdateDto cartItemQuantityUpdateDto)
{
try

View File

@ -0,0 +1,26 @@
@implements IDisposable
@inject IShoppingCartService shoppingCartService
<a href="ShoppingCart" class="btn btn-info">
<i class="oi oi-cart"></i>&nbsp;Cart
<span class="badge bg-dark">@shoppingCartItemCount</span>
</a>
@code {
private int shoppingCartItemCount = 0;
protected override void OnInitialized()
{
shoppingCartService.OnShoppingCartChanged += ShoppingCartChanged; //subscribe to event
}
protected void ShoppingCartChanged(int totalQuantity){
shoppingCartItemCount = totalQuantity;
StateHasChanged();
}
void IDisposable.Dispose()
{
shoppingCartService.OnShoppingCartChanged -= ShoppingCartChanged; //subscribe from event
}
}

View File

@ -7,7 +7,7 @@
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
<CartMenu/>
</div>
<article class="content px-4">

View File

@ -1,4 +1,7 @@
<div class="top-row ps-3 navbar navbar-dark">
@implements IDisposable
@inject IShoppingCartService shoppingCartService
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">ShopOnline.Web</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
@ -24,6 +27,11 @@
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
<div class="nav-item px-3 d-sm-none">
<NavLink class="nav-link" href="ShoppingCart">
<span class="fas fa-shopping-cart" aria-hidden="true"></span> Shopping Cart (<b>@shoppingCartItemsCount</b>)
</NavLink>
</div>
</nav>
</div>
@ -32,8 +40,27 @@
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private int shoppingCartItemsCount = 0;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
protected override void OnInitialized()
{
shoppingCartService.OnShoppingCartChanged += ShoppingCartChanged;
}
private void ShoppingCartChanged(int totalQuantity)
{
shoppingCartItemsCount = totalQuantity;
StateHasChanged();
}
void IDisposable.Dispose()
{
shoppingCartService.OnShoppingCartChanged -= ShoppingCartChanged;
}
}

View File

@ -9,3 +9,4 @@
@using ShopOnline.Web
@using ShopOnline.Web.Shared
@using ShopOnline.Models.Dtos
@using ShopOnline.Web.Services.Contracts