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.

ShopOnline.Web/Pages/ProductsBase.cs

@@ -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()

ShopOnline.Web/Pages/ShoppingCart.razor.css

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

ShopOnline.Web/Pages/ShoppingCartBase.cs

@@ -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);
+        }
 
     }
 }

ShopOnline.Web/Services/Contracts/IShoppingCartService.cs

@@ -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);
     }
 }

ShopOnline.Web/Services/ShoppingCartService.cs

@@ -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

ShopOnline.Web/Shared/CartMenu.razor

@@ -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
+    }
+}

ShopOnline.Web/Shared/MainLayout.razor

@@ -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">

ShopOnline.Web/Shared/NavMenu.razor

@@ -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;
+
+    }
 }

ShopOnline.Web/_Imports.razor

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