AngularJS Responsive
Video Mobile Shopping Cart

by Bill SerGio

Introduction

There are a lot of people who are not computer or Internet savy but who need a simple shopping cart that doesn't require a database or a programmer to install it. I recall a customer calling me up once for tech support for one of my software programs and telling me "Your software doesn't work!" I asked what was the problem and he stated that he was stepping on the "foot pedal" and nothing was happening. It turned out that he had put the mouse on the floor and thought you had to pump it with your foot. Needles to say it was a challenge to help him.

In this article I will show you how to write an eas-to-install AngularJS Responsive Shopping Cart with Video that includes practical features like an option to display a product image or a video of each item, importing products from a separate JSON text file instead of hard-coding product data in the code itself, Google analytics, additional merchant gateway options, responsiveness so it looks good on mobile devices, a folder layout that would allows simply dropping it onto the root level of any existing website, cool-looking naigation like a boostrap menu, etc.


Shopping Cart Features

Here are some of the practical features I included:

  • Must be responsive so it will display and scroll perfectly on any mobile device.
  • Must have a cool-looking, gradient-colored responsive Bootstrap Menu
  • Allow Multiple Stores in our cart.
  • Must read the products and their descriptions from a JSON text file.
  • Must be able to play a Video (TV Commercial) about a product in addition to a picture of the product.
  • Must at least include merchant gateways for PayPal, Google Wallet, and Stripe.
  • Must be extensible so that adding new features like payment methods is easy.
  • Must allow FREE products that can't be added to the cart.
  • Must handle Google Analytics using AngularJS.
  • Must include a Dialog Popup using AngularJS to display additional information or a video.
  • Must be able to include links to thrird-party websites like Google Play, etc.
  • Must have a directory structure that allows it to be "dropped" at the root level onto any existing website.
  • Must display text as HTML so it attracts the potential customer visually.
  • Place icons INSIDE buttons for better UI/UX
  • Must follow MVVM architecture.
  • Must include Pagination to control number of products displayed per page

AngularJS App Structure

The sample application starts with the definition of an AngularJS module that represents the application. The module AngularStore module is defined in the app.js file passes in two dependcies, namely ['ui.bootstrap', 'favicon'].  I decide to use "ui.bootstrap" in a minimal way as a dependency to "AngularStore" for the menu and part of the UI look I wanted. And I added favicon to help to add images from websites to the menu. In addition, I also added jQuery to simply demonstrate how to integrate it with an AngularJS application. The “shoppingCart” class contains all the logic and provides the object model needed to create fully responsive and attractive views.

'use strict';
// App Module: the name AngularStore matches the ng-app attribute in the main tag
// the route provides parses the URL and injects the appropriate partial page
var storeApp = angular.module('AngularStore', ['ui.bootstrap', 'favicon'])
  .config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/store', {
        templateUrl: '/ac_partials/store.htm',
        controller: storeController 
    }).
    when('/ac_products/:productSku', {
        templateUrl: '/ac_partials/product.htm',
        controller: storeController
    }).
    when('/cart', {
        templateUrl: '/ac_partials/cart.htm',
        controller: storeController
    }).
    otherwise({
    redirectTo: '/store'
    });
}]);

The first thing you will notice is that I prefaced each of our AmgularJS folders with "ac_" so that when we drop the cart into an existing website on a shared server at the root level. Some shared hosting accounts do not allow creating a separate virtual directory so the cart can now be added at the root level and our cart files and folders will not conflict with existing folders or files.

We have a routeProvider that specifies which view should be displayed based on the URL. For example, when the URL ends with “/cart”, the app should load the view defined in the "ac_partials/cart.htm” file. And we will bind all of our views to a controller “storeController,” a class that contains a “store” and a “cart”.  

The easiest way to share data between controllers in AngularJS is by defining an app-level “service” to initialize the controllers that need them. We will create a data service that provides a store and a shopping cart that will be shared by all views instead of creating fresh ones for each view to improve performance by eliminating the need to re-load the store and cart items each time a new view is displayed.  We want our “DataService” to retrieve our sotre products data from a JSON text file. Here is the definition of the “DataService” that provides data shared by all views in the Angular Store application.

Our DataService will load data from a json file asynchronously so we will need to use promise and deferred. A promise in Angular.js act as an placeholder from where a javascript object returns some result as data which is done in an asynchronous way and it does not guarantee any fixed response time. This deferred object is constructed with $q.defer(). This Api is used to notify the success or unsuccesful completion of the asynchronous work, which is within the context of Deferred Api. After completing the task in deferred object, we can have access to the result in promise object.


Our Angular Views: Store, Product, and Cart

Our responsive Angular Store App has three main views:

Store View: This is the first view that is loaded when the app runs showing the products available. Users can search for items using a filter, and obtain detailed information about specific products by watching the product's TV commercial (i.e., video) if the product has one, or by clicking the product name. Users can also add products to the shopping cart if they have a price or obtain a free sample of a product if a product has a zero cost.  Users can also view a summary of what is in their cart by clicking the summary which navigates to the cart. Shown below are what the responsive store view looks like on both a laptop and on a mobile device.

Product View: This view shows more details about a product and also allows users to add or remove the product in/from the shopping cart and shows how many of the product are added to the cart. You can display a video of the product or an image. If an image of the product is displayed then clicking on the image will popup a dialog showing a larger view of the image. You can see below what the Product View looks like with an image displayed.

Cart View: This view shows the shopping cart. Users can edit the cart and checkout using PayPal, Google Wallet, and stripe. Check my website in the next week and I will also add a Bit Coin Payment option as well. Offering more payment options increases sales by