× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

AngularJS: Creating a Shopping Cart Application

In this article we will explain how to build a shopping cart application using AngularJS and its main resources.

A shopping cart is similar to original grocery shopping cart; it means that on a website that sells products or services online, the shopping cart is a common metaphor that acts as online store’s catalog and ordering process. It is a graphical representation of a supermarket on a vendor’s website that keeps a list of items a customer has picked up from the online store.

Shopping cart is an infrastructure that allows customers to review what they have selected, make necessary modifications such as adding or deleting products and purchase the merchandise. Customer checks off the products that are being ordered and when finished ordering, that proceeds to a page where the total order is confirmed and placed. Also, customers will enter their shipping tax information at the checkout. Shopping cart allows a website to build a catalog of products and integrate it into the website pages.

Shopping cart is important infrastructure to have smooth ecommerce transition. The shopping cart describes specialized content management system that includes,

  • website wizards
  • provides portal for catalog, order and customer management
  • renders product data, product categories
  • merchant tools
  • shopping features
  • payment options
  • shipping and tax information
  • passes transactional data to payment gateway
  • statistics and security

An AngularJS application starts with the modules that defines the application and makes your application more readable and specifies how an application should be bootstrapped.

First let's see the below listed AngularJS infrastructure to be used to build the shopping cart:

  • Storing items in the cart,
  • Parse the different URL’s routing method,
  • Data service that provides store and shopping cart,
  • Llading and saving items from and to the local storage,
  • Check out the parameters using payment provider (PayPal) and controller classes.

Storing Items In The Cart

The below code shows app.js file as follows:

'use strict';
var MyApp = angular.module('MyStore', []).
  config(['$routeProvider', function($routeProvider) {
      when('/store', {
        templateUrl: 'shopping_cart/store.htm',
        controller: MyController
      when('/rings/:productSku', {
        templateUrl: 'shopping_cart/product.htm',
        controller: MyController
      when('/cart', {
        templateUrl: 'shopping_cart/shoppingCart.htm',
        controller: MyController
        redirectTo: '/store'

// we have created a store and shopping cart using data service
MyApp.factory("MyService", function () {
    var myStore = new store(); // it creates a store
     var myCart = new shoppingCart("MyStore");  // it creates a shopping cart

    // enable PayPal checkout with parameter that identifies the merchant
    myCart.addCheckoutParameters("PayPal", "abc@gmail.com");

    // return data object with store and cart
    return {
        store: StoreCart, 
        cart: myCart
  • MyApp defines the application with angular module MyStore which matches the ng-app attribute in the main tag.
  • We have defined “/cart” which displays the views defined shopping_cart/shoppingCart.htm' file when it ends with “/cart”.
  • Similarly we have defined “/cart” which display the views defined shopping_cart/product.htm' file when it ends with “/rings/:productSku”. You will notice that there is same controller is used for all the views which are referring to the same store and cart. By using this, there is no need to load the store and cart items whenever a new view is displayed.
  • Moving forward, we are creating a data service that provides store and shopping cart that will be shared by all views. After creating the cart, service uses PayPal for checking out the items purchased by the customers. Please Note: abc@gmail.com needs to be replaced by the merchant paypal email id.

We can enable PayPal checkout by using following line:

myCart.addCheckoutParameters(“PayPal”, “abc@gmail.com");  

It contains second parameter called merchant which can be used to identify the merchant in order to use the shopping cart with PayPal.

Parses The Different Url’s using Routing Method

After creating the service, we need to create a controller that drives all the views in the application. The below code shows controller.js file:

Listing 1: controller.js

function MyController($scope, $routeParams, MyService) {

    // below both lines get store and cart from service “MyService”
    $scope.store = MyService.store;
    $scope.cart = MyService.cart;
    if ($routeParams.productSku != null) {
        $scope.product = $scope.store.getProduct($routeParams.productSku);

The above code has a controller called “MyController” used to augment the angular scope. It is used to set up the initial state of the $scope object. We can get store and cart by using service called “MyService”. If you need details of the selected product, then use looping technique as shown in the code.

Data Service That Provides Store And Shopping Cart

Next we have store.js file as shown below:

Listing 2: store.js

function store() {
    this.rings = [
        new product("rings1", "Halo", "Classic-C905R7", 25),
        new product("rings2", "Gemstone", "Classic-C904P5", 30),
        new product("rings3", "Pave", "Classic-939R7", 18),
        new product("rings4", "Cathedral", "Classic-938R7", 32),
        new product("rings5", "Vintage", "OClassic-918CU7", 24),
        new product("rings6", "Channel-Set", "Classic-924R7", 11),
        new product("rings7", "Swirl", "Classic-917R7", 16),
        new product("rings8", "Bezel", "Classic-916R7", 20),
        new product("rings9", "Prong", "Classic-916R6", 10),
        new product("rings10", "Emerald", "Classic-912RD7", 26),
        new product("rings11", "Pear", "Classic-911RD7", 8),
        new product("rings13", "Cushion", "Classic-916RD6", 5),
        new product("rings14", "Princess", "Classic-910R7", 19)

store.prototype.getProduct = function (sku) {
    for (var i = 0; i < this.rings.length; i++) {
        if (this.rings[i].sku == sku)
            return this.rings[i];
    return null;

The above file contains list of the all products which can be retrieved by using sku. It contains all the products in the array of rings with name of the item and description. The individual item can be retrieved by using sku which uses controller “MyController” to set the current item when routing specifiec productsku.

We can see in the for loop a function in which a product is retrieved using sku and value is set to zero initially. When user selects an item, it compares with the item present in the list. If it matches, then returns the selected ring item or else returns null value.

Loading And Saving Items From And To The Local Storage

Next we have, shoppingcart.js file which will be explained part by part as shown below:

First we will have look on shopping cart code:

Listing 3: shoppingcart.js

function shoppingCart(cartName) {
    this.cartName = cartName;
    this.clearCart = false;
    this.checkoutParameters = {};
    this.items = [];
    var self = this;
    $(window).unload(function () {
        if (self.clearCart) {
        self.clearCart = false;
  • Constructor shoppingCart(cartname) has parameter cartName which identifies the cart when loading items from the local storage or when saving items to the local storage.
  • The code uses unload function when saving items to local storage. It uses variable called self to clear the cart with clearItems() function and saves the items using saveItems() function.

The below code shows how to load items from the local storage and how to save the items to local storage:

shoppingCart.prototype.loadItems = function () {
    var items = localStorage != null ? localStorage[this.cartName + "_items"] : null;
    if (items != null && JSON != null) {
        try {
            var items = JSON.parse(items);
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (item.sku != null && item.name != null && item.price != null && item.quantity != null) {
                    item = new cartItem(item.sku, item.name, item.price, item.quantity);
        catch (err) {
            // catches the errors while loading 
shoppingCart.prototype.saveItems = function () {
    if (localStorage != null && JSON != null) {
        localStorage[this.cartName + "_items"] = JSON.stringify(this.items);
  • The first part of the above code shows loading items from the store list.
  • If items are not equal to null, then JSON parses the items and stores in the items. If item name, price and quantity are not equal to null value then it adds item to the cart.

Check Out The Parameters Using Payment Provider (PayPal) controller classes

The below code shows how to get total price for the all items in the cart:

shoppingCart.prototype.getTotalPrice = function (sku) {
    var total = 0;
    for (var i = 0; i < this.items.length; i++) {
        var item = this.items[i];
        if (sku == null || item.sku == sku) {
            total += this.toNumber(item.quantity * item.price);
    return total;
_// get the total price for all items currently in the cart
shoppingCart.prototype.getTotalCount = function (sku) {
    var count = 0;
    for (var i = 0; i < this.items.length; i++) {
        var item = this.items[i];
        if (sku == null || item.sku == sku) {
            count += this.toNumber(item.quantity);
    return count;
  • The code includes method called getTotalPrice () to get total price for the all items. Initially the value of variable total is set 0. If it contains sku, it returns price of the items by using item.quantity * item.price with that sku.
  • We have one more method getTotalCount() which defines quantity of items in the cart. Initially the value of variable count is set 0. If it contains sku, it returns quantity of the items by using item.quantity with that sku.

You can clear the items in the cart by using the code as below:

shoppingCart.prototype.clearItems = function () {
    this.items = [];
After selecting the item, you need to check out the transaction to the specified payment provider. We will see how to define checkout parameters as shown below:
shoppingCart.prototype.addCheckoutParameters = function (serviceName, merchantID, options) {

    if (serviceName != "PayPal") {
        throw "Name of the service must be 'PayPal'.";
    if (merchantID == null) {
        throw " Need merchantID in order to checkout.";

    this.checkoutParameters[serviceName] = new checkoutParameters(serviceName, merchantID, options);
shoppingCart.prototype.checkout = function (serviceName, clearCart) {
    if (serviceName == null) {
        var p = this.checkoutParameters[Object.keys(this.checkoutParameters)[0]];
        serviceName = p.serviceName;
    if (serviceName == null) {
        throw "Use the 'addCheckoutParameters' method to define at least one checkout service.";
    var parms = this.checkoutParameters[serviceName];
    if (parms == null) {
        throw "Cannot get checkout parameters for '" + serviceName + "'.";
    switch (parms.serviceName) {
        case "PayPal":
            this.checkoutPayPal(parms, clearCart);
            throw "Unknown checkout service: " + parms.serviceName;

As shown in the code, to add checkout parameters we need to have service name and merchantID. We have below method to check out the parameters.

addCheckoutParameters (serviceName, merchantID, options)

It includes three parameters namely serviceName, merchantID and options. The serviceName parameter will be used as payment provider such as “PayPal” and merchantID is needed in order to check out the transaction. The options parameter specifies additional provider fields.

We can check the parameters as follows:

If service name is not equal to “PayPal” or if you use any other services, then it throws the message saying “service name must be PayPal” and if merchantID is not specified, it throws the message “ merchantID required in order to checkout”. In the code we can see this action stated.

Invoke the service using switch statement as shown in the code. If it finds service name as PayPal, it checkout all the parameters, makes a valid payment service and clears the cart. Otherwise, it sets the default value “Unknown checkout service”.

We can check out the parameters using PayPal as shown below:

shoppingCart.prototype.checkoutPayPal = function (parms, clearCart) {
        var data = {
        cmd: "_cart",
        business: parms.merchantID,
        upload: "1",
        rm: "2",
        charset: "utf-8"
    for (var i = 0; i < this.items.length; i++) {
        var item = this.items[i];
        var ctr = i + 1;
        data["item_number_" + ctr] = item.sku;
        data["item_name_" + ctr] = item.name;
        data["quantity_" + ctr] = item.quantity;
        data["amount_" + ctr] = item.price.toFixed(2);
    var form = $('<form/></form>');
    form.attr("action", "https://www.paypal.com/cgi-bin/webscr");
    form.attr("method", "POST");
    form.attr("style", "display:none;");
    this.addFormFields(form, data);
    this.addFormFields(form, parms.options);

    // submit the form to PayPal servers
    this.clearCart = clearCart == null || clearCart;

In the code,

  • The first part contains required variables for PayPal to use. It contains global data to check out using PayPal such as cmd as command input, business is an email address on your PayPal account etc.
  • The next looping function is used to store item data in your cart by using item_number, item_name, quantity and price variables.
  • Next, you can build the form with its hidden variables that contain cart data. The form tag includes two required attributes, action and method. The form handler is specified in the form’s action attribute. The method attribute specifies HTTP POST method used if the form is updating data or includes sensitive information such as password etc.
  • POST method provides better security because the submitted data is not visible in the page address.

One more important thing, do not change these values. These attributes are required for all payment buttons and the cart command. Once the form is submitted, user is taken to the PayPal site where user can review the item information, credit card information and makes sure about the transaction.

Next, payment provider uses the information given by the customer with the merchantID provided by the form which gives notification of transaction to customer for collecting the amount and ships the products to the customer.

The utility methods can be defined as follows:

shoppingCart.prototype.addFormFields = function (form, data) {
    if (data != null) {
        $.each(data, function (name, value) {
            if (value != null) {
                var input = $("<input></input>").attr("type", "hidden").attr("name", name).val(value);
shoppingCart.prototype.toNumber = function (value) {
    value = value * 1;
    return isNaN(value) ? 0 : value;

After building a form, add the data by using addFormFields function as shown in the code. It populates with hidden input fields that contains cart data and submits form to the PayPal servers. The isNaN() function determines whether a value is NaN or not i.e. it returns true if the value is an illegal number and false if not.

After entering into PayPal site, checkout the parameters by using below code:

function checkoutParameters(serviceName, merchantID, options) {
    this.serviceName = serviceName;
    this.merchantID = merchantID;
    this.options = options;
function cartItem(sku, name, price, quantity) {
    this.sku = sku;
    this.name = name;
    this.price = price * 1;
    this.quantity = quantity * 1;

As we discussed earlier, checkoutParameters() function takes three parameters,

  • serviceName,
  • merchantID and
  • options.

We will display the current service name, merchantID and options using this keyword. The cartItem() function takes four parameters namely sku, name, price, quantity. The sku is the product ID for the item and it displays the name, price and quantity of the item as shown in the code.

Building the full application

To build this application we need the following files which are explained in the previous sections:

  • app.js
  • product.js
  • store.js
  • shoppingCart.js
  • controller.js
  • style.css

AngularJS views

Now, we will see how AngularJS views are used to interact with above defined files. We will be having the following views which are clean and straight forward and links to other pages.

  • index.htm
  • product.htm
  • shoppingCart.htm
  • store.htm

And finally, we will have style.css for describing the look and formatting of the document written in markup language.

The first view is index.htm which is implemented as shown below:

Listing 4: index.htm

<!doctype html>
<html ng-app="MyStore">
    <title>Shopping Cart with AngularJS</title>

    <!--CDN for jQuery and Angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js" type="text/javascript"></script>

    <!—CDN for Bootstrap -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css"/>

    <!—contains AngularStore app -->
    <script src="js/product.js" type="text/javascript"></script>
    <script src="js/store.js" type="text/javascript"></script>
    <script src="js/shoppingCart.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/controller.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <div class="container-fluid">
        <div class="row-fluid">
                <h1 class="well" >
                    <a href="index.htm">
                        <img class='imagem_artigo' src="img/shopping-cart-logo.jpg" height="100" width="100" alt="logo"/>
                   Shubh Jewels
                <div ng-view></div>

The code includes

  • CDN for jQuery, Angular and Bootstrap and all these CDN’s should be written within the tag.
  • The ng-app directive defines an AngularJS application which is set with value “MyStore” and all the controller functions added to the “MyStore” module. It is responsible for URL routing, view injection and provides controllers for each view.
  • The ng-view is the directive that angular uses as container to switch between views. It allows to setup config function and access the $routeProvider. The name “MyStore” matches the ng-app attribute in the main tag. In this application, ng-view shows the app logo and a title.

The next view is store.htm which is implemented as shown below:

Listing 5: store.htm

<p class="My-Text">
    Welcome to the Shubh Jewels...<br />
    Now is the time to find the perfect engagement ring and choose your unique design today!!!
<table class="table table-hover table-bordered">
    <tr class="well">
    <th class="my_item3">Item</th>
    <th class="my_item1">Description</th>
    <th class="my_item"><b>Closeout</b></th>
       	 <td class="MyRight" colspan="4" >
		<p class="text">Buy Here</p>
<tr ng-repeat="product in store.rings | orderBy:'name' | filter:search" >
        <td class="MyCenter"><img class='imagem_artigo' ng-src="img/rings/{{product.sku}}.jpg" alt="{{product.name}}" /></td>
        <td class="MyCenter">
            <a href="#/rings/{{product.sku}}"><b>{{product.name}}</b></a><br />
        <td class="MyRight">
            {{product.price | currency}}
        <td class="MyCenter">
            <a href="" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">
                add to cart
    <tr class="well">
        <td class="MyRight2" colspan="4">
            <a href="index.htm#/cart" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
                <i class="icon-shopping-cart" />
                <b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>

The next view is product.htm

Listing 6: product.htm

<p class="text-info">
    <img class='imagem_artigo' ng-src="img/rings/{{product.sku}}.jpg" alt="{{product.name}}"/>
    {{product.name}}: {{product.description}}<br />
<ul class="Ring_Descr">
	<li>Milgrain, pave floral or embossed designs</li>
	<li>Sentimental touches</li>
	<li>Strong use of embellishment</li>
	<li>The wearer would love a wedding in a romantic setting like a castle or a garden full of flowers</li>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
	<table class="table table-bordered">
                <tr class="well">
                    <td class="MyRight1" colspan="3" >
                        <a href="index.htm#/cart" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
                            <i class="icon-shopping-cart" />
                            <b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
                            <span ng-show="cart.getTotalCount(product.sku) > 0"><br />This product is in the cart</span>
<div class="span4">
                class="btn btn-block btn-success"
                ng-click="cart.addItem(product.sku, product.name, product.price, 1)">
                <i class="icon-shopping-cart icon-white" /> Add to cart
                class="btn btn-block btn-danger"
                ng-click="cart.addItem(product.sku, product.name, product.price, -10000)"
                ng-disabled="cart.getTotalCount(product.sku) < 1">
                <i class="icon-trash icon-white" /> Remove from cart
                class="btn btn-block"
                <i class="icon-chevron-left" /> Back to store

In the first part of the code, the ng-src directive displays the selected product with an image and displays the name and details of the product. As discussed in the previous section, it also contains one region within a table which uses getTotalCount() and getTotalPrice() methods to retrieve the information. When the user adds the selected item to the cart, both of these methods display the total number of items and the total price for the items. The ng-show directive shows HTML element based on the value of ng-show. It will be having three buttons for adding items to the cart, remove from the cart, and back to store. When we click on add to cart button, the item will be added to the cart by using addItem() method and similarly when we click on remove from cart button, the item will be removed from the cart. The last button uses window.location.href property returns the URL of the current page.

The last view part is shoppingCart.htm is implemented as follows:

Listing 7: shoppingCart.htm

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <table class="table table-condensed">
                <tr class="well">
                    <td class="MyCenter"><b>Quantity</b></td>
                    <td class="MyRight"><b>Price</b></td>
                    <td />

                <!-- empty cart message -->
                <tr ng-hide="cart.getTotalCount() > 0" >
                    <td class="MyCenter" colspan="4">
                        Your cart is empty.
                <tr ng-repeat="item in cart.items | orderBy:'name'">
                    <td class="MyCenter">
                      <div class="input-append">

                            class="span3 text-center" type="tel"
                            ng-change="cart.saveItems()" />
                            class="btn btn-success" type="button"
                            ng-disabled="item.quantity >= 1000"
                            ng-click="cart.addItem(item.sku, item.name, item.price, +1)">+</button>
                            class="btn btn-inverse" type="button"
                            ng-disabled="item.quantity <= 1"
                            ng-click="cart.addItem(item.sku, item.name, item.price, -1)">-</button>
                    <td class="MyRight">{{item.price * item.quantity | currency}}</td>
                    <td class="myCenter" title="remove from cart">
                       <a href="" ng-click="cart.addItem(item.sku, item.name, item.price, -10000000)" >
                            <i class="icon-remove" />
                <tr class="well">
                    <td class="MyCenter"><b>{{cart.getTotalCount()}}</b></td>
                    <td class="MyRight"><b>{{cart.getTotalPrice() | currency}}</b></td>
                    <td />
<div class="span4">
            <p class=" My-Text">
                    class="btn btn-block"
                    <i class="icon-chevron-left" /> Back to store
                    class="btn btn-block btn-danger"
                    ng-disabled="cart.getTotalCount() < 1" >
                    <i class="icon-trash icon-white" /> Clear cart
            <br />
<p class=" My-Text">
                    class="btn btn-block btn-link"
                    ng-disabled="cart.getTotalCount() < 1" >
                    <img class='imagem_artigo' src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="checkout PayPal"/>

The above code displays the selected items with name, quantity and price in the tabular format. Suppose if you clear the cart, then it displays the message “your cart is empty”. The ng-repeat directive loops through the items and for each item the table shows name, quantity and price. The item’s quantity property includes two buttons for increment and decrement the quantity. The ng-change directive is used to save the cart when the quantity changes. The footer of the table shows summary of the cart which includes total number of items, total price and is automatically updated whenever customer edit or removes items from the cart.

In the last part of program, first button “back to store” navigates back to the index.htm page and next button clear the items by invoking the clearItems() method. The last button is used to checkout by using the PayPal payment provider.


Place these files under the root directory of your server. Open the application in your browser, and we will see the screen shots of the shopping cart application as shown below:

_ Screenshot of Home Page.

Figure 1. Screenshot of Home Page.

_ Screenshot of Product Details Page.

Figure 2. Screenshot of Product Details Page.

_ Screenshot of Shopping Cart Page.

Figure 3. Screenshot of Shopping Cart Page.

_ Screenshot of PayPal Purchase Page.

Figure 4. Screenshot of PayPal Purchase Page.


This article has given you the idea about how to build a shopping cart application with AngularJS. AngularJS is a really powerful framework that can provide a better performance and productivity when developing JavaScript web-based applications The AngularJS supports features which includes data binding, templates, module, views, and directives and so on. The application shows how views interact with other pages, how to edit the items in the cart, summary of the cart. Source code of the entire application is attached with this article. Hope you liked the article.

I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login