Added functionality to the basket widget

apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/BasketWidgetViewComponent.cs

@@ -6,7 +6,12 @@ using EShopOnAbp.BasketService;
 
 namespace EShopOnAbp.PublicWeb.Components.Basket;
 
-[Widget]
+[Widget(
+    AutoInitialize = true,
+    RefreshUrl = "/Widgets/Basket",
+    StyleFiles = new[] { "/components/basket-widget.css" },
+    ScriptFiles = new[] { "/components/basket-widget.js" }
+)]
 public class BasketWidgetViewComponent : AbpViewComponent
 {
     private readonly IBasketAppService _basketAppService;
@@ -15,7 +20,7 @@ public class BasketWidgetViewComponent : AbpViewComponent
     {
         _basketAppService = basketAppService;
     }
-    
+
     public async Task<IViewComponentResult> InvokeAsync()
     {
         var basketDto = await _basketAppService.GetAsync();

apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml

@@ -9,7 +9,7 @@
         <div class="basket-list">
             @foreach (var item in Model.Items)
             {
-                <div class="basket-list-item">
+                <div class="basket-list-item" data-product-id="@item.ProductId">
                     @if (!item.ImageName.IsNullOrEmpty())
                     {
                         <img src="/product-images/@item.ImageName"/>
@@ -24,6 +24,7 @@
                         <text> (@("x" + item.Count))</text>
                     }
                     - $@item.TotalPrice.ToString("0.00")
+                    <i class="fa fa-remove basket-item-remove" title="Remove from basket"></i>
                 </div>
             }
             <hr/>

apps/public-web/src/EShopOnAbp.PublicWeb/Controllers/WidgetsController.cs

@@ -0,0 +1,16 @@
+using EShopOnAbp.PublicWeb.Components.Basket;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+
+namespace EShopOnAbp.PublicWeb.Controllers;
+
+[Route("Widgets")]
+public class WidgetsController : AbpController
+{
+    [HttpGet]
+    [Route("Basket")]
+    public IActionResult Counters()
+    {
+        return ViewComponent(typeof(BasketWidgetViewComponent));
+    }
+}

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Catalog.cshtml

@@ -55,7 +55,7 @@
     </div>
     <div class="col-lg-3">
         <h3 class="pt-5 pb-4 text-center">Your Basket</h3>
-        <div class="basket-area">
+        <div id="BasketArea">
             @await Component.InvokeAsync(typeof(BasketWidgetViewComponent))
         </div>
     </div>

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Catalog.cshtml.js

@@ -1,13 +1,17 @@
 (function(){
     $(function(){
+
+        var basketWidget = new abp.WidgetManager('#BasketArea');        
+        
         $('.product-list-item').click(function(){
             var $this = $(this);
             var productId = $this.attr('data-product-id');
             eShopOnAbp.basketService.basket.addProduct({
                 productId: productId
             }).then(function(){
+                basketWidget.refresh();
                 abp.notify.success("Added product to your basket.", "Successfully added");
             });
         });
-    })
+    });
 })();

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Catalog.css

@@ -27,38 +27,4 @@
 
 .product-info-box {
     min-height: 80px;
-}
-
-.basket-list
-{
-    background-color: #fff;
-    padding: 1em;
-    border: 1px solid #666;
-    border-radius: 3px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
-    margin-bottom: 0.5em;
-    transition: all .2s;
-}
-
-.basket-list:hover {
-    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
-    cursor: pointer;
-}
-
-.basket-list-item {
-    margin-top: 1em;
-}
-
-.basket-list-item:first-child{
-    margin-top: 0;
-}
-
-.basket-list-item img {
-    height: 1em;
-}
-
-.basket-total-area
-{
-    margin-bottom: 1em;
-    font-weight: bold;
 }

apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket-widget.css

@@ -0,0 +1,42 @@
+.basket-list
+{
+    background-color: #fff;
+    padding: 1em;
+    border: 1px solid #666;
+    border-radius: 3px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+    margin-bottom: 0.5em;
+    transition: all .2s;
+}
+
+.basket-list:hover {
+    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+}
+
+.basket-list-item {
+    margin-top: 1em;
+}
+
+.basket-list-item:first-child{
+    margin-top: 0;
+}
+
+.basket-list-item img {
+    height: 1em;
+}
+
+.basket-total-area
+{
+    margin-bottom: 1em;
+    font-weight: bold;
+}
+
+.basket-item-remove {
+    cursor: pointer;
+    color: red;
+    opacity: 0.25;
+}
+
+.basket-list-item:hover .basket-item-remove {
+    opacity: 1.0;
+}

apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket-widget.js

@@ -0,0 +1,25 @@
+(function (){
+    abp.widgets.BasketWidget = function ($wrapper) {
+        var widgetManager = $wrapper.data('abp-widget-manager');
+
+        var init = function (filters) {
+            $wrapper
+                .find('.basket-item-remove')
+                .click(function(){
+                    var $this = $(this);
+                    var productId = $this.parent('.basket-list-item').attr('data-product-id');
+                    eShopOnAbp.basketService.basket.removeProduct({
+                        productId: productId
+                    }).then(function(){
+                        widgetManager.refresh();
+                        abp.notify.info("Removed the product from your basket.", "Removed basket item");
+                    });
+                });
+        };
+
+        return {
+            init: init
+        };
+    };
+
+})();