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
Access Ro.Serialno from Native in Android 8
Google Maps, No Option for Starting the Navigation, Only Preview Is There
Difference Between Add(), Replace(), and Addtobackstack()
App Restarts Rather Than Resumes
Removing Backgroundcolor of a View in Android
How to Synchronously Load Data from Firebase
How to Get the Json Response of a Post Request in a Webview
Failed to Resolve: Android.Support.Design:28.0.0-Rc02
How to Load New Values of Json After Every 10 Seconds
What Is the Simplest and Most Robust Way to Get the User'S Current Location on Android
Why Does My Button Not Showing in the Layout
How to Make Push Notification With Specific Sound
Prevent Screen Rotation on Android
How to Connect Existing Android Studio Project to Existing Github Repository
Unable to Add Window - Token Null Is Not Valid; Is Your Activity Running
How Capture/Log API Calls (Function Calls) Made by Android App