Ecommerce App In IOS Using Swift HeaderImage

Real life example: Create an ecommerce app in iOS using Swift

Got a lot of requests recently asking how to create an ecommerce app in iOS and thought I create a tutorial explaining the basics of it, and what you should focus on when making such an iOS app.

What is an ecommerce app?

Let’s start with what is actually an ecommerce app. These apps allow your users to view your products that you are offering through your app (e.g.: clothes, car parts) and purchase them without getting redirected to Safari to finish the procedure.

What we need?

To get started we will use our latest iOS app template as a base project for this app, since it already includes all the features that we need to make a great ecommerce app. It allows you to view different categories, and various products inside those categories, view their details, check the reviews. So it seems everything is in place to get started.

Ecommerce app iOS Swift

Things we need to add:

  • Cart UIViewController
    • to be able to display all the items our users wish to purchase
  • A manager object to add and remove products from the Cart
  • some changes in UI at the product detail screen

All of our iOS app templates are now 50% off till 1. January 2016. You can get a complete iOS app for 99$. Click here to learn more.

Let’s get started

First we’ll start with the CartManager object, that will be a singleton, to make it easier to add, remove a product from everywhere inside the app.

Let’s create an object, and name it CartManager, it will be a subclass of NSObject and a singleton object.

CartManager object creation ecommerce app

And will have the following methods:

Singleton initialisation

This will allow us to have only one instance of this object, thus manage the products easier that are already inside the cart.

Add a product to the Cart

Remove a product from the Cart

Remove all products from the Cart

Number of products in the Cart

Total price of the products in the Cart

And one convenience function to get a Product at a given indexPath

And of course, as you might noticed, there is an object called: productsArray which is an array of productObjects.

That is all we need for our CartManager object to be able to display and manage our products.

Creating the UI for the ecommerce app

Than let’s focus on the UI part of this project. Let’s create a new UIViewController and name it CartViewController.

This will contain a button for allowing the users to start the checkout process and a UITableView to display all the items that are in the Cart already. Plus a Clear button that allows to clear the content of our Cart.

Once we have our viewController we’ll add some functions to make it work and display our products that we want to purchase.

Let’s create a tableView outlet and implement the UITableView’s datasource protocol.

CartViewController creation Xcode ecommerce app

Let’s also implement the tableView methods, let’s start first with the datasource’s methods:

Implement this method to tell our tableView how many cells it needs to display. Call the CartManager’s numberOfItemsInCart function to get the right number of Products already in our Cart.

There is no UITableView without this method, that tells our tableView which tableViewCell to display. Note that I’m using a productPriceFormatter object, which is a simple NSNumberFormatter.

Product price formatter:

hnk_setImageFromURL is a method of a great library for handling image download and caching. Learn more about it here.

Interface Builder ecommerce app in iOS using Swift

We’ll allow manual slide to delete actions, so implement this function as well.

Of course if we implement the canEditRow function, we also need to handle that action. Thus we need the following method as well. This function checks if the selected editingStyle is the Delete, if so, than calls the CartManager to delete the Product at the given indexPath, if that was successful, than remove the corresponding cell from the UITableView. And check if the Cart is empty, if so, display an empty view.

Delete product from cart ecommerce app

There is only one function to implement which is the checkEmptyStateOfCart(). This will check the number of items inside the CartManager’s array, if that number is equal to 0, the viewController will display an empty view showing your users that the Cart is empty.

We are not done yet. Since I said, we are adding another button on the navigationBar to be able to clear the content of our Cart at a press of a button, we need to add a new function called: clearAllButtonPressed. This function will display an alertController to ask the user to confirm this action.

Clear all products from cart ecommerce app

The clearCart function will clear the content of the CartManager, reload the tableView and display the emptyView.

There is also an additional check that needs to be implemented to be fully awesome. Because there is a scenario when your user already opened the CartViewController and went back to the products, checked out some, and added some to the Cart. Since we only check the content at viewDidLoad(), the content of the Cart will not be updated for the second visit. One solution is to remove the function from viewDidLoad and move it to viewWillAppear().
This way, our Cart will always be up to date when your user opens the CartViewController.

Cart ecommerce app ios swift

That’s all folks. Hope I made it super easy for you to get started and create your own ecommerce app. It’s not that hard as it may seem.

Here is the complete source code of the CartViewController:

  • http://bit.ly/thiYI4 durul dalkanat

    Hello, I completed this project. But CartManager class there is no details under the source code. I have completed coding .But I could not fix func totalPriceInCart() .

    Here is all my code

    //

    // CartManager.swift

    // MyStore

    //

    // Created by durul dalkanat on 1/3/16.

    // Copyright © 2016 Zappdesigntemplates. All rights reserved.

    //

    import Foundation

    class CartManager: NSObject {

    var productsArray = [ProductObject]()

    var product:Float = 0.0

    //This will allow us to have only one instance of this object, this manage the products easier that are already inside the cart.

    class var sharedInstance: CartManager {

    struct Static {

    static var onceToken: dispatch_once_t = 0

    static var instance: CartManager? = nil

    }

    dispatch_once(&Static.onceToken) {

    Static.instance = CartManager()

    }

    return Static.instance!

    }

    func addProduct(product: ProductObject) {

    productsArray.append(product)

    }

    func removeProduct(product: ProductObject) -> Bool {

    if let index = productsArray.indexOf(product) {

    productsArray.removeAtIndex(index)

    return true

    }

    return false

    }

    func clearCart() {

    productsArray.removeAll(keepCapacity: false)

    }

    func numberOfItemsInCart() -> Int {

    return productsArray.count

    }

    func totalPriceInCart() -> Float {

    var totalPrice: Float = 0

    for product in productsArray {

    totalPrice += product.totalPrice()

    }

    return totalPrice

    }

    func productAtIndexPath(indexPath: NSIndexPath) -> ProductObject {

    return productsArray[indexPath.row]

    }

    }

    • http://apptemp.wpengine.com ZappDev

      What do you mean no details?

      Keep in mind that totalPriceInCart() function uses the Product object’s totalPrice() function, which should return the price of the Product. But you could just simply return the price property there and sum it. I used it this way, because you might have items that are on sale, and then you wish to sum up the current prices.

  • http://bit.ly/thiYI4 durul dalkanat

    ok. I expand my question. First this article doesn’t have sample project. There is only gist. Where is The CartManager Class file ? Because I couldn’t compare my source files. And There is an error line:55 in CartManager class. Maybe you can fix that. Because I have completed CartManager class by this article. I thing There is some lack.

    • http://apptemp.wpengine.com ZappDev

      Updated the tutorial, now it includes the CartManager class as well. 🙂

      Well it doesn’t include sample project because it is based on one of our templates. http://apptemp.wpengine.com/product/store-ios-app-swift-template/

      • http://bit.ly/thiYI4 durul dalkanat

        First . Thank you. I found my mistake 🙂 Second 🙂 My project worked. 🙂 Because I had have this template. 🙂 One more things. 🙂 where is the icon. 🙂

        • http://apptemp.wpengine.com ZappDev

          You’re welcome. What icon?

          • http://bit.ly/thiYI4 durul dalkanat

            Tabbar’s cart icons ( basket ) 🙂

  • ryan aschermann

    @szabDev:disqus Would this checkout cart work if i already have a menu app filled with many different restaurants?

  • rina

    can anybody tell me what is [projectObject]?
    can anybody upload the complete the project?