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:
parent
3af8854b42
commit
78f91aa270
|
@ -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()
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
.update-qty{
|
||||
display: none;
|
||||
background-color: green;
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
@implements IDisposable
|
||||
@inject IShoppingCartService shoppingCartService
|
||||
|
||||
<a href="ShoppingCart" class="btn btn-info">
|
||||
<i class="oi oi-cart"></i> 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
|
||||
}
|
||||
}
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,3 +9,4 @@
|
|||
@using ShopOnline.Web
|
||||
@using ShopOnline.Web.Shared
|
||||
@using ShopOnline.Models.Dtos
|
||||
@using ShopOnline.Web.Services.Contracts
|
||||
|
|
Loading…
Reference in New Issue