Merge pull request #62 from abpframework/cart-popover

Cart popover

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

@@ -1,16 +1,47 @@
 @using EShopOnAbp.BasketService.Localization
+@using EShopOnAbp.PublicWeb.Components.Basket
 @using Microsoft.AspNetCore.Mvc.Localization
 @inject IHtmlLocalizer<BasketServiceResource> L
 @model EShopOnAbp.BasketService.BasketDto
 <div id="shopping-cart" class="nav-link">
-    @if (Model == null)
+
-    {
+	@if (Model == null)
-        <span class="cart-error" style="vertical-align: -webkit-baseline-middle;color: white">@L["Toolbar:BasketNotLoaded"] </span>
+	{
-    }
+		<span class="cart-error" style="vertical-align: -webkit-baseline-middle;color: white">@L["Toolbar:BasketNotLoaded"] </span>
-    else
+	}
-    {
+	else
-        <a class="btn nav-link" style="padding:0px" role="button" href="~/Basket">
+	{
-            <span abp-badge="Info" data-cart-count>@Model.Items.Count</span> @L["Toolbar:Cart"] 
+		<div class="dropdown">
-        </a>
+			<a class="btn nav-link dropdown-toggle" id="shopping-cart-link" style="padding:0px" role="button" href="~/Basket">
-    }
+				<span abp-badge="Info" data-cart-count>@Model.Items.Count</span> @L["Toolbar:Cart"]
-</div>
+			</a>
+
+			<div class="dropdown-menu dropdown-menu-end border-0 shadow-sm cart-preview" aria-labelledby="shopping-cart-link">
+
+				@foreach (var item in Model.Items)
+				{
+					string imageName = item.ImageName.IsNullOrEmpty() ? "/product-images/noimage.jpg" : $"/product-images/{item.ImageName}";
+					var price = item.TotalPrice.ToString("0.00");
+					<div class="dropdown-item">
+
+						<abp-row>
+							<abp-column size="_3">
+								<img class="basket-item-preview-image p-1" src="@imageName" />
+							</abp-column>
+							<abp-column size="_9">
+								<p><strong>@item.ProductName</strong></p>
+								<p>$@item.TotalPrice</p>
+							</abp-column>
+						</abp-row>
+					</div>
+				}
+
+				<div>
+					<div class="d-grid gap-2 m-2">
+						<abp-button href="~/Basket" button-type="Outline_Warning" text="@L["Toolbar:Cart"].Value" />
+					</div>
+				</div>
+			</div>
+		</div>
+	}
+</div>

apps/public-web/src/EShopOnAbp.PublicWeb/EShopOnAbpPublicWebModule.cs

@@ -33,6 +33,9 @@ using Volo.Abp.MultiTenancy;
 using Volo.Abp.UI.Navigation;
 using Volo.Abp.UI.Navigation.Urls;
 using Yarp.ReverseProxy.Transforms;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling;
+using EShopOnAbp.PublicWeb.Components.Toolbar.Cart;
 
 namespace EShopOnAbp.PublicWeb
 {
@@ -78,6 +81,17 @@ namespace EShopOnAbp.PublicWeb
                 options.AddMaps<EShopOnAbpPublicWebModule>(validate: true);
             });
 
+            Configure<AbpBundlingOptions>(options =>
+            {
+                options.StyleBundles.Configure(
+                   BasicThemeBundles.Styles.Global,
+                   bundle =>
+                   {
+                       bundle.AddContributors(typeof(CartWidgetStyleContributor));
+                   }
+               );
+            });
+
             Configure<AbpMultiTenancyOptions>(options =>
             {
                 options.IsEnabled = true;

apps/public-web/src/EShopOnAbp.PublicWeb/Menus/EShopOnAbpPublicWebToolbarContributor.cs

@@ -16,7 +16,7 @@ namespace EShopOnAbp.PublicWeb.Menus
                 return Task.CompletedTask;
             }
 
-            context.Toolbar.Items.Add(new ToolbarItem(typeof(CartWidgetViewComponent)));
+            context.Toolbar.Items.Insert(0, new ToolbarItem(typeof(CartWidgetViewComponent), order: 0));
 
             if (!context.ServiceProvider.GetRequiredService<ICurrentUser>().IsAuthenticated)
             {

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

@@ -1,4 +1,18 @@
 .cart-error {
     vertical-align: -webkit-baseline-middle;
     color: rgba(255, 255, 255, 0.75);
+}
+
+.cart-preview .basket-item-preview-image {
+    max-width: 3em;
+    max-height: 3em;
+}
+
+.cart-preview p {
+    text-decoration: none;
+    font-size: 0.85em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }