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

Here i will give you an overview on, how i implemented a FoodKart Shopping App. You can also refer to my complete project via GitHub.

If you find it difficult to follow, please go through my previous set of tutorials on Ionic Development:

Ionic HTML5 Basic concepts

How to design HTML5 app using Ionic Cordova : Part 2

How to build HTLM5 app using Ionic Cordova: Part 3

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

UPDATE (10-07-16):

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

fk-latest

UPDATE (21-02-16) :-

FoodKart V0.2 is now available on GitHub .

Also read this article on code modification and features.

Make sure to follow me on github to get the latest updates.

NUTSHELL :-

  1. share global variable using Services.
  2. Use sessionStorage to store the product details.
  3. Creating ionic popup using $ionicPopup
  4. To hide an html element if the user is logged in
  5. Radio button usage
  6. To submit the list of check values we use
  7. Function declaration:

Donwload

LEVEL 3  [ Advanced ] :-

  INDEX PAGE 

1 .  index.html [The container]

  MENU PAGE 

menu

1 . Template file for MENU

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

 

2. Cart is a variable that is used by both Menu page and Cart page. We need to share this variable.Here i have used services to pass cart data between these pages.

Controller Section for Menu

  js\controllers.js [ menuCtrl ]

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.

 

Shared Services used for Globalizing variables.

popup

 $ionicPopup is used to show ionic popups

js\services.js [ Services ]

 

  CART PAGE 

1. templates\cart.html [ Cart Page ]

Cart

2 .    js\controllers.js [ cartCtrl ]

  PRODUCT PAGE 

product page

1. templates\productPage.html [ PRODUCT DETAILS PAGE]

$scope variables get data from the productPageCtrl .

 

2 . I haven’t added much functionalities in this page. The readers can add there respective features & functionalities.

  js\controllers.js [ productPageCtrl ]

 

  FILTER PAGE 

filter

1. templates\filterBy.html  [ FILTER BY PAGE]

2 .   js\controllers.js [ filterByCtrl ]

 

  SORT BY PAGE 

sort by

1.  templates\sortBy.html  [ SORT BY PAGE]

 

2 .    js\controllers.js [ sortByCtrl ]

 

  CHECK OUT PAGE 

check out

1.  templates\checkOut.html  [ CHECK OUT PAGE]

2 .   js\controllers.js [ checkOutCtrl]

If the user is logged in, the users details will be automatically filled.

 

This almost concludes the part for Shopping Cart.

Read my next article for setting up Login and Registration.

Also Read my article on JS Files in Ionic.

Comments, Suggestions and Bug Fixes are most welcomed.

 

UPDATE: ( 31-07-2016)

Here is a video demo of setting up Ionic Cart!