Skip to content

1025699: Shopping cart sample section updated #8912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kmkrish001 merged 5 commits into from
Jun 8, 2026
Merged

1025699: Shopping cart sample section updated #8912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a66753f
1025699: Shopping cart sample section updated
ponselvajeganathan Jun 5, 2026
519e1e5
Merge branch 'development' into 1025699-migrate
ponselvajeganathan Jun 8, 2026
8216a81
Update configure-blazor-component-in-bunit-testing.md
ponselvajeganathan Jun 8, 2026
851fb3d
Update configure-blazor-component-in-bunit-testing.md
ponselvajeganathan Jun 8, 2026
6b067aa
Merge branch 'development' into 1025699-migrate
kmkrish001 Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ If you already have a Blazor project, proceed to the [Set up the bUnit test proj
* [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
* [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

If you do not have an existing Blazor project with the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) configured, follow the [Getting Started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
guide to create and configure the application before proceeding.
This guide covers bUnit testing with the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component. If you do not have an existing Blazor project with the Blazor DataGrid configured, follow the [Getting Started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) guide to create and configure the application before proceeding.

## Set up the bUnit test project

Expand Down Expand Up @@ -173,7 +172,7 @@ public abstract class TestBase : BunitContext
{% endhighlight %}
{% endtabs %}

Each test class inherits from `TestBase` and uses the assertion style idiomatic to its framework: `Assert.Equal` for xUnit, `Assert.That(..., Is.EqualTo(...))` for NUnit, and `Assert.AreEqual` for MSTest. The following tests cover the key behaviors of the Blazor DataGrid component.
Each test class inherits from `TestBase` and uses the assertion style idiomatic to its framework: `Assert.Equal` for xUnit, `Assert.That(..., Is.EqualTo(...))` for NUnit, and `Assert.AreEqual` for MSTest. The following tests cover the key behaviors of the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component.

{% tabs %}
{% highlight csharp tabtitle="xUnit/DataGridTests.cs" %}
Expand Down
61 changes: 35 additions & 26 deletions blazor/tutorials/shopping-cart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ This article explains how to build a shopping cart workflow in a Blazor applicat

## Create the Blazor project

To create a Blazor server application, follow the [Blazor Web App getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app).
To create a Blazor server application, follow the [Blazor Server App getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio).

## Install required packages
### Install required packages

Install required packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.

Expand All @@ -34,9 +34,9 @@ Install required packages in your project using the NuGet Package Manager in Vis
| Spinner | [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner) |
| Themes | [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) |

## Add required namespaces
### Add required namespaces

Open the `Components/_Imports.razor` file and import the following Blazor components, shopping cart models, and services namespaces.
After the packages are installed, open the `Components/_Imports.razor` file and import the following Blazor components, shopping cart models, and services namespaces.

{% tabs %}
{% highlight razor tabtitle="_Imports.razor" %}
Expand All @@ -54,7 +54,7 @@ Open the `Components/_Imports.razor` file and import the following Blazor compon
{% endhighlight %}
{% endtabs %}

## Register Blazor service
### Register Blazor service

Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.

Expand All @@ -69,10 +69,9 @@ builder.Services.AddSyncfusionBlazor();
{% endhighlight %}
{% endtabs %}

## Add stylesheets and script resources

Add the Blazor theme CSS and required scripts to the `~/Components/App.razor` file.
### Add stylesheets and script resources

The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file.
{% tabs %}
{% highlight html tabtitle="App.razor" %}

Expand Down Expand Up @@ -660,7 +659,11 @@ Displays product details and provides actions for adding items to the cart and m
return OnAddToCart.InvokeAsync(Item);
}
}
<style>

{% endhighlight %}

{% highlight css tabtitle="Components/ProductCard.razor.css" %}

.product-card {
border-radius: 10px;
transition: box-shadow 0.2s ease;
Expand Down Expand Up @@ -725,7 +728,6 @@ Displays product details and provides actions for adding items to the cart and m
font-size: 25px;
color: crimson;
}
</style>

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -819,7 +821,10 @@ Serves as the landing page and provides quick navigation to key sections of the
</div>
</div>

<style>
{% endhighlight %}

{% highlight css tabtitle="Home.razor.css" %}

/* PAGE LAYOUT */
.home-container {
max-width: 1000px;
Expand Down Expand Up @@ -881,9 +886,8 @@ Serves as the landing page and provides quick navigation to key sections of the
font-size: 14px;
}

</style>

{% endhighlight %}

{% endtabs %}

This page uses the [Blazor Card](https://www.syncfusion.com/blazor-components/blazor-card) component to present a hero section and navigation cards. It enables users to quickly navigate to the catalog and wishlist pages.
Expand Down Expand Up @@ -973,8 +977,10 @@ Displays available products and provides filtering and cart actions.
}
}

<style>

{% endhighlight %}

{% highlight css tabtitle="Catalog.razor.css" %}

article.content {
overflow: hidden;
}
Expand All @@ -991,9 +997,9 @@ Displays available products and provides filtering and cart actions.
@@media (max-width: 768px) {
.catalog-scroll { max-height: calc(100vh - 160px); }
}
</style>

{% endhighlight %}

{% endtabs %}

This page uses [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) for category filtering and [Spinner](https://www.syncfusion.com/blazor-components/blazor-spinner) for loading states. It integrates the [reusable ProductCard component](#create-the-productcard-component) and interacts with services to manage product data and cart actions.
Expand Down Expand Up @@ -1215,7 +1221,10 @@ Displays selected items and allows users to update quantities or remove items.
private void NavigateToCheckout() => NavigationManager.NavigateTo("/checkout");
}

<style>
{% endhighlight %}

{% highlight css tabtitle="Cart.razor.css" %}

.e-card {
border: 0px;
box-shadow: none;
Expand Down Expand Up @@ -1290,7 +1299,6 @@ Displays selected items and allows users to update quantities or remove items.

.summary-list::-webkit-scrollbar { width: 8px; }
.summary-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }
</style>

{% endhighlight %}
{% endtabs %}
Expand Down Expand Up @@ -1685,7 +1693,15 @@ else
</div>
}

<style>
@code {
private void NavigateToCatalog() => NavigationManager.NavigateTo("/catalog");

private void NavigateToPopular() => NavigationManager.NavigateTo("/catalog");
}

{% endhighlight %}
{% highlight css tabtitle="Whishlist.razor.css" %}

.e-card.empty-wishlist-card {
border: 0px;
box-shadow: none;
Expand All @@ -1694,13 +1710,6 @@ else
.empty-wishlist-card { max-width:700px; width:100%; border-radius:12px; }
.wishlist-icon { font-size:48px; width:84px; height:84px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#fff6fb; color:#d6336c; margin:auto; }
@@media (max-width:576px){ .empty-wishlist-card{ padding:1rem } .wishlist-icon{ width:64px;height:64px;font-size:36px }}
</style>

@code {
private void NavigateToCatalog() => NavigationManager.NavigateTo("/catalog");

private void NavigateToPopular() => NavigationManager.NavigateTo("/catalog");
}

{% endhighlight %}
{% endtabs %}
Expand Down