Creating a Custom Swipe-to-Delete Action for a Cart Page UI with SwiftUI

To create a Stylish Shopping Cart UI Screens Using SwiftUI

In this tutorial, we will be building a custom cart page UI in SwiftUI, complete with swipe to delete functionality. We will use SwiftUI's powerful swipe gesture recognizer to create a sleek and intuitive user experience for removing items from the cart. By the end of the tutorial, you will have a solid understanding of how to use swipe gesture recognizers in SwiftUI to create interactive and engaging UI elements. You will also be able to apply the knowledge gained to other projects that require similar functionality.

Step 1: 

We need to create data class / struct 

Structs are complex data types, meaning that they are made up of multiple values. You then create an instance of the struct and fill in its values, then you can pass it around as a single value in your code. 

import SwiftUI

struct Item: Identifiable {
    var id = UUID().uuidString
    var name : String
    var details: String
    var image: String
    var price: Float
    var quantity: Int
    var offset: CGFloat
    var isSwiped: Bool
}

Step 2: 

The class needs to conform to the ObservableObject protocol from the Combine framework

This property publish any changes to its data, so that this change is updated in the view.

import SwiftUI

class CartViewModel: ObservableObject {
    @Published var items = [
        Item(name: "Tek Product 1", details: "Gift", image: "tek1", price: 10.00, quantity: 1, offset: 0, isSwiped: false),
        Item(name: "Tek Product 2", details: "Gift", image: "tek2", price: 90.99, quantity: 2, offset: 0, isSwiped: false),
        Item(name: "Tek Product 3", details: "Gift", image: "tek3", price: 100.00, quantity: 1, offset: 0, isSwiped: false),
        Item(name: "Tek Product 4", details: "Royal", image: "tek4", price: 50.00, quantity: 1, offset: 0, isSwiped: false),
        Item(name: "Tek Product 5", details: "Royal", image: "tek5", price: 100.00, quantity: 1, offset: 0, isSwiped: false)
    ]
}

Step 3:

To use custom font in our project : update info.plist file

Step 4:

This is our cart page, we divide 3 parts like header, body (LazyVStack) & bottom view.

import SwiftUI

struct CartView: View {
    @StateObject var cartData = CartViewModel()
    var body: some View {
        VStack {
            HStack(spacing: 20) {
                Button(action: {}) {
                    Image(systemName: "chevron.left")
                        .font(.system(size: 26, weight: .heavy))
                        .foregroundColor(.black)
                }
                
                Text("My cart")
                    //.font(.title2)
                    .fontWeight(.heavy)
                    .font(.custom("Jost-Bold", size: 28))
                
        
                Spacer()
            }
            .padding()
            
            ScrollView(.vertical, showsIndicators: false) {
                LazyVStack(spacing: 0) {
                    ForEach(cartData.items){ item in
                        // ItemView
                        ItemView(item: $cartData.items[getIndex(item: item)], items: $cartData.items)
                    }
                }
            }
            
            // Bottom View
            VStack {
                HStack {
                    Text("Total")
                        .fontWeight(.heavy)
                        .font(.custom("Jost-Bold", size: 28))
                        .foregroundColor(.gray)
                    
                    Spacer()
                    
                    // Calculating Total Price
                    Text(calculateTotalPrice())
                       // .font(.title)
                        .fontWeight(.heavy)
                        .font(.custom("Jost-Bold", size: 28))
                        .foregroundColor(.black)
                }
                .padding([.top, .horizontal])
                
                Button(action: {}) {
                    Text("Check out")
                        //.font(.title2)
                        .fontWeight(.heavy)
                        .font(.custom("Jost-Bold", size: 28))
                        .foregroundColor(.white)
                        .padding(.vertical)
                        .frame(width: UIScreen.main.bounds.width - 30)
                        .background(
                            LinearGradient(gradient: .init(colors: [Color("lightblue"), Color("blue")]), startPoint: .leading, endPoint: .trailing)
                        )
                        .cornerRadius(15)
                }
            }
        }
        .background(Color("gray").ignoresSafeArea())
    }
    
    func getIndex(item: Item) -> Int {
        return cartData.items.firstIndex { (item1) -> Bool in
            return item.id == item1.id
        } ?? 0
    }
    
    func calculateTotalPrice() -> String {
        var price: Float = 0
        
        cartData.items.forEach { (item) in
            price += Float(item.quantity) * item.price
        }
        
        return getPrice(value: price)
    }
}

Step 5:

Here is my item UI design 

import SwiftUI

struct ItemView: View {
    // For realtime updates
    @Binding var item: Item
    @Binding var items: [Item]
    var body: some View {
        ZStack {
            LinearGradient(gradient: .init(colors: [Color("lightblue"), Color("blue")]), startPoint: .leading, endPoint: .trailing)
            
            // Delete Button
            
            HStack {
                Spacer()
                
                Button(action: {
                    withAnimation(.easeIn){deleteItem()}
                }) {
                    Image(systemName: "trash")
                        .font(.title)
                        .foregroundColor(.white)
                        .frame(width: 90, height: 50)
                }
            }
            
            HStack(spacing: 15) {
                Image(item.image)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 130, height: 130)
                    .cornerRadius(18)
                
                VStack(alignment: .leading, spacing: 10) {
                    Text(item.name)
                        .fontWeight(.semibold)
                        .font(.custom("Jost-Bold", size: 18))
                        .foregroundColor(.black)
                    
                    Text(item.details)
                        .fontWeight(.semibold)
                        .font(.custom("Jost-Regular", size: 18))
                        .foregroundColor(.gray)
                    
                    HStack(spacing: 15) {
                        Text(getPrice(value: item.price))
                            .font(.subheadline)
                            .fontWeight(.heavy)
                            .font(.custom("Jost-Bold", size: 15))
                            .foregroundColor(.red)
                        
                        Spacer(minLength: 0)
                        
                        // Add - Subtract Button
                        Button(action: {
                            if item.quantity > 1 { item.quantity -= 1 }
                        }) {
                            Image(systemName: "minus")
                                .font(.system(size: 16, weight: .heavy))
                                .foregroundColor(.black)
                        }
                        
                        Text("\(item.quantity)")
                            .fontWeight(.heavy)
                            .font(.custom("Jost-Regular", size: 18))
                            .foregroundColor(.black)
                            .padding(.vertical, 5)
                            .padding(.horizontal, 10)
                            .background(Color.black.opacity(0.06))
                        
                        Button(action: {item.quantity += 1}) {
                            Image(systemName: "plus")
                                .font(.system(size: 16, weight: .heavy))
                                .foregroundColor(.black)
                        }
                    }
                }
            }
            .padding()
            .background(Color("gray"))
            .contentShape(Rectangle())
            .offset(x: item.offset)
            .gesture(DragGesture().onChanged(onChanged(value:)).onEnded(onEnd(value:)))
        }
    }
    
    func onChanged(value: DragGesture.Value) {
        if value.translation.width < 0 {
            if item.isSwiped {
                item.offset = value.translation.width - 90
            } else {
                item.offset = value.translation.width
            }
        }
    }
    
    func onEnd(value: DragGesture.Value) {
        withAnimation(.easeOut) {
            if value.translation.width < 0 {
                if -value.translation.width > UIScreen.main.bounds.width / 2 {
                    item.offset = -1000
                    deleteItem()
                } else if -item.offset > 50 {
                    item.isSwiped = true
                    item.offset = -90
                } else {
                    item.isSwiped = false
                    item.offset = 0
                }
            } else {
                item.isSwiped = false
                item.offset = 0
            }
        }
    }
    
    // Removing Item
    func deleteItem() {
        items.removeAll { (item) -> Bool in
            return self.item.id == item.id
        }
    }
}

func getPrice(value: Float) -> String {
    let format = NumberFormatter()
    format.numberStyle = .currency
    
    return format.string(from: NSNumber(value: value)) ?? ""
}

..

GET source code on Github:

In this Video i'm going to show Stylish Cart Page UI With Custom Swipe To Delete Action Using SwiftUI

..