Developing an E-Commerce App with Cart and Product Details

Course: iOS App Development

Topic: Developing an E-Commerce App with Cart and Product Details

Course Link: iOS App Development Course

Demo Link: Register for a Free Course Demo

Website: JustAcademy

1. Introduction to E-Commerce App Development

An e-commerce application allows users to browse products, view detailed product information, add products to a shopping cart, update quantities, and review their order before checkout. Developing an e-commerce app for iOS involves combining user interface design, data management, navigation, application state, and API integration.

In this practical topic, we will understand how to build the essential shopping experience using Swift and SwiftUI. The application will contain a product listing screen, product detail screen, shopping cart, quantity controls, and a dynamic price summary.

Key Features of an E-Commerce App

• Display products with images, names, prices, and ratings.
• Allow users to open individual product detail pages.
• Show product descriptions, specifications, and availability.
• Add products to the shopping cart.
• Increase or decrease product quantities.
• Calculate subtotal, discounts, delivery charges, and total amount.
• Remove unwanted products from the cart.
• Preserve cart information while navigating between screens.

2. Understanding the E-Commerce Application Architecture

A well-organized e-commerce application separates the user interface, data models, business logic, and data services. This separation makes the application easier to maintain, test, and extend.

Main Application Components

Typical E-Commerce User Flow

1. The user opens the shopping application.
2. The application displays available products.
3. The user selects a product.
4. The product detail screen displays its information.
5. The user selects a quantity and taps Add to Cart.
6. The cart updates with the selected product.
7. The user reviews the cart and total price.
8. The user proceeds to checkout.

3. Creating the E-Commerce Project in Xcode

Before implementing the shopping functionality, create a new iOS project in Xcode.

Project Setup Steps

1. Open Xcode on your Mac.
2. Select File and choose New Project.
3. Select the iOS App template.
4. Enter a project name such as ShopEase.
5. Select Swift as the programming language.
6. Choose SwiftUI as the interface option.
7. Configure the organization identifier and bundle identifier.
8. Select a suitable deployment target.
9. Create the project and organize the source files.

Suggested Project Structure

ShopEase/
│
├── Models/
│   ├── Product.swift
│   └── CartItem.swift
│
├── Views/
│   ├── ProductListView.swift
│   ├── ProductDetailView.swift
│   ├── CartView.swift
│   └── ProductCardView.swift
│
├── ViewModels/
│   └── CartManager.swift
│
├── Services/
│   └── ProductService.swift
│
├── Resources/
│   └── Assets.xcassets
│
└── ShopEaseApp.swift

This structure separates product data, shopping cart operations, reusable interface components, and network-related functionality.

4. Creating the Product Data Model

A product model represents an individual item available in the online store. It defines the properties that the application needs to display and manage each product.

Important Product Properties

• ID: A unique identifier for each product.
• Name: The product's display name.
• Description: Detailed information about the product.
• Price: The current selling price.
• Image: The product image or image URL.
• Category: The product classification.
• Rating: The product's customer rating.
• Stock: The available quantity.

Example: Product Model in Swift

import Foundation

struct Product: Identifiable, Codable {
    let id: Int
    let name: String
    let description: String
    let price: Double
    let imageURL: String
    let category: String
    let rating: Double
    let stock: Int
}

The Identifiable protocol allows SwiftUI to identify products uniquely in lists and grids. The Codable protocol supports encoding and decoding product data when communicating with APIs.

5. Preparing Sample Product Data

During initial development, sample product data helps build and test the interface before connecting a real backend.

Example Product Data

let sampleProducts = [
    Product(
        id: 1,
        name: "Wireless Headphones",
        description: "Comfortable wireless headphones with clear sound.",
        price: 2499,
        imageURL: "headphones",
        category: "Electronics",
        rating: 4.5,
        stock: 15
    ),
    Product(
        id: 2,
        name: "Smart Watch",
        description: "A smart watch with fitness and notification features.",
        price: 3999,
        imageURL: "smartwatch",
        category: "Wearables",
        rating: 4.3,
        stock: 10
    ),
    Product(
        id: 3,
        name: "Travel Backpack",
        description: "A durable backpack suitable for everyday travel.",
        price: 1499,
        imageURL: "backpack",
        category: "Accessories",
        rating: 4.2,
        stock: 20
    )
]

In this example, image values represent asset names for a local prototype. A production application can use image URLs supplied by the backend.

6. Designing the Product Listing Screen

The product listing screen is the main shopping screen. It allows users to discover products and navigate to their individual detail pages.

Important UI Elements

• Application title and shopping cart icon.
• Search bar for finding products.
• Category filters.
• Product images and names.
• Product prices and ratings.
• Buttons or navigation links for viewing details.

Creating a Product Card

import SwiftUI

struct ProductCardView: View {
    let product: Product

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Image(product.imageURL)
                .resizable()
                .scaledToFit()
                .frame(height: 130)
                .frame(maxWidth: .infinity)
                .background(Color.gray.opacity(0.1))
                .clipShape(RoundedRectangle(cornerRadius: 12))

            Text(product.name)
                .font(.headline)
                .lineLimit(2)

            Text("₹\(product.price, specifier: "%.2f")")
                .font(.subheadline)
                .fontWeight(.bold)

            Label(
                "\(product.rating, specifier: "%.1f")",
                systemImage: "star.fill"
            )
            .font(.caption)
            .foregroundStyle(.orange)
        }
        .padding()
        .background(Color.white)
        .clipShape(RoundedRectangle(cornerRadius: 14))
        .shadow(radius: 2)
    }
}

This reusable component presents the product image, name, price, and rating. Reusable product cards maintain consistent styling throughout the application.

Building the Product Listing View

import SwiftUI

struct ProductListView: View {
    let products: [Product]

    private let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 16) {
                    ForEach(products) { product in
                        NavigationLink {
                            ProductDetailView(product: product)
                        } label: {
                            ProductCardView(product: product)
                        }
                        .buttonStyle(.plain)
                    }
                }
                .padding()
            }
            .navigationTitle("ShopEase")
        }
    }
}

LazyVGrid displays products in a two-column layout and creates grid content as needed. NavigationLink allows users to open the selected product's detail screen.

7. Developing the Product Detail Screen

The product detail screen provides complete information about a selected item. Customers use this screen to understand the product before adding it to their cart.

Information to Display

• Large product image.
• Product name and category.
• Price and rating.
• Full product description.
• Availability and stock information.
• Quantity selector.
• Add to Cart button.

Product Detail View Implementation

import SwiftUI

struct ProductDetailView: View {
    let product: Product

    @EnvironmentObject var cartManager: CartManager
    @State private var quantity = 1

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Image(product.imageURL)
                    .resizable()
                    .scaledToFit()
                    .frame(maxWidth: .infinity)
                    .frame(height: 260)
                    .background(Color.gray.opacity(0.1))

                Text(product.name)
                    .font(.title)
                    .fontWeight(.bold)

                Text(product.category)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)

                Text("₹\(product.price, specifier: "%.2f")")
                    .font(.title2)
                    .fontWeight(.bold)

                Text(product.description)
                    .font(.body)

                Text("Available Stock: \(product.stock)")
                    .font(.subheadline)

                Stepper(
                    "Quantity: \(quantity)",
                    value: $quantity,
                    in: 1...max(1, product.stock)
                )
                .disabled(product.stock == 0)

                Button {
                    cartManager.addProduct(
                        product,
                        quantity: quantity
                    )
                } label: {
                    Text("Add to Cart")
                        .fontWeight(.bold)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue)
                        .foregroundStyle(.white)
                        .clipShape(RoundedRectangle(cornerRadius: 12))
                }
                .disabled(product.stock == 0)
            }
            .padding()
        }
        .navigationTitle("Product Details")
        .navigationBarTitleDisplayMode(.inline)
    }
}

The @State property stores the selected quantity. The Stepper provides quantity controls, while the Add to Cart button sends the selected product and quantity to the cart manager.

8. Understanding Shopping Cart Functionality

The shopping cart temporarily stores products selected by the customer. It must support adding products, updating quantities, removing items, and calculating the order value.

Core Cart Operations

9. Creating the Cart Item Model

A cart item connects a product with the quantity selected by the customer. The same product should normally appear as one cart entry with an updated quantity instead of creating duplicate entries.

Cart Item Model

import Foundation

struct CartItem: Identifiable {
    let product: Product
    var quantity: Int

    var id: Int {
        product.id
    }

    var totalPrice: Double {
        product.price * Double(quantity)
    }
}

The computed property totalPrice calculates the total value of a particular cart item.

10. Implementing Cart Management with Observable State

The cart manager handles all cart-related operations. It maintains the selected products and publishes changes so that SwiftUI views can refresh automatically.

Cart Manager Implementation

import SwiftUI

@MainActor
final class CartManager: ObservableObject {
    @Published private(set) var items: [CartItem] = []

    func addProduct(_ product: Product, quantity: Int = 1) {
        guard quantity > 0,
              product.stock > 0,
              quantity <= product.stock else {
            return
        }

        if let index = items.firstIndex(
            where: { $0.product.id == product.id }
        ) {
            let newQuantity = items[index].quantity + quantity

            guard newQuantity <= product.stock else {
                return
            }

            items[index].quantity = newQuantity
        } else {
            items.append(
                CartItem(product: product, quantity: quantity)
            )
        }
    }

    func updateQuantity(
        for product: Product,
        quantity: Int
    ) {
        guard let index = items.firstIndex(
            where: { $0.product.id == product.id }
        ) else {
            return
        }

        guard quantity > 0 else {
            removeProduct(product)
            return
        }

        guard quantity <= product.stock else {
            return
        }

        items[index].quantity = quantity
    }

    func removeProduct(_ product: Product) {
        items.removeAll {
            $0.product.id == product.id
        }
    }

    func clearCart() {
        items.removeAll()
    }

    var totalItems: Int {
        items.reduce(0) { $0 + $1.quantity }
    }

    var subtotal: Double {
        items.reduce(0) { $0 + $1.totalPrice }
    }
}

Understanding the Implementation

• @MainActor ensures UI-related cart state changes happen on the main actor.
• ObservableObject allows SwiftUI views to observe cart changes.
• @Published notifies observing views when cart items change.
• addProduct() inserts a product or increases its existing quantity.
• updateQuantity() changes the quantity while checking stock limits.
• removeProduct() deletes a selected product.
• subtotal calculates the combined value of all cart items.

11. Connecting Cart Manager to the Application

The cart manager should be shared across the product list, product detail, and cart screens. This ensures that all screens display the same shopping cart information.

Application Entry Point

import SwiftUI

@main
struct ShopEaseApp: App {
    @StateObject private var cartManager = CartManager()

    var body: some Scene {
        WindowGroup {
            ProductListView(products: sampleProducts)
                .environmentObject(cartManager)
        }
    }
}

@StateObject creates and maintains the cart manager's lifecycle at the application level. environmentObject() makes it available to child views.

12. Designing the Shopping Cart Screen

The cart screen displays all products selected by the user. It should provide clear product information, quantity controls, removal actions, and an order summary.

Cart Screen Implementation

import SwiftUI

struct CartView: View {
    @EnvironmentObject var cartManager: CartManager

    var body: some View {
        NavigationStack {
            Group {
                if cartManager.items.isEmpty {
                    ContentUnavailableView(
                        "Your Cart Is Empty",
                        systemImage: "cart",
                        description: Text(
                            "Add products to start shopping."
                        )
                    )
                } else {
                    List {
                        ForEach(cartManager.items) { item in
                            VStack(alignment: .leading, spacing: 8) {
                                Text(item.product.name)
                                    .font(.headline)

                                Text(
                                    "₹\(item.product.price, specifier: "%.2f")"
                                )

                                Stepper(
                                    "Quantity: \(item.quantity)",
                                    value: Binding(
                                        get: { item.quantity },
                                        set: {
                                            cartManager.updateQuantity(
                                                for: item.product,
                                                quantity: $0
                                            )
                                        }
                                    ),
                                    in: 0...item.product.stock
                                )

                                Text(
                                    "Item Total: ₹\(item.totalPrice, specifier: "%.2f")"
                                )
                                .fontWeight(.semibold)

                                Button(role: .destructive) {
                                    cartManager.removeProduct(item.product)
                                } label: {
                                    Label(
                                        "Remove",
                                        systemImage: "trash"
                                    )
                                }
                            }
                            .padding(.vertical, 8)
                        }

                        Section("Order Summary") {
                            HStack {
                                Text("Subtotal")
                                Spacer()
                                Text(
                                    "₹\(cartManager.subtotal, specifier: "%.2f")"
                                )
                            }

                            HStack {
                                Text("Total Items")
                                Spacer()
                                Text("\(cartManager.totalItems)")
                            }

                            Button("Proceed to Checkout") {
                                // Navigate to checkout flow.
                            }
                            .disabled(cartManager.items.isEmpty)
                        }
                    }
                }
            }
            .navigationTitle("My Cart")
        }
    }
}

This implementation displays an empty-cart message when no products have been selected. When items exist, it displays their details and allows users to update quantities or remove products.

13. Calculating Cart Subtotal and Final Amount

An e-commerce application must calculate prices accurately. The subtotal is the combined value of all selected products. Additional charges and discounts can be applied to calculate the final payable amount.

Common Price Components

Example Price Calculation

let subtotal = 5000.0
let discount = 500.0
let deliveryFee = 100.0
let tax = 225.0

let finalTotal = subtotal - discount + deliveryFee + tax

print("Final Amount: ₹\(finalTotal)")

For production applications, tax, discount eligibility, shipping charges, and final prices should be calculated or verified by the trusted backend. The client-side calculation is useful for displaying an estimate, but should not be the authority for payment.

14. Adding Product Search and Category Filters

Product search helps customers locate items quickly. Category filters allow customers to narrow the product list based on product type.

Search Implementation

import SwiftUI

struct SearchableProductListView: View {
    let products: [Product]

    @State private var searchText = ""
    @State private var selectedCategory = "All"

    private var filteredProducts: [Product] {
        products.filter { product in
            let matchesSearch =
                searchText.isEmpty ||
                product.name.localizedCaseInsensitiveContains(searchText)

            let matchesCategory =
                selectedCategory == "All" ||
                product.category == selectedCategory

            return matchesSearch && matchesCategory
        }
    }

    var body: some View {
        List(filteredProducts) { product in
            Text(product.name)
        }
        .searchable(
            text: $searchText,
            prompt: "Search products"
        )
    }
}

This example demonstrates case-insensitive product searching. Category filtering can be added using a segmented control, menu, or horizontal category list.

15. Integrating Product APIs

In a real shopping application, product information is usually retrieved from a backend API instead of being permanently stored in the application source code.

Typical API Responsibilities

• Fetch the available product catalogue.
• Retrieve product details using a product ID.
• Load product categories.
• Check current stock availability.
• Retrieve product images and pricing information.
• Refresh product data when the user revisits the screen.

Example API Service

import Foundation

struct ProductService {
    func fetchProducts(from url: URL) async throws -> [Product] {
        let (data, response) = try await URLSession.shared.data(
            from: url
        )

        guard let httpResponse = response as? HTTPURLResponse,
              (200...299).contains(httpResponse.statusCode) else {
            throw URLError(.badServerResponse)
        }

        return try JSONDecoder().decode(
            [Product].self,
            from: data
        )
    }
}

This service uses URLSession and Swift concurrency to retrieve product data asynchronously. The actual API endpoint and JSON response structure must match the backend implementation. Production code should also handle loading states, empty responses, network errors, authentication, and pagination.

16. Loading Product Images from Remote URLs

Product images are important in shopping applications because customers rely on visual information when selecting products. Remote images can be displayed using SwiftUI's AsyncImage.

Example AsyncImage Usage

AsyncImage(url: URL(string: product.imageURL)) { phase in
    switch phase {
    case .empty:
        ProgressView()

    case .success(let image):
        image
            .resizable()
            .scaledToFit()

    case .failure:
        Image(systemName: "photo")
            .resizable()
            .scaledToFit()

    @unknown default:
        EmptyView()
    }
}
.frame(height: 220)

For production applications, consider image caching, resizing, placeholders, and optimized image delivery to reduce network usage and improve scrolling performance.

17. Managing Cart Persistence

Cart persistence allows users to retain selected products when they close and reopen the application. Without persistence, cart information stored only in memory may disappear when the app terminates.

Possible Storage Options

For a production shopping application, cart information may be stored on the server so that users can access their cart across multiple devices. If using local storage, avoid persisting sensitive payment information.

18. Adding Checkout Navigation

After reviewing the cart, the user can proceed to checkout. The checkout flow generally collects delivery information, provides a payment method, and displays the final order summary.

Typical Checkout Steps

1. Validate that the cart contains products.
2. Verify current product prices and stock with the backend.
3. Collect or select a delivery address.
4. Display shipping charges and applicable taxes.
5. Allow the user to select an available payment method.
6. Submit the order securely to the backend.
7. Display the order confirmation after successful processing.

Payment processing should use a trusted payment gateway or provider SDK. Never store raw card numbers, CVV values, or payment credentials in ordinary app storage or application logs.

19. Improving User Experience

A good e-commerce application should be simple to navigate, responsive, accessible, and informative. Users should receive clear feedback whenever they add or remove products.

Recommended UX Improvements

• Display a cart item count near the shopping cart icon.
• Show confirmation feedback after adding a product.
• Display clear stock availability messages.
• Use readable product descriptions and prices.
• Provide loading indicators while fetching products.
• Show helpful error messages when a request fails.
• Support Dynamic Type and VoiceOver accessibility.
• Maintain consistent spacing, colors, and typography.
• Make important actions easy to reach on smaller screens.
• Provide clear empty-cart and unavailable-product states.

20. Handling Errors and Edge Cases

E-commerce applications must handle unexpected situations to prevent incorrect cart information and confusing user experiences.

21. Testing the E-Commerce Application

Testing verifies that product browsing, product details, cart operations, and price calculations work correctly.

Functional Testing Checklist

• Verify that all sample products appear correctly.
• Open each product detail screen.
• Confirm product names, images, descriptions, and prices.
• Add a product to the cart.
• Add the same product again and verify quantity updates.
• Add multiple different products.
• Increase and decrease quantities.
• Verify stock restrictions.
• Remove a product from the cart.
• Clear the complete cart.
• Verify subtotal and total calculations.
• Test empty-cart and network-error states.
• Verify cart information after application relaunch if persistence is implemented.

Example Unit Test for Cart Calculation

import XCTest
@testable import ShopEase

final class CartManagerTests: XCTestCase {

    func testCartSubtotal() {
        let cart = CartManager()

        let product = Product(
            id: 1,
            name: "Headphones",
            description: "Wireless headphones",
            price: 1000,
            imageURL: "headphones",
            category: "Electronics",
            rating: 4.5,
            stock: 10
        )

        cart.addProduct(product, quantity: 2)

        XCTAssertEqual(cart.subtotal, 2000)
        XCTAssertEqual(cart.totalItems, 2)
    }
}

This test checks whether adding two units of a product correctly updates the cart subtotal and total item count.

22. Common Development Problems and Solutions

23. Best Practices for E-Commerce App Development

• Use reusable SwiftUI components for product cards and cart rows.
• Keep product models separate from presentation code.
• Centralize cart operations in a dedicated manager or view model.
• Use unique product identifiers to prevent duplicate entries.
• Validate stock and quantity before updating the cart.
• Use asynchronous networking for API operations.
• Handle API errors and loading states clearly.
• Keep payment processing outside the cart's basic presentation logic.
• Verify prices, discounts, and inventory on the server before order placement.
• Write unit tests for cart calculations and quantity updates.
• Use secure transport and protect user and payment information.
• Consider accessibility and different iPhone screen sizes.

24. Practical Project: Build a Shopping Application

Create a functional iOS shopping application called ShopEase. The project should demonstrate the complete product browsing and cart management workflow.

Project Requirements

1. Create a product catalogue with at least ten sample products.
2. Display products in a two-column grid.
3. Include product images, names, prices, and ratings.
4. Implement a product detail screen.
5. Add a quantity selector with stock validation.
6. Implement Add to Cart functionality.
7. Display the cart item count.
8. Build a cart screen with quantity controls.
9. Allow customers to remove products.
10. Calculate the subtotal and final order amount.
11. Add product search and category filters.
12. Implement empty-cart and error states.
13. Connect a product API or use local sample data.
14. Test the complete shopping workflow on an iOS simulator.

Expected Project Outcome

At the end of this project, learners should have a working iOS shopping application that demonstrates SwiftUI navigation, product modelling, reusable views, observable state management, cart operations, API integration concepts, and price calculations.

25. Practice Exercises

1. Create a product model with at least eight properties.
2. Build a product grid using LazyVGrid.
3. Create a reusable product card component.
4. Display product descriptions and specifications.
5. Implement an Add to Cart button.
6. Prevent customers from adding more products than available stock.
7. Implement cart quantity updates.
8. Add a remove-product action.
9. Calculate subtotal and delivery charges.
10. Implement product search and category filtering.
11. Display a cart badge showing the total number of selected units.
12. Write unit tests for cart calculations.

26. Interview Questions and Answers

Q1. What is an e-commerce application?

An e-commerce application is a software application that allows customers to browse products, view product details, add items to a cart, and purchase products through an online shopping process.

Q2. What is the purpose of a Product Model?

A Product Model represents product information such as its unique ID, name, description, price, image, category, and stock availability.

Q3. What is the purpose of a shopping cart?

A shopping cart stores products selected by the customer and allows them to review quantities and prices before checkout.

Q4. Why should a cart use unique product IDs?

Unique IDs help identify existing products, update their quantities, prevent duplicate entries, and perform accurate cart operations.

Q5. What is the role of ObservableObject in SwiftUI?

ObservableObject allows a reference-type object to publish changes that observing SwiftUI views can respond to.

Q6. What is the difference between @StateObject and @EnvironmentObject?

@StateObject creates and manages an observable object's lifecycle in a view. @EnvironmentObject accesses an observable object that has been provided by an ancestor view.

Q7. Why is LazyVGrid useful for product listings?

LazyVGrid arranges content in a grid and creates child views as they are needed, making it useful for product catalogues.

Q8. How can product data be loaded from an API?

Product data can be retrieved using URLSession, decoded using JSONDecoder, and displayed through SwiftUI views.

Q9. How do you calculate a cart subtotal?

Multiply each product's price by its selected quantity and add all item totals together.

Q10. Why is cart persistence important?

Cart persistence helps users retain selected products when the application is closed or reopened. It can also support synchronization across devices when managed by a backend.

Q11. How should an application handle out-of-stock products?

The application should disable the purchase action, show an availability message, and verify stock again with the backend before checkout.

Q12. Why should payment information be handled securely?

Payment information is sensitive. Applications should use trusted payment providers, secure communication, and appropriate data-protection practices rather than storing raw card details.

27. Quick Revision Checklist

• Understand the architecture of an iOS e-commerce application.
• Create product and cart item models using Swift.
• Build product listing screens using SwiftUI.
• Navigate to individual product detail screens.
• Implement product quantity selection.
• Manage cart state using an observable object.
• Add, update, and remove cart products.
• Calculate subtotal and order totals.
• Integrate product APIs using URLSession.
• Load remote images using AsyncImage.
• Understand cart persistence options.
• Test shopping and cart workflows.
• Apply secure checkout and payment practices.

28. Conclusion

Developing an e-commerce app with cart and product details is an important practical exercise in iOS application development. It combines Swift programming, SwiftUI interface design, navigation, data modelling, state management, API communication, and business logic.

By completing this topic, learners gain practical experience in creating product catalogues, displaying detailed product information, managing shopping cart operations, calculating order values, and preparing an application for a checkout workflow. These concepts provide a strong foundation for developing larger shopping, retail, and marketplace applications for iOS.

Course Resources

Explore the complete iOS App Development course at JustAcademy iOS App Development Training.

Register for a course demonstration through JustAcademy Course Demo Registration.

Visit the JustAcademy Official Website to explore additional training programs.