Ionic Shopping Cart App (FoodKart V0.2)

This is a follow up of the tutorial series on How to build HTML5 Shopping Cart app using Ionic Cordova. If you don’t follow this article, make sure that you have read all the previous article in this series.


UPDATE (10-07-16):

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


What’s New:

  1. Added Image Slider to show the featured product (ie food items)
  2. Added lazy load feature for product listing (ie it loads products list only when you scroll down )
  3. Cart Bug fixed (Earlier the cart values would decrement to -ve )
  4. Added more products in the menu list

Bugs to be Fixed:

  1. The lazy load list is based on state change listener. So it load more products every time you change the page (ie if you go to cart page and then come back to menu page, it would add 3 products to the product list )

Feature to be Added:

  1. Easy login/registration with phone number verification
  2. Back-end to handle orders
  3. Dynamically get the featured listing
  4. Push notification service to show the order status.

Potential Usage:

  1. In food courts you could host a local WiFi, with its default page as FoodKart. Then when the user need to order a product, he could easily connect to the WiFi and place the order.

That’s about it ! Now lets see the modified code.

1. Image Slider

image slidder

Added the code in menu.html (this loads the elements from the slide_items array)

In the menuCtrl create the array for the featured listing. Here i have hard codded the array. You can dynamically obtain this array from the server.

2. Lazy Load

lazy load

Add ion-infinite scroll to the end of menu list in menu.html

Now in the controller, ie menuCtrl, we check if there are more list items yet to be loaded. If yes, we load them 5 at a time, in successive calls.

controller.js –> menuCtrl

In the sharedFilterService, where we get the request URL, we add a new parameter till . till=10 means that we have to load the list till 10 items.

So in the service.js –> sharedFilterService   make the following changes.

Now we need to modify the PHP, to accept the new parameter.


3. Fix to Cart Bug


There was bug in the sharedCartServices decrement() function.


4. More Menu items



Respective menu image can be downloaded from github.

If you find this worthy. Please subscribe to my blog and follow me on GitHub.

UPDATE: ( 31-07-2016)

Here is a video demo of setting up Ionic Cart!