Visual Studio Community 2015: Adding Ecommerce Functionality

This article was sponsored by Microsoft. Thank you for supporting the sponsors who make SitePoint possible.

Welcome back to our series of articles using Microsoft’s modern IDE: Visual Studio Community 2015 to quickly design and build an attractive, functional site for a client. If you missed the previous instalments, check them out below:

• Visual Studio Community 2015: Setting Up a Site
• Visual Studio Community 2015: Adding Email and Contact Pages

In this article, we’re going to add an ecommerce solution to our site. The solution will be simple, consisting of a single page to handle the shopping cart, payment information and success or fail messages for the user.

We’ll submit our payment information to a mock ASP.NET Web API app. The Web API app will act like a credit card processor. It will consume JSON via POST. It will then send back an HTTP status code indicating success or failure. Based on this feedback, we can determine what to do. But we’ll keep it simple by showing the user a message based on the received status code.

While the solution is simple, it will demonstrate core components of any ecommerce solution. These include:

• Listing of products to buy
• Ability to add or remove products
• Total price of products and purchase
• Form to capture payment information
• Connection to some third party credit card processor
• Ability to display result from credit card processor
• Upon success, deliver purchased product

The checkout page will be styled in Bootstrap and use some AngularJS to help with a little dynamic display of the product totals. The final result will look like the following:

Creating the Checkout Page

To create the checkout page, we’ll need to add a view and a few model classes.

Open the Views folder then Home. Right click the Home folder and select to add a new item. Select MVC View Page. Name the file Checkout.cshtml.

We’re going to once again style our page using Bootstrap, which we’ve already added a reference for. The following code will make up our checkout page:

[code language="html"]

Shopping Cart

Lesson 1

Beginner Lessons

97.00 x

---

Lesson 2

Intermediate Lessons

97.00 x

---

NAME

CARD NUMBER

EXPIRATION

CV CODE

---

Total ${{lesson1_1000 * 97 + lesson2_1010 * 97}}

[/code]

This code already has AngularJS added to it. Before we discuss the AngularJS code, let’s talk a little about the form layout and functionality.

To keep things simple, our entire checkout takes place on one form. This is accomplished by displaying available lessons on the same page. The user can increment the quantity of lessons. This will also total up the price near the Checkout button. If the user wants to remove an item, they simply set the quantity back to zero.

AngularJS Functionality

AngularJS is used to update the total price and display an error or success message. To add AngularJS to the project, open the bower.json file and add the AngularJS reference, as shown on the last line below:

[code language="js"] "jquery-validation": "1.11.1", "jquery-validation-unobtrusive": "3.2.2", "hammer.js": "2.0.4", "bootstrap-touch-carousel": "0.8.0", "angularjs": "*" [/code]

With AngularJS, we can total prices because the product quantity is captured dynamically, as shown below

[code language="js"] [/code]

ng-model binds the input text field value to lesson1_1000. We then calculate a total using:

[code language="js"]

Total ${{lesson1_1000 * 97 + lesson2_1010 * 97}}

[/code]

We take the quantity of a product and multiple it by the price of that product. To ensure we don’t get something like “NaN” in place of the total price, we need to initialize our AngularJS variables. That’s where the controller.js file comes in.

To add the controller file, open the wwwroot folder, and add a “js” folder. Then right click it and add controller.js:

We define our AngularJS controller in this file as follows:

[code language="js"] angular.module('myapp', []).controller('ctrl', ['$scope', function ($scope) { function init() { $scope.lesson1_1000 = 0; $scope.lesson2_1010 = 0; } init(); }] ); [/code]

All we’re doing is initializing our product variables to zero. Then we call the init() function to execute the code.

We do need to add the “myapp” and “ctrl” references on the client side. Open _Layout.cshtml and modify the body tag as follows:

[code language="js"] [/code]

Now open Checkout.cshtml and modify the “container” div as follows:

[code language="js"]

[/code]

This ensure our product variables are within the correct scope. While we’re here, drag the controller.js file into the head section of _Layout.cshtml. This will create a reference to the controller file, as shown below:

[code language="js"] [/code]

You probably noticed the following code at the bottom of our Checkout.cshtml:

[code language="html"]

Thank you for your purchase.
You can download your product here.

Sorry. Your card was declined. Please contact your bank or use another card.

[/code]

ng-hide will hide the related div when the expression within it is true. In this case, we’re only sending back a value of true or false. This value is accessed via Razor syntax. The model that we send back with the view contains the above two properties. Their values are set depending on the response of our transaction processing.

Continue reading %Visual Studio Community 2015: Adding Ecommerce Functionality%

by Brett Romero via SitePoint