How to build HTML5 Shopping Cart app using Ionic Cordova : Part 4

This article will discuss on, how to  Implement a shopping cart app using html5 cordova.Here i will give you the basic overview on, how i implemented  product listing in my FoodKart App. Later in the Part 5 of this series, i will show, how the entire application was implemented.

If you find it difficult to follow, please go through my previous articles:

Ionic HTML5 Basic concepts

How to design HTML5 app using Ionic Cordova : Part 2

How to build HTLM5 app using Ionic Cordova: Part 3

UPDATE (10-07-16):

Latest FoodKart V0.3 is released. Read the complete tutorial here.

fk-latest

NUTSHELL :-

  1. Variable names in java script can be used in HTML as {{ variable_name }}
  2. Populating a List is done is using ng-repeat
  3. ActionListener for HTML entities using ng-click
  4. Controllers is the place where you write action events.

Donwload

LEVEL 1  [ Basic] :-

  1. The main part of building the Ionic Cordova App comes in modifying, the files in WWW directory.
    www directory files

2.

  • JS contains the  Java script files i.e. the file responsible for actions.
  • Templates contains the html5 pages i.e. different screens of your App.
  • index.html :  is the main container used to display your pages.It will also contain elements that are shared throughout the app.
    For eg :- Navigation Bar, js files etc.
  • img is the place where you put the images associated with the app.
  • css is the place where you put the custom style files for your app.
  • lib is the place containing ionic library files.

3. We call the js variable in HTML using  {{ variable_name }}

4. To populate an list ionic :

5. To call an action listener in Ionic:  [ applicable to all HTML entity ]

 

LEVEL 2  [ Intermediate: will be focusing on offline concepts ] :-

  1. Adding icon for Cart, Profile, Home in Navigation Bar.  [ shown as Section 1 in the image below ]

You can find the reference samples: http://ionicframework.com/docs/components/

1

  index.html [The container] 

 

2. Creating the menu page. [ Section 2 in the image ]

We have already created a basic list layout from How to design HTML5 app using Ionic Cordova : Part 2

We just need to add cart icon on every list item, and some basic formatting

  templates\menu.html [Menu page i.e. Main page] 

 

3. To implement listing of items from the server, we are basically parsing JSON response.

  js\controllers.js [ ActionListener  ] 

Note:

$scope.$on(‘$stateChangeSuccess’, function () { . . . } is used to detect if the page url has changed.

It can also be used to detect if the controller page is active or not.

 

4. Now you might be thinking “How menuCtrl is linked with the menu page? ”

It is linked in the following file www\js\routes.js

 

5. In the server side we use PHP to output JSON response for listing the products.

 

6. This is the MYSQL Table for Products

7. Sample JSON Response.

UPDATE: ( 31-07-2016)

Here is a video demo of setting up Ionic Cart!