Implementing multi-item cart functionality for various product types in Android Kotlin e-commerce app

Ecom
1

I’m building an e-commerce app in Android using Kotlin. Right now I can show products on the home screen and let users add one product to the cart from its detail page. But I’m stuck on how to add multiple products with different quantities to the cart.

Each product should appear as a separate card in the cart view. Currently, when I click to add items, all products get the same quantity. How can I fix this?

Here’s a simplified version of my ProductDetailFragment:

class ProductDetailFragment : Fragment() {
    private lateinit var binding: FragmentProductDetailBinding
    private val shopViewModel: ShopViewModel by activityViewModels()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        
        binding.productInfo = arguments?.getParcelable("item")
        
        binding.addToCartBtn.setOnClickListener {
            shopViewModel.itemCount++
            binding.quantityDisplay.text = shopViewModel.itemCount.toString()
            Toast.makeText(context, "Added to cart", Toast.LENGTH_SHORT).show()
        }
        
        binding.checkoutBtn.setOnClickListener {
            findNavController().navigate(R.id.action_productDetail_to_cart)
        }
    }
}

How can I modify this to handle multiple products with their own quantities?

2

Hey there Daisy_Whimsical! Your e-commerce app sounds cool. Have you thought about using a list or map in your ViewModel to keep track of each product and its quantity? That way, you could update just the specific item when someone adds it to their cart.

Maybe something like this could work:

class ShopViewModel : ViewModel() {
    private val _cartItems = MutableStateFlow<Map<String, Int>>(emptyMap())
    val cartItems: StateFlow<Map<String, Int>> = _cartItems.asStateFlow()

    fun addToCart(productId: String) {
        _cartItems.update { currentCart ->
            val currentQuantity = currentCart[productId] ?: 0
            currentCart + (productId to currentQuantity + 1)
        }
    }
}

Then in your fragment, you could do:

binding.addToCartBtn.setOnClickListener {
    val productId = binding.productInfo?.id ?: return@setOnClickListener
    shopViewModel.addToCart(productId)
    Toast.makeText(context, "Added to cart", Toast.LENGTH_SHORT).show()
}

What do you think? Would this work for your app? Let me know if you need any clarification!

3

To implement multi-item cart functionality, you’ll need to restructure your approach. Create a CartItem data class containing productId, quantity, and other relevant details. In your ShopViewModel, use a MutableStateFlow<List> to manage the cart state.

Modify your ProductDetailFragment to update the cart when adding items:

binding.addToCartBtn.setOnClickListener {
    val product = arguments?.getParcelable<Product>("item")
    product?.let {
        shopViewModel.addToCart(it.id, 1)
    }
    Toast.makeText(context, "Added to cart", Toast.LENGTH_SHORT).show()
}

In ShopViewModel, implement addToCart() to update the cart state. This approach allows for individual quantity management and seamless UI updates across the app.

4

hey daisy, i’ve dealt with this before. u need to create a CartItem class with productId and quantity. then in ur viewModel, use a Map<String, CartItem> to store cart items. when adding to cart, check if the product exists & update quantity or add new CartItem. update ur UI to reflect changes for each product. hope this helps!