I am storing my cart in Vuex and I am adding products to the cart with API calls. What I am trying to do is according to the stock of each product, I want to disable the API call. So in my getetrs:
export const checkStock = (state) => {
let stockAvailable = true;
state.cart.forEach(item => {
if(item.product.attributes.stock <= item.amount){
stockAvailable = false;
}
})
return stockAvailable;
}
I am checking the stock and if the stock which is right. And in Product component where I am making the API call and add the products to the cart, and I am getting the checkStock function from the getters.js file:
checkStockAvailability() {
return this.$store.getters.checkStock;
},
addToCart: function () {
this.amount = this.itemsCount !== "" ? this.itemsCount : 1;
if(this.variationId != null) {
this.warningMessage = false;
if(this.checkStockAvailability()) {
cartHelper.addToCart(this.product.id, this.variationId, this.amount, (response) => {
this.$store.dispatch('addProductToCart', {
product: this.product,
variation: this.variationId,
amount: parseInt(this.amount)
})
});
}
} else {
this.warningMessage = true;
}
},
So what these 2 functions are doing exactly is: For example, I am adding Product 1 which has 5 stocks, and as soon as I add these 5, I cannot add more which is also right. But I cannot also add Product 2 which has enough stock. So I think I need to change my checkStock function as a product but I don't know how to do it. So please have a look at my question and let me know any advice.
So, if I understood correctly, when product A has 5 items in stock, and you buy these 5 items, product B (which as N items in stock as well), is being marked as out of stock as well.
The problem seems to be in your function checkStock, since you're doing a forEach operation, and, as soon as you see ONE product with not enough items available, you set stockAvailable as false, and return this value. Hence, this function doesn't depend on the product you're asking for but for any of them to not be sufficient for the purchase. You'll need to pass the Product name or id (whatever suits best for you).
As a reference:
export const checkStock = (state, productName) => {
let stockAvailable = true;
state.cart.forEach(item => {
// First, you search for your product
if(item.product.name === productName) {
// Then you check if there is enough stock available
if(item.product.attributes.stock <= item.amount){
stockAvailable = false;
}
}
})
return stockAvailable;
}
The final implementation will depend on the configuration of your item object. You might search by id instead of name. Also, you could search for this specific product in your state object as a dictionary instead of looping through all products.