-
diff --git a/blazor/common/showcase-sample/shopping-cart.md b/blazor/common/showcase-sample/shopping-cart.md
new file mode 100644
index 0000000000..b8a16d94b6
--- /dev/null
+++ b/blazor/common/showcase-sample/shopping-cart.md
@@ -0,0 +1,1782 @@
+---
+layout: post
+title: Creating a Shopping Cart in Blazor with Syncfusion components
+description: Improved step-by-step guide for building a shopping cart in a Blazor application, covering product listing, cart management, and checkout using Syncfusion components.
+platform: Blazor
+control: Common
+documentation: ug
+---
+
+# Creating a Shopping Cart in Blazor with Syncfusion® Blazor components
+
+## Overview
+
+This guide explains how to create a shopping cart workflow(product browsing → cart → checkout → order confirmation) in a Blazor Server application using Syncfusion Blazor components. The walkthrough covers the essential building blocks required for a typical e-commerce scenario, including defining data models, managing cart state using dependency-injected services, and implementing pages for product listing, shopping cart management, and checkout.
+
+## Prerequisites
+
+Before starting, ensure that you have:
+
+* [.NET 8 SDK or later](https://dotnet.microsoft.com/en-us/download/dotnet)
+* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
+
+## Create the Blazor project
+
+To create a Blazor application, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio).
+
+## Install required Syncfusion® packages
+
+To add the Blazor components to the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install the NuGet packages listed below.
+
+* [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons)
+* [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards)
+* [Syncfusion.Blazor.Dropdowns](https://www.nuget.org/packages/Syncfusion.Blazor.Dropdowns)
+* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
+* [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs)
+* [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner)
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+## Add required namespaces
+
+Open the `Components/_Imports.razor` file and import the following Syncfusion components namespaces.
+
+{% tabs %}
+{% highlight razor tabtitle="_Imports.razor" %}
+
+@using ShoppingCart.Models
+@using ShoppingCart.Services
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Cards
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.Spinner
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Syncfusion® Blazor service
+
+Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
+
+{% tabs %}
+{% highlight cs tabtitle="~/Program.cs" %}
+
+using Syncfusion.Blazor;
+...
+builder.Services.AddSyncfusionBlazor();
+...
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+Add the Syncfusion theme CSS and required scripts to the `~/Components/App.razor` file.
+
+{% tabs %}
+{% highlight html tabtitle="App.razor" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N>The example uses `fluent2.css`. Other available theme options include: `bootstrap5.css`, `fabric.css`, `highcontrast.css`, and `tailwind.css`. See the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes) for customization details.
+
+## Project structure
+
+Organize the application using the following folder structure to separate concerns and maintain a clean project layout.
+
+```text
+ShoppingCart/
+├── Components/
+│ ├── Pages/ // Routable pages (Home, Catalog, Cart, Checkout, etc.)
+│ ├── Layout/ // Layout components (MainLayout, NavMenu)
+│ ├── _Imports.razor // Namespace imports
+│ ├── App.razor // Root component
+│ ├── ProductCard.razor // Reusable component
+│ ├── CartItems.razor // Reusable component
+│ └── CartBadge.razor // Reusable component
+├── Models/ // Data models (Product, CartItem, Order, etc.)
+├── Services/ // Application services (CartService, OrderService, etc.)
+├── Data/ // Sample or in-memory data (ProductData)
+├── wwwroot/ // Static files (CSS, images)
+├── Properties/
+│ └── launchSettings.json
+├── appsettings.json
+└── Program.cs
+```
+
+This structure helps keep the application maintainable and scalable by clearly separating data models, services, and UI components. It also makes it easier to update or extend the application as requirements evolve.
+
+## Define data models
+
+### Product model
+
+Defines the data model used to represent products in the catalog.
+
+{% tabs %}
+{% highlight cs tabtitle="Models/Product.cs" %}
+
+namespace ShoppingCart.Models
+{
+ public class Product
+ {
+ public int Id { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Description { get; set; } = string.Empty;
+ public decimal Price { get; set; }
+ public string ImageUrl { get; set; } = string.Empty;
+ public string Category { get; set; } = string.Empty;
+ public double Rating { get; set; }
+ public int ReviewCount { get; set; }
+ public bool IsInStock { get; set; } = true;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Cart item model
+
+Defines the data model used to represent an item added to the shopping cart.
+
+{% tabs %}
+{% highlight cs tabtitle="Models/CartItem.cs" %}
+
+namespace ShoppingCart.Models
+{
+ public class CartItem
+ {
+ public int ProductId { get; set; }
+ public string ProductName { get; set; } = string.Empty;
+ public decimal UnitPrice { get; set; }
+ public int Quantity { get; set; }
+ public string ImageUrl { get; set; } = string.Empty;
+
+ public decimal Subtotal => UnitPrice * Quantity;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Order model
+
+Defines the data models used to represent an order, including order details, shipping information, and payment information.
+
+{% tabs %}
+{% highlight cs tabtitle="Models/Order.cs" %}
+using System.ComponentModel.DataAnnotations;
+namespace ShoppingCart.Models
+{
+ public class Order
+ {
+ public int OrderId { get; set; }
+ public List
Items { get; set; } = new(); + public decimal TotalAmount { get; set; } + public DateTime OrderDate { get; set; } + public string Status { get; set; } = "Pending"; + public ShippingInfo Shipping { get; set; } = new(); + public PaymentInfo Payment { get; set; } = new(); + } + + public class ShippingInfo + { + [Required(ErrorMessage = "Full name is required")] + public string FullName { get; set; } = string.Empty; + + [Required(ErrorMessage = "Address is required")] + public string Address { get; set; } = string.Empty; + + [Required(ErrorMessage = "City is required")] + public string City { get; set; } = string.Empty; + + [Required(ErrorMessage = "State is required")] + public string State { get; set; } = string.Empty; + + [Required(ErrorMessage = "ZIP code is required")] + [RegularExpression(@"^\d{5}(-\d{4})?$", ErrorMessage = "Enter a valid ZIP code")] + public string ZipCode { get; set; } = string.Empty; + + [Required(ErrorMessage = "Country is required")] + public string Country { get; set; } = string.Empty; + + [Required(ErrorMessage = "Phone is required")] + [Phone(ErrorMessage = "Enter a valid phone number")] + public string Phone { get; set; } = string.Empty; + } + + public class PaymentInfo + { + [Required(ErrorMessage = "Card number is required")] + [RegularExpression(@"^\d{16}$", ErrorMessage = "Card number must be 16 digits")] + public string CardNumber { get; set; } = string.Empty; + + [Required(ErrorMessage = "Card holder name is required")] + public string CardHolder { get; set; } = string.Empty; + + [Required(ErrorMessage = "Expiry date is required")] + [RegularExpression(@"^(0[1-9]|1[0-2])\/\d{2}$", ErrorMessage = "Use MM/YY format")] + public string ExpiryDate { get; set; } = string.Empty; + + [Required(ErrorMessage = "CVV is required")] + [RegularExpression(@"^\d{3,4}$", ErrorMessage = "CVV must be 3 or 4 digits")] + public string CVV { get; set; } = string.Empty; + } +} + +{% endhighlight %} +{% endtabs %} + +## Create the data + +This section defines sample product data used by the application. + +{% tabs %} +{% highlight cs tabtitle="Data/ProductData.cs" %} + +using ShoppingCart.Models; + +namespace ShoppingCart.Data +{ + public static class ProductData + { + public static List Products => new() + { + new() { Id = 1, Name = "Wireless Headphones", Description = "Premium noise-canceling headphones", Price = 299.99m, Category = "Electronics", ImageUrl = "images/product1.svg", Rating = 4.8, ReviewCount = 256, IsInStock = true }, + new() { Id = 2, Name = "Smart Watch", Description = "Feature-rich smartwatch", Price = 199.99m, Category = "Electronics", ImageUrl = "images/product2.svg", Rating = 4.6, ReviewCount = 189, IsInStock = true }, + new() { Id = 3, Name = "Running Shoes", Description = "Lightweight running shoes", Price = 129.99m, Category = "Footwear", ImageUrl = "images/product3.svg", Rating = 4.7, ReviewCount = 423, IsInStock = true }, + new() { Id = 4, Name = "Leather Backpack", Description = "Durable leather backpack", Price = 89.99m, Category = "Accessories", ImageUrl = "images/product4.svg", Rating = 4.5, ReviewCount = 156, IsInStock = true }, + new() { Id = 5, Name = "USB-C Cable", Description = "High-speed USB-C charging cable", Price = 19.99m, Category = "Accessories", ImageUrl = "images/product5.svg", Rating = 4.4, ReviewCount = 512, IsInStock = true }, + new() { Id = 6, Name = "Portable Charger", Description = "20000mAh portable power bank", Price = 49.99m, Category = "Electronics", ImageUrl = "images/product6.svg", Rating = 4.7, ReviewCount = 301, IsInStock = true }, + new() { Id = 7, Name = "Bluetooth Speaker", Description = "Loud portable speaker", Price = 39.99m, Category = "Electronics", ImageUrl = "images/product7.svg", Rating = 4.5, ReviewCount = 210, IsInStock = true }, + new() { Id = 8, Name = "Smartphone", Description = "Latest model smartphone", Price = 499.99m, Category = "Electronics", ImageUrl = "images/product8.svg", Rating = 4.6, ReviewCount = 320, IsInStock = true }, + new() { Id = 9, Name = "Wireless Mouse", Description = "Ergonomic wireless mouse", Price = 29.99m, Category = "Accessories", ImageUrl = "images/product5.svg", Rating = 4.3, ReviewCount = 110, IsInStock = true }, + new() { Id = 10, Name = "Mechanical Keyboard", Description = "Tactile mechanical keyboard", Price = 89.99m, Category = "Accessories", ImageUrl = "images/product6.svg", Rating = 4.7, ReviewCount = 89, IsInStock = true }, + new() { Id = 11, Name = "Action Camera", Description = "Waterproof action camera", Price = 149.99m, Category = "Electronics", ImageUrl = "images/product7.svg", Rating = 4.2, ReviewCount = 67, IsInStock = true }, + new() { Id = 12, Name = "Noise Cancelling Earbuds", Description = "Compact true wireless earbuds", Price = 129.99m, Category = "Electronics", ImageUrl = "images/product1.svg", Rating = 4.4, ReviewCount = 240, IsInStock = true }, + new() { Id = 13, Name = "Gaming Headset", Description = "Surround sound gaming headset", Price = 79.99m, Category = "Electronics", ImageUrl = "images/product2.svg", Rating = 4.1, ReviewCount = 98, IsInStock = true }, + new() { Id = 14, Name = "4K Monitor", Description = "Ultra HD 4K monitor", Price = 349.99m, Category = "Electronics", ImageUrl = "images/product3.svg", Rating = 4.6, ReviewCount = 45, IsInStock = true }, + new() { Id = 15, Name = "Fitness Band", Description = "Track your activity and sleep", Price = 59.99m, Category = "Electronics", ImageUrl = "images/product8.svg", Rating = 4.0, ReviewCount = 75, IsInStock = true }, + new() { Id = 16, Name = "Portable SSD", Description = "Fast external SSD drive", Price = 119.99m, Category = "Storage", ImageUrl = "images/product5.svg", Rating = 4.8, ReviewCount = 53, IsInStock = true }, + new() { Id = 17, Name = "Wireless Charger", Description = "Fast wireless charging pad", Price = 24.99m, Category = "Accessories", ImageUrl = "images/product6.svg", Rating = 4.2, ReviewCount = 33, IsInStock = true }, + new() { Id = 18, Name = "Tripod", Description = "Lightweight camera tripod", Price = 34.99m, Category = "Accessories", ImageUrl = "images/product7.svg", Rating = 4.1, ReviewCount = 22, IsInStock = true }, + new() { Id = 19, Name = "Desk Lamp", Description = "LED desk lamp with dimmer", Price = 39.99m, Category = "Home", ImageUrl = "images/product4.svg", Rating = 4.3, ReviewCount = 18, IsInStock = true }, + new() { Id = 20, Name = "Backpack Cover", Description = "Waterproof backpack cover", Price = 14.99m, Category = "Accessories", ImageUrl = "images/product4.svg", Rating = 4.0, ReviewCount = 12, IsInStock = true }, + }; + + public static List Categories => Products + .Select(p => p.Category) + .Distinct() + .OrderBy(c => c) + .ToList(); + } +} + +{% endhighlight %} +{% endtabs %} + +N> Ensure placeholder images are placed in `wwwroot/images/` or replace `ImageUrl` values with URLs to your own images. + +This static data source provides product and category information for demonstration purposes. It allows the application to function without a backend service and supports catalog and filtering features. + +## Create the services + +In a Blazor application, services are used to handle business logic and maintain shared state across components. They are registered with dependency injection and allow multiple pages and components to access the same data in a consistent and controlled manner. + +### Cart service interface + +This interface defines the operations and state required to manage the shopping cart throughout the application + +{% tabs %} +{% highlight cs tabtitle="Services/ICartService.cs" %} + +using ShoppingCart.Models; + +namespace ShoppingCart.Services +{ + public interface ICartService + { + event Action? OnCartChanged; + List Items { get; } + int ItemCount { get; } + decimal Total { get; } + + void AddItem(Product product); + void RemoveItem(int productId); + void UpdateQuantity(int productId, int quantity); + void ClearCart(); + } +} + +{% endhighlight %} +{% endtabs %} + +It exposes cart data, summary values, and methods to modify cart items. The change event allows components to automatically refresh when the cart is updated. + +### Cart service implementation + +This class implements the cart logic and stores cart data for the current user session. + +{% tabs %} +{% highlight cs tabtitle="Services/CartService.cs" %} + +using ShoppingCart.Models; + +namespace ShoppingCart.Services +{ + public class CartService : ICartService + { + private List _items = new(); + + public event Action? OnCartChanged; + + public List Items => _items; + + public int ItemCount => _items.Sum(i => i.Quantity); + + public decimal Total => _items.Sum(i => i.Subtotal); + + public void AddItem(Product product) + { + var existingItem = _items.FirstOrDefault(i => i.ProductId == product.Id); + + if (existingItem != null) + { + existingItem.Quantity++; + } + else + { + _items.Add(new CartItem + { + ProductId = product.Id, + ProductName = product.Name, + UnitPrice = product.Price, + Quantity = 1, + ImageUrl = product.ImageUrl + }); + } + + OnCartChanged?.Invoke(); + } + + public void RemoveItem(int productId) + { + _items.RemoveAll(i => i.ProductId == productId); + OnCartChanged?.Invoke(); + } + + public void UpdateQuantity(int productId, int quantity) + { + var item = _items.FirstOrDefault(i => i.ProductId == productId); + if (item != null) + { + if (quantity <= 0) + RemoveItem(productId); + else + item.Quantity = quantity; + OnCartChanged?.Invoke(); + } + } + + public void ClearCart() + { + _items.Clear(); + OnCartChanged?.Invoke(); + } + } +} + +{% endhighlight %} +{% endtabs %} + +The service manages cart items in memory and recalculates totals as changes occur. Each update triggers a notification so subscribed components remain in sync. + +### Order service interface + +This interface defines methods for placing orders and retrieving order information. + +{% tabs %} +{% highlight cs tabtitle="Services/IOrderService.cs" %} + +using ShoppingCart.Models; + +namespace ShoppingCart.Services +{ + public interface IOrderService + { + Task PlaceOrderAsync(Order order); + Task _orders = new(); + + public Task PlaceOrderAsync(Order order) + { + order.OrderId = _orders.Count + 1; + order.Status = "Confirmed"; + _orders.Add(order); + return Task.FromResult(order); + } + + public Task + /// Fires whenever a product is added, removed, or toggled in the wishlist. + /// + event Action? OnChange; + + void Toggle(Product product); + bool Contains(Product product); + IReadOnlyListGetItems(); + void Remove(Product product); + } +} + +{% endhighlight %} +{% endtabs %} + +It exposes methods to add, remove, and query wishlist items while notifying components of changes. + +### Wishlist service implementation + +This class maintains the wishlist state for the current session. + +{% tabs %} +{% highlight cs tabtitle="Services/WishlistService.cs" %} + +using ShoppingCart.Models; + +namespace ShoppingCart.Services +{ + public class WishlistService : IWishlistService + { + private readonly List _items = new(); + + public event Action? OnChange; + + public void Toggle(Product product) + { + if (Contains(product)) + _items.RemoveAll(p => p.Id == product.Id); + else + _items.Add(product); + + OnChange?.Invoke(); + } + + public bool Contains(Product product) + => _items.Any(p => p.Id == product.Id); + + public IReadOnlyList GetItems() + => _items.AsReadOnly(); + + public void Remove(Product product) + { + _items.RemoveAll(p => p.Id == product.Id); + OnChange?.Invoke(); + } + } +} + +{% endhighlight %} +{% endtabs %} + +The service tracks wishlist items in memory and notifies subscribed components whenever changes occur. + +## Register services + +Register the application services in `Program.cs` so they can be accessed throughout the Blazor application using dependency injection. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + + builder = WebApplication.CreateBuilder(args); +... +// Application services +builder.Services.AddScoped + + +@code { + [Parameter] public Product Item { get; set; } = default!; + [Parameter] public EventCallback+ + ++++
@Item.Name
+ ++ + + @Item.Description +
++ + +OnAddToCart { get; set; } + + private string HeartIcon => + WishlistService.Contains(Item) ? "❤️" : "♡"; + + private void ToggleWishlist() + => WishlistService.Toggle(Item); + + private Task AddToCart() + { + return OnAddToCart.InvokeAsync(Item); + } +} + + +{% endhighlight %} +{% endtabs %} + +This component receives product data through parameters and uses Syncfusion UI components to render a consistent product card layout. It communicates user actions to parent components through callbacks and uses the wishlist service to manage and reflect wishlist state. + +### Create the CartBadge component + +This component displays a cart icon with a badge that shows the total number of items currently in the cart. It can be placed in a layout or header to provide global visibility of the cart state. + +{% tabs %} +{% highlight razor tabtitle="Components/CartBadge.razor" %} + +@using ShoppingCart.Services +@implements IDisposable + + + + @CartService.ItemCount + + + + +@code { + [Inject] ICartService CartService { get; set; } = null!; + + protected override void OnInitialized() + { + CartService.OnCartChanged += StateHasChanged; + } + + public void Dispose() + { + CartService.OnCartChanged -= StateHasChanged; + } +} + +{% endhighlight %} +{% endtabs %} + +This component reads the cart item count from the cart service and displays it as a badge. It subscribes to cart state changes so the badge value updates automatically whenever items are added or removed. + +## Create pages for catalog & cart + +### Create the Home page + +This page serves as the landing page and provides quick navigation to key areas of the application. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@page "/" + +@using Syncfusion.Blazor.Cards + +@inject NavigationManager Nav + + + + ++ + + +{% endhighlight %} +{% endtabs %} + +The home page uses Syncfusion card components to present a simple hero section and navigation cards. It helps users quickly access the product catalog and wishlist. + +### Create the product catalog page + +This page displays the list of available products and allows users to filter products by category and add items to the shopping cart. + +{% tabs %} +{% highlight razor tabtitle="Catalog.razor" %} + +@page "/catalog" + +@using ShoppingCart.Services +@inject IProductService ProductService +@inject ICartService CartService + ++ + + + + ++ + +Welcome to Syncfusion Blazor Shopping Cart
+Discover amazing products, add to wishlist, and shop smarter.
+
+ + + +++ + + ++ +
+ + + ++ +
+ Product Catalog + +++ +@code { + private List++ + @if (products == null) + { +++🛍️ Our Products
++++++ + + } + else if (!filteredProducts.Any()) + { ++ No products found. Clear filter ++ } + else + { +++ } ++ @foreach (var product in filteredProducts) + { ++++ } ++ ? products; + private List categories = new(); + private string? selectedCategory; + + private List filteredProducts => + (string.IsNullOrEmpty(selectedCategory) || selectedCategory == "All Categories") + ? products ?? new List () + : products?.Where(p => p.Category == selectedCategory).ToList() + ?? new List (); + + protected override async Task OnInitializedAsync() + { + products = await ProductService.GetProductsAsync(); + categories = await ProductService.GetCategoriesAsync(); + categories.Insert(0, "All Categories"); + } + + private void HandleAddToCart(Product product) + { + CartService.AddItem(product); + } + + private void ClearFilter() + { + selectedCategory = "All Categories"; + } +} + + + +{% endhighlight %} +{% endtabs %} + +This page retrieves product and category data using the product service and displays the results in a responsive grid layout. Users can filter products by category and add selected items to the cart using the cart service. + +### Create the shopping cart page + +This page displays the items added to the shopping cart and allows users to modify quantities, remove items, and review order totals before proceeding to checkout. + +{% tabs %} +{% highlight razor tabtitle="Cart.razor" %} + +@page "/cart" +@using ShoppingCart.Models +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@implements IDisposable +@inject ICartService CartService +@inject NavigationManager NavigationManager + + Shopping Cart + +++ +@code { + private Syncfusion.Blazor.Grids.SfGrid++++ + @if (CartService.Items.Any()) + { + +🛒 Shopping Cart
+ + @if (!CartService.Items.Any()) + { +++ } + else + { ++ ++ ++ ++Your cart is empty
+Looks like you haven't added anything yet. Browse products and start shopping.
++++ Browse Catalog + ++ View Wishlist + +++ } ++ + ++ + + ++ + @{ + var item = (CartItem)context; + } + + + +++ ++ @item.ProductName +
+ + @{ + var item = (CartItem)context; + } + @item.UnitPrice.ToString("C") + + + + ++ + @{ + var item = (CartItem)context; + } + + + +++ ++ + @item.Quantity + + + + + @{ + var item = (CartItem)context; + } + @item.Subtotal.ToString("C") + + + + ++ + @{ + var item = (CartItem)context; + } + + ++ + ++ } ++ ++ + +++++Order Summary
+Review your items before checkout
+@CartService.Total.ToString("C")++ + +++ +Items (@CartService.ItemCount)++ @foreach (var item in CartService.Items) + { ++++ } +++@item.ProductName+@item.Quantity x @item.UnitPrice.ToString("C")++ +++Checkout +Continue Shopping +? cartGrid; + private void Increase(CartItem item) + => CartService.UpdateQuantity(item.ProductId, item.Quantity + 1); + + private void Decrease(CartItem item) + => CartService.UpdateQuantity(item.ProductId, item.Quantity - 1); + + private void Remove(CartItem item) + => CartService.RemoveItem(item.ProductId); + + protected override void OnInitialized() + { + CartService.OnCartChanged += CartChanged; + } + + // Refresh the grid when the cart changes so rows reflect removals/updates + private async void CartChanged() + { + await InvokeAsync(async () => + { + if (cartGrid is not null) + { + try + { + await cartGrid.Refresh(); + } + catch + { + // If Refresh isn't available for some reason, fall back to re-render + } + } + + StateHasChanged(); + }); + } + + public void Dispose() + { + CartService.OnCartChanged -= CartChanged; + } + + private void NavigateToCatalog() => NavigationManager.NavigateTo("/catalog"); + + private void NavigateToWishlist() => NavigationManager.NavigateTo("/wishlist"); + + private void NavigateToCheckout() => NavigationManager.NavigateTo("/checkout"); + +} + + + +{% endhighlight %} +{% endtabs %} + +### Create the checkout page + +This page collects shipping and payment details, displays an order summary, and places the order when the user completes the checkout process. + +{% tabs %} +{% highlight razor tabtitle="Checkout.razor" %} + +@page "/checkout" +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons +@inject ICartService CartService +@inject IOrderService OrderService +@inject NavigationManager NavigationManager + + Checkout + +++ +@code { + private Order order = new(); + + private async Task ProcessOrder() + { + order.Items = CartService.Items.ToList(); + order.TotalAmount = CartService.Total; + order.OrderDate = DateTime.Now; + + await OrderService.PlaceOrderAsync(order); + CartService.ClearCart(); + NavigationManager.NavigateTo($"/order-confirmation/{order.OrderId}"); + } +} + +{% endhighlight %} +{% endtabs %} + +N> The payment form in this sample is for **demonstration purposes only** and is **NOT secure for production use**. + +This page validates cart content, collects user input using an EditForm, and displays a live order summary. When the order is submitted, it creates a new order using the order service, clears the cart, and navigates to the order confirmation page. + +### Create the OrderConfirmation page + +This page displays the order confirmation details after a successful checkout and allows the user to review the order summary and shipping information. + +{% tabs %} +{% highlight razor tabtitle="OrderConfirmation.razor" %} + +@page "/order-confirmation/{OrderId:int}" +@inject IOrderService OrderService +@inject NavigationManager NavigationManager + +📦 Checkout
+ + @if (!CartService.Items.Any()) + { ++ Your cart is empty. Continue shopping ++ } + else + { ++ + } ++ + + +++ ++ +++ + +++📍 Shipping Information
++++++ +++ + +++ + +++ + +++ + +++ + +++ + +++ ++ +++💳 Payment Information
++++++ +++ + +++ + +++ + +++ + ++++++Order Summary
++ @foreach (var item in CartService.Items) + { +++ @item.ProductName x @item.Quantity + @item.Subtotal.ToString("C") ++ } +
++ Subtotal: + @CartService.Total.ToString("C") +++ Shipping: + $0.00 +++ Total: + @CartService.Total.ToString("C") ++Order Confirmation + ++ @if (order == null) + { ++ +@code { + [Parameter] public int OrderId { get; set; } + private Order? order; + + protected override async Task OnInitializedAsync() + { + order = await OrderService.GetOrderByIdAsync(OrderId); + } + + private void NavigateToCatalog() => + NavigationManager.NavigateTo("/catalog"); +} + +{% endhighlight %} +{% endtabs %} + +This page retrieves the order details using the order ID passed in the route and displays a confirmation message along with item and shipping information. It also provides a navigation option to return to the product catalog. + +### Create the OrderHistory page + +This page displays a list of previously placed orders and allows users to review order details and status. + +{% tabs %} +{% highlight razor tabtitle="OrderHistory.razor" %} + +@page "/orders" +@using ShoppingCart.Services +@inject IOrderService OrderService + +Order not found+ } + else + { +++ } +++++ +++✅ Order Confirmed!
+Thank you for your purchase.
+Order #@order.OrderId
+++ +++📦 Order Items
++ @foreach (var item in order.Items) + { +++ @item.ProductName x @item.Quantity + @item.Subtotal.ToString("C") ++ } ++ Total: + @order.TotalAmount.ToString("C") ++++ +++📍 Shipping Address
+++@order.Shipping.FullName
+
+ @order.Shipping.Address
+ @order.Shipping.City, @order.Shipping.State @order.Shipping.ZipCode
+ @order.Shipping.Country
+ @order.Shipping.Phone+++ Order History + +++ +@code { + private ListOrder History
+ + @if (orders == null) + { ++ } + else if (!orders.Any()) + { + ++ } + else + { +No orders yet
+You haven't placed any orders. Start shopping now!
+Browse Catalog ++ @foreach (var o in orders) + { ++ } +++ } +++++++Order #@o.OrderId
+@o.OrderDate.ToString("MMM d, yyyy") — @o.Status+++@o.TotalAmount.ToString("C")++ View + +
+Items:+-
+ @foreach (var it in o.Items)
+ {
+
- @it.ProductName — @it.Quantity x @it.UnitPrice.ToString("C") + } +
? orders; + + protected override async Task OnInitializedAsync() + { + // OrderService may return empty list in sample app + orders = await OrderService.GetOrdersAsync(); + } +} + +{% endhighlight %} +{% endtabs %} + +This page retrieves order data using the order service and displays it in a summary format. It handles loading, empty, and populated states to provide a clear and consistent order history experience. + +### Create the Wishlist page + +This page allows users to view and manage products they have saved for future reference. + +{% tabs %} +{% highlight razor tabtitle="Wishlist.razor" %} + +@page "/wishlist" +@using Syncfusion.Blazor.Buttons +@inject IWishlistService WishlistService +@inject NavigationManager NavigationManager + + Wishlist + +My Wishlist
+ +@if (!WishlistService.GetItems().Any()) +{ +++} +else +{ ++ ++ ++ ++Your wishlist is empty
+Save products you like to come back to them later.
+++Browse Catalog +Popular Picks ++ @foreach (var product in WishlistService.GetItems()) + { ++} + + + +@code { + private void NavigateToCatalog() => NavigationManager.NavigateTo("/catalog"); + + private void NavigateToPopular() => NavigationManager.NavigateTo("/catalog"); +} + +{% endhighlight %} +{% endtabs %} + +This page uses the wishlist service to retrieve saved items and conditionally displays either an empty state or a list of products. Users can remove items from the wishlist or navigate back to the catalog. + +## Run the application + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. + +**Expected behavior** + +* The application launches successfully and displays the home page with navigation links to the product catalog and wishlist. +* The product catalog lists available products using Syncfusion Blazor components, and adding items updates the cart badge immediately. +* The shopping cart page shows selected items, supports quantity updates and removal actions, and recalculates totals in real time. +* The checkout process allows users to enter shipping and payment details, place an order, and clear the cart upon completion. +* After checkout, the order confirmation and order history pages display the appropriate order details and status. +* The wishlist page allows users to save and remove products, and the saved items remain available while navigating across pages. + +## See also + +* [Getting started with Syncfusion Blazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) +* [Syncfusion Blazor Card](https://blazor.syncfusion.com/documentation/card/getting-started-with-server-app) +* [Syncfusion Blazor Buttons](https://blazor.syncfusion.com/documentation/button/getting-started-with-server-app) +* [Syncfusion Blazor ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-server-app) +* [Syncfusion Blazor Rating](https://blazor.syncfusion.com/documentation/rating/getting-started-webapp) +* [Syncfusion Blazor Spinner](https://blazor.syncfusion.com/documentation/spinner/getting-started-webapp) +* [Dependency Injection in Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/dependency-injection) From 7dd06ff7027121cc79408ab3fe2f16036d0e065e Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Tue, 5 May 2026 14:32:46 +0530 Subject: [PATCH 2/6] Update shopping-cart.md --- .../common/showcase-sample/shopping-cart.md | 48 +++++++++++-------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/blazor/common/showcase-sample/shopping-cart.md b/blazor/common/showcase-sample/shopping-cart.md index b8a16d94b6..8611fc9776 100644 --- a/blazor/common/showcase-sample/shopping-cart.md +++ b/blazor/common/showcase-sample/shopping-cart.md @@ -1,7 +1,7 @@ --- layout: post title: Creating a Shopping Cart in Blazor with Syncfusion components -description: Improved step-by-step guide for building a shopping cart in a Blazor application, covering product listing, cart management, and checkout using Syncfusion components. +description: Step-by-step guide to build a shopping cart in a Blazor app, covering product listings, cart management, and checkout with Syncfusion components demo. platform: Blazor control: Common documentation: ug @@ -30,7 +30,7 @@ To add the Blazor components to the app, open the NuGet Package Manager in Visua * [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) * [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards) -* [Syncfusion.Blazor.Dropdowns](https://www.nuget.org/packages/Syncfusion.Blazor.Dropdowns) +* [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) * [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) * [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner) @@ -276,12 +276,14 @@ namespace ShoppingCart.Data new() { Id = 20, Name = "Backpack Cover", Description = "Waterproof backpack cover", Price = 14.99m, Category = "Accessories", ImageUrl = "images/product4.svg", Rating = 4.0, ReviewCount = 12, IsInStock = true }, }; - public static List++ } ++ ++ + +@product.Name
+@product.Description
+ + + @product.Price.ToString("C") + ++ ++ Categories => Products - .Select(p => p.Category) - .Distinct() - .OrderBy(c => c) - .ToList(); - } + private static List ? _categories; + public static List Categories => + _categories ??= Products + .Select(p => p.Category) + .Distinct() + .OrderBy(c => c) + .ToList(); + } } {% endhighlight %} @@ -537,7 +539,7 @@ The service supports product listing, category filtering, and product lookup usi ### Wishlist service interface -This interface defines operations for managing wishlist items. +This interface defines operations for managing wish-list items. {% tabs %} @@ -564,11 +566,11 @@ namespace ShoppingCart.Services {% endhighlight %} {% endtabs %} -It exposes methods to add, remove, and query wishlist items while notifying components of changes. +It exposes methods to add, remove, and query wish-list items while notifying components of changes. ### Wishlist service implementation -This class maintains the wishlist state for the current session. +This class maintains the wish-list state for the current session. {% tabs %} {% highlight cs tabtitle="Services/WishlistService.cs" %} @@ -610,7 +612,7 @@ namespace ShoppingCart.Services {% endhighlight %} {% endtabs %} -The service tracks wishlist items in memory and notifies subscribed components whenever changes occur. +The service tracks wish-list items in memory and notifies subscribed components whenever changes occur. ## Register services @@ -636,7 +638,7 @@ var app = builder.Build(); ### Create the ProductCard component -This reusable component displays individual product details and provides actions to add items to the cart or toggle wishlist status. +This reusable component displays individual product details and provides actions to add items to the cart or toggle wish-list status. {% tabs %} {% highlight razor tabtitle="Components/ProductCard.razor" %} @@ -767,7 +769,7 @@ This reusable component displays individual product details and provides actions {% endhighlight %} {% endtabs %} -This component receives product data through parameters and uses Syncfusion UI components to render a consistent product card layout. It communicates user actions to parent components through callbacks and uses the wishlist service to manage and reflect wishlist state. +This component receives product data through parameters and uses Syncfusion UI components to render a consistent product card layout. It communicates user actions to parent components through callbacks and uses the wish-list service to manage and reflect wish-list state. ### Create the CartBadge component @@ -788,15 +790,18 @@ This component displays a cart icon with a badge that shows the total number of @code { [Inject] ICartService CartService { get; set; } = null!; + [Inject] NavigationManager NavigationManager { get; set; } = null!; protected override void OnInitialized() { - CartService.OnCartChanged += StateHasChanged; + CartService.OnCartChanged += OnCartChanged; } + private void OnCartChanged() => StateHasChanged(); + public void Dispose() { - CartService.OnCartChanged -= StateHasChanged; + CartService.OnCartChanged -= OnCartChanged; } } @@ -923,7 +928,7 @@ This page serves as the landing page and provides quick navigation to key areas {% endhighlight %} {% endtabs %} -The home page uses Syncfusion card components to present a simple hero section and navigation cards. It helps users quickly access the product catalog and wishlist. +The home page uses Syncfusion card components to present a simple hero section and navigation cards. It helps users quickly access the product catalog and wish-list. ### Create the product catalog page @@ -1050,8 +1055,11 @@ This page displays the items added to the shopping cart and allows users to modi @page "/cart" @using ShoppingCart.Models +@using ShoppingCart.Services +@using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Cards @implements IDisposable @inject ICartService CartService @inject NavigationManager NavigationManager @@ -1755,7 +1763,7 @@ else {% endhighlight %} {% endtabs %} -This page uses the wishlist service to retrieve saved items and conditionally displays either an empty state or a list of products. Users can remove items from the wishlist or navigate back to the catalog. +This page uses the wish-list service to retrieve saved items and conditionally displays either an empty state or a list of products. Users can remove items from the wish-list or navigate back to the catalog. ## Run the application @@ -1763,12 +1771,12 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m **Expected behavior** -* The application launches successfully and displays the home page with navigation links to the product catalog and wishlist. +* The application launches successfully and displays the home page with navigation links to the product catalog and wish-list. * The product catalog lists available products using Syncfusion Blazor components, and adding items updates the cart badge immediately. * The shopping cart page shows selected items, supports quantity updates and removal actions, and recalculates totals in real time. * The checkout process allows users to enter shipping and payment details, place an order, and clear the cart upon completion. * After checkout, the order confirmation and order history pages display the appropriate order details and status. -* The wishlist page allows users to save and remove products, and the saved items remain available while navigating across pages. +* The wish-list page allows users to save and remove products, and the saved items remain available while navigating across pages. ## See also From e73ddd64336bc1df237156acc6c8ac3e3bc729cd Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Tue, 5 May 2026 17:23:36 +0530 Subject: [PATCH 3/6] Update shopping-cart.md --- blazor/common/showcase-sample/shopping-cart.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/blazor/common/showcase-sample/shopping-cart.md b/blazor/common/showcase-sample/shopping-cart.md index 8611fc9776..7ea283212f 100644 --- a/blazor/common/showcase-sample/shopping-cart.md +++ b/blazor/common/showcase-sample/shopping-cart.md @@ -621,6 +621,8 @@ Register the application services in `Program.cs` so they can be accessed throug {% tabs %} {% highlight cs tabtitle="Program.cs" %} +using ShoppingCart.Services; +... builder = WebApplication.CreateBuilder(args); ... // Application services @@ -1053,6 +1055,7 @@ This page displays the items added to the shopping cart and allows users to modi {% tabs %} {% highlight razor tabtitle="Cart.razor" %} + @page "/cart" @using ShoppingCart.Models @using ShoppingCart.Services @@ -1447,7 +1450,7 @@ This page collects shipping and payment details, displays an order summary, and -@@ -1494,6 +1497,7 @@ This page collects shipping and payment details, displays an order summary, and @code { private Order order = new(); + private readonly Dictionary+ Order History From 17e33746b9441e0ad28fc7cb49198ae425251ab2 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Wed, 6 May 2026 14:49:46 +0530 Subject: [PATCH 4/6] 1023110: Updated changes --- blazor-toc.html | 4 +- blazor/common/tutorial-samples/scart.webp | Bin 0 -> 3812344 bytes .../shopping-cart.md | 268 ++++++++---------- 3 files changed, 127 insertions(+), 145 deletions(-) create mode 100644 blazor/common/tutorial-samples/scart.webp rename blazor/common/{showcase-sample => tutorial-samples}/shopping-cart.md (94%) diff --git a/blazor-toc.html b/blazor-toc.html index e3b075d6e9..2351bd76e5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -5449,10 +5449,10 @@