use-shopping-cart

incremementItem()

incremementItem()

incrementItem(sku, quantity = 1) takes a sku of a product in the cart and incremements 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.

You currently don't have any items in your cart.
Come back after you add more items to your cart.

{}
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>
}
Edit this page on GitHub