Displaying Total Price, Total Qty, and Grand Price Total in shopping cart.

Displaying shopping cart details.

This article will explain how to create a simple shopping cart using ASP.NET Core, Angular 2, Web API and EF with Template Pack.

In this shopping cart demo application, we have 3 parts.

Display all items and filter items in HTML Table using Angular 2 from Web API.

Display the selected items in details before adding to shopping cart.

Add the selected item to shopping cart. Show Price, Quantity, and Grand Total of all items in shopping cart.

Display All Items and Filter Items

First, we display all item details in the shopping page using Angular 2. All the item details will be loaded from Web API. User can also filter the items by "Item Name". When users enter any character in the "Item Name" Filter textbox, the related item details will be loaded dynamically from the database to the shopping page.

Display the Selected Items in details

When user clicks on "Image name", we display the item details at the top, to add the selected item to shopping cart. When user clicks on the “Add to cart” button, the selected item will be added to the shopping cart.

Shopping Cart Details

Before adding to cart, we need to check if the item is already added to the cart. If the item is already added to the cart, then we will increase the quantity in Shopping Cart. If the item is not added, then newly selected items will be added to Shopping Cart.

In the Shopping Cart, we also display the number of items that have been added. We can also calculate the Total Quantity, Total Price, and Grand Price of total items, which will be displayed at the end of Shopping Item details.

Prerequisites

Make sure you have installed all the prerequisites on your computer. If not, then download and install all of them, one by one.

First, download and install Visual Studio 2015 with Update 3 from this link.

If you have Visual Studio 2015 and have not yet updated with update 3, download and install the Visual Studio 2015 Update 3 from this link.

First create a folder called “Images” inside the "Shopping" folder. I have used this folder to display all shopping cart images. If you store shopping image in some other path in your code, change accordingly.

Step 5 Creating our First Component TypeScript

Right click on Shopping folder and click on add new Item. Select client-side from left side and select TypeScript file and name the file as “shopping.component.ts” and click "Add".

In students.component.ts file, we have three parts -

import part

component part

class for writing our business logic.

First, import Angular files to be used in our component; here, we import HTTP for using HTTP client in our Angular 2 component.

In component, we have selector and template. Selector is to give a name for this app and in our HTML file, we can use this selector name to display in our HTML page.

In template.give your output html file name. Here, we will create one HTML file as “students.component.html”.

Export Class is the main class where we perform all our business logic and variable declaration to be used in our component template. In this class, we get the API method result and bind the result to the student array.

Here, in the code part, I have commented each section for easy understanding.

We can add our newly created Student details menu in existing menu. To add our new Navigation menu, open the “navmenu.component.html” under navmenu menu.Write the below code to add our navigation menu link for students. Here, we have removed the existing Count and Fetch menu.

<li [routerLinkActive]="['link-active']">

<a [routerLink]="['/shopping]">

<span class='glyphicon glyphicon-th-list'></span> Shopping

</a>

</li>

Step 8 App Module

App Module is root for all files and we can find the app.module.ts under ClientApp\ app.

UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.

RouterModule.forRoot([

{ path: '', redirectTo: 'home', pathMatch: 'full' },

{ path: 'home', component: HomeComponent },

{ path: 'counter', component: CounterComponent },

{ path: 'fetch-data', component: FetchDataComponent },

{ path: 'shopping', component: shoppingComponent },

{ path: '**', redirectTo: 'home' }

])

]

})

export class AppModule {

}

Step 9 Build and run the application

Build and run the application and you can see that our Students Master/Detail page will be loaded with all Student Master and Detail information.

Note

First, create the Database and Table in your SQL Server. You can run the SQL Script from this article to create ShoppingDB database and ItemDetails Table. Also, don’t forget to change the connection string from “appsettings.json”.