Increment and Decrement product quantity
a-ssassi-n opened this issue · 2 comments
How can I show a product quantity counter on the "Add to Cart" button?
Also, is there a good way to implement Increment and Decrement of product quantity just beside the Add To Cart button?
P.S Loved your work. It helped me a lot understanding Redux and also helped me learn a good project structure. Keep up the Good Work 👍
Hey @a-ssassi-n sorry for taking so long to answer.
I think we can do it by two aways:
1 - When the "add to cart" button is clicked we can open a modal with the products info and some options (size, quantity etc)
2 - Add an increment/decrement component in the floating cart
I will eventually upgrade this project in the future to add those features but if you want, feel free to send a PR. Just make sure to keep the same "look and feel"
Thanks for the feedback!
Hey, Jefferson.
Thank you for your reply.
I am now able to make product quantity decrement with changing some code in the removeProduct
method.
removeProduct = product => {
console.log("Remove Product is Called");
const { cartProducts, updateCart } = this.props;
const index = cartProducts.findIndex(p => p.id === product.id);
if (index >= 0) {
cartProducts.forEach(cp => {
if (cp.id === product.id) {
if (cp.quantity === 1) {
//if quantity is 1 then remove product from cart
cartProducts.splice(index, 1);
} else {
//else decrement the quantity by 1
cp.quantity -= product.quantity;
}
}
});
updateCart(cartProducts);
}
};
The above code works flawlessly.
When I loop through the cartProduct
I am able to add a onClick
increment/decrement event on the buttons and I am able to show the quantity badge as the quantity
value is present in the object.
When I loop through the products, I am able to add a onClick
increment/decrement event on the buttons but, how can I show the current quantity of the perticular product in the cart?
May be with every item in the product array I need to check if the product is in the cart? And If the cart has that product, then may be add new property like productItem.currenty_quantity = cartItem.quantity
Is this a good way?