Cart Item Count Increment/Decrement & Add to Cart

my add to cart and increment and decrement button are not working

Add missing () after function like below:

$(document).ready(function(){
//Write here
})

Correct spelling for 'parsint' to 'parseInt'.

$(document).ready(function() {

$('.addtoCartbtn').click(function (e) {
e.preventDefault();
var product_id= $('.prod_id').val();
var product_qty= $('.qty-input').val();
alert(product_id);
alert(product_qty);

});
$(".increment-btn").click(function (e) {
e.preventDefault();
var inc_value=$(".qty-input").val();
var value= parseInt(inc_value,10);
value= isNaN(value) ? '0': value;
if(value < 10){
value++;
$(".qty-input").val(value);
}
});
$('.decrement-btn').click(function (e) {
e.preventDefault();
var dec_value= $('.qty-input').val();
var value= parseInt(dec_value,10);
value= isNaN(value) ? '0': value;
if(value > 1){
value--;
$('.qty-input').val(value);
}
});
});

cannot increment item in cart

You forgot to pass the cartItems props from the parent (app.js) component.

...
// in line no:75
<Cart cartItems={this.state.cartItems} />
...

change your addToCart method aswell:

// in line no: 19
addToCart = (product) => {
const isInCart = cartItems.some((item) => item.id === product.id);
let newCart = [];
if (isInCart) {
newCart = this.state.cartItems.map((cart) => {
return {
...cart,
quantity: Number(cart.quantity) + 1
};
});
} else {
newCart = [...this.state.cartItems, { ...product, quantity: 1 }];
}
this.setState({
cartItems: newCart
});
};

You're expecting the cartItems props in your cart.js file but you didn't pass it from the parent component.

How to make increment/decrement cart count in vue

Option 1:
i should start with length-1 and should go up to 0

min(product_id) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id;
}
});

if (result) {
for (let i = this.cartList.length-1; i >= 0; i--) {
if (this.cartList[i].product_id == product_id && this.cartList[i].count > 0){
const newFoodObject = {
...this.cartList[i],
count: this.cartList[i].count - 1,
};
this.$set(this.cartList, i, newFoodObject);
}
}
}

Option 2:
You do not need 2 methods.. just have one

updateQty(product_id,mode) {
let result = this.cartList.find((res) => {
if (res.product_id == product_id) {
return res.product_id;
}
});

if (result) {
for (let i = 0; i < this.cartList.length; i++) {
if (this.cartList[i].product_id == product_id) {
const newFoodObject = {
...this.cartList[i],
count: mode === 'INCRE' ? this.cartList[i].count + 1 : this.cartList[i].count - 1,
};
console.log("plus");
this.$set(this.cartList, i, newFoodObject);
}
}
}
},

use it like

 <font-awesome-icon
:icon="['far', 'minus-square']"
size="2x"
class="minus-button"
@click="updateQty(cards.product_id,'INCRE')"
/>

and

 <font-awesome-icon
:icon="['far', 'minus-square']"
size="2x"
class="minus-button"
@click="updateQty(cards.product_id,'DECRE')"
/>

Update cart item number instead of appending new item

If you are using the same key for the items you can do like below

     case 'ADD_TO_CART':
{
const updatedCart = [...state.cart];
const item = updatedCart.find(x=>x.key===action.payload.key);
if(item)
{
item.count++;
}
else{
updatedCart.push(action.payload);
}
return {
...state,
cart: updatedCart,
total: state.total + 1
}
}

The logic would search for items in the array and increase the count or add a new item to the array.



Related Topics



Leave a reply



Submit