Vue: issue with adding items to shopping cart
Hi everybody, I'm making my own shopping cart for learning js and vue, I'm suing vuex modules for state management and persist data in local storage. Everything works fine but adding X ammount of items acts really irregular(sums doesn't seem right, sometimes it decreases quantity instead of increasing.);
My shopping cart can hold different discounts (products).
One discount object looks like this (Iaravel spits this in JSON from):
"id" => 1
"slug" => "descuento-muy-wow"
"url" => "/descuentos/descuento-muy-wow"
"title" => "Descuento muy wow"
"body" => "<p>Descripcion del contenido</p>"
"originalPrice" => "12.99"
"finalPrice" => "10.99"
"discountPercent" => 15
"people" => 1
"codesToGenerate" => 10
"image" => "/uploads/file-06-02-2019-01-17-VFL-247.jpeg"
"isVisible" => 1
"expireDate" => "2019-02-06 02:17:20"
"created_at" => "2019-02-06 01:17:14"
"updated_at" => "2019-02-06 01:17:20"
Method getDiscountData takes a discount as argument, then adds a new quantity property and sends it t the vuex action addProductToCart, then a mutation increments the cart item quantity by by this.quantity.
This is how I add items to cart and increase item quantity, I'm ALMOST POSITIVE that the error is in how I do the sum , in the mutation INCREASE_ITEM_QUANTITY;
const mutations = {
ADD_PRODUCT_TO_CART(state, product) {
state.cartItems.push(product);
},
INCREASE_ITEM_QUANTITY(state, product) {
let index = state.cartItems.findIndex(item => item.id == product.id);
state.cartItems[index].quantity = parseInt(state.cartItems[index].quantity) + parseInt(product.quantity);
},
This is my component where click event is registered:
<template>
<div class="DISCOUNTcard3_maincontainer">
<div class="DISCOUNTcard3_image_container">
<div class="DISCOUNTcard3_image" :style="'background-image:url('+discount.image+');'"></div>
</div>
<div class="DISCOUNTcard3_info_container">
<span class="DISCOUNTcard3_info_title">{{ discount.title }}</span>
<span class="DISCOUNTcard3_info_price">{{ discount.finalPrice }} €</span>
<div class="DISCOUNTcard3_info_quantity_container">
<span class="DISCOUNTcard3_info_quantity_label">Cantidad:</span>
<div class="DISCOUNTcard3_info_quantity_inputs_container">
<input class="DISCOUNTcard3_quantity_inputs_input" v-model="quantity" type="number" step="1" min="1" :max="discount.stock_left">
<button class="DISCOUNTcard3_quantity_inputs_button" type="button" @click="getDiscountData(discount);">
<span class="DISCOUNTcard3_quantity_inputs_button_text">AÑADIR A LA CESTA</span>
</button>
</div>
</div>
<div class="DISCOUNTcard3_info_description" v-html="discount.body"></div>
</div>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
name: 'DISCOUNTcard3',
data() {
return {
quantity: 1,
}
},
props: {
discount: { required:true }
},
mounted() {
console.log(this.$options.name+' component successfully mounted');
},
methods:{
...mapActions('Cart', ['addProductToCart']),
getDiscountData: function(discount){
alert('dataquant:'+this.quantity);
discount.quantity = parseInt(this.quantity);
alert('quant:'+discount.quantity);
this.addProductToCart(discount);
console.log('clicked add to cart...');
}
}
};
</script>
Please or to participate in this conversation.