Increment and Decrement product quantity

[a-ssassi-n]

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 👍

[Jefferson Ribeiro]

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!

[a-ssassi-n]

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?