Add a Quantity Input to the Cart Page to Add or Remove Items from a Shopping Cart in Next

Share this video with your friends

Send Tweet

Updating the quantity of a product is an essential feature for a great checkout experience. In this lesson, we will create a feature to update the quantity of each product in our cart.

We'll create a new component with a form input to increment the number of items and a button to submit that form. Additonally, we will create an updated item function in the useCart hook that adds the ability to update the quantity of a product in the shopping cart by ID and trigger an update whenever the quantity form on the cart table is submitted.

Navneet Kumar Sharma
Navneet Kumar Sharma
~ 3 years ago

How to handle the successful payment, after payment is made, the stripe redirects to the application with session_id then what to do next, please cover this also

Colby Fayock
Colby Fayock(instructor)
~ 3 years ago

How to handle the successful payment, after payment is made, the stripe redirects to the application with session_id then what to do next, please cover this also

You can use that session ID and the Stripe API to look up the order and display details on the "receipt" or order confirmation page. You additionally would likely want to clear the cart state as at that point, the items would have been purchased.

~ 3 years ago

If a cart item is updated to '0', how do you remove that row from the table dynamically?

~ 2 years ago

This is what I did in the useCart.js file:

// Update number of items in cart function updateItem({id, quantity}) { updateCart((prev) => { let cart = {...prev}

  if (cart.products[id]) {
    cart.products[id].quantity = quantity
  } else {
    cart.products[id] = {
      id,
      quantity: 1,
    }
  }

  if (cart.products[id].quantity === 0) {
    delete cart.products[id]
  }

  return cart
})

}