use-shopping-cart
incrementItem()
incrementItem()
incrementItem(sku, quantity = 1)
takes a sku of a product in the cart and increments the quantity by 1 by default.
You can pass an optional quantity for the second param to increase by that number. For example:
incrementItem(sku, 10)
would increase by 10.
function Cart() { const { incrementItem, cartDetails } = useShoppingCart() const entries = [] for (const sku in cartDetails) { const entry = cartDetails[sku] entries.push( <article style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '50%' }} > <figure style={{ textAlign: 'center' }}> <img style={{ height: 200, width: 250 }} src={entry.image} alt={entry.name} /> <figcaption>{entry.name}</figcaption> </figure> <p>{entry.formattedValue}</p> <section style={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }} > {/* Increases the quantity of the item */} <button onClick={() => incrementItem(sku)} aria-label={`Add one ${entry.name} to your cart`} style={{ height: 50, width: 100, marginBottom: 30 }} > Add one {entry.name} to your cart </button> {/* Increases the item quantity by 10 */} <button onClick={() => incrementItem(sku, 10)} aria-label={`Add ten ${entry.name} to your cart`} style={{ height: 50, width: 100, marginBottom: 30 }} > Add 10 {entry.name} to your cart </button> </section> </article> ) } if (entries.length) return entries return <p>You currently don't have any items in your cart.</p>}