estoy haciendo un carrito de compra para una tienda online, y tengo problemas al desarrollar la lógica del carrito de compra. Yo tengo N cantidad de productos... Producto A, Producto B, Producto C, Producto N.... con las siguientes atributos id: n.., titulo: Producto N, precio: 10, Cada vez que que se necesite n producto se agrega al carrito, cuando se agrega al carrito existe dos botones, uno con la funcion de aumentar la cantidad del producto, y el otro para disminutor la cantidad. El problema que tengo es cuando tengo varios articulos agregados e intento disminuir la cantidad de productos, este se pasa a numeros negativos, Ejemplo: Agrego el producto A y B A = 10; B = 2;
A X 1 B X 1 Total = 22
que pasa si se disminuye la cantidad de A 2 veces el total queda -8, y no es la idea, lo idea seria que quede en 0 al eliminar elementos del carrito.
intente agregarle un condicional al boton de disminuir pero no funciono.
dec: function (item) {
if (this.total >= 0) {
item.qty--;
this.total = this.total - item.price;
} else {
}
},
Cual puede ser el problema al desarrollar la logica de este problema? que me recomiendan realizar?
<div id="app">
<div class="header">
<div class="container">
<div class="title">
<img src="public/logo.png" />
<h1>{{titlePage}}</h1>
</div>
</div>
</div>
<div class="main container">
<div class="products">
<div
v-for="product in products"
class="product"
v-bind:key="product.id"
>
<div>
<h4 class="produc-title">{{product.title}}</h4>
<button class="add-to-cart btn" v-on:click="addToCart(product)">
Agregar a carrito
</button>
</div>
</div>
</div>
<div class="cart">
<h2>Shopping Cart</h2>
<ul>
<li v-for="item in cart" v-bind:key="item.id" class="cart-item">
<div class="item-title">{{item.title}}</div>
<span class="item-qty">{{item.price}} x {{item.qty}}</span>
<button v-on:click="inc(item)">+</button>
<button v-on:click="dec(item)">-</button>
</li>
</ul>
<div v-if="cart.length >= 1" class="cart-total">
Total: ${{total}}
</div>
<div v-else class="empty-cart">No items in the cart</div>
</div>
</div>
</div>
<!-- Scripts -->
<script>
let vueApp = new Vue({
el: "#app",
data: {
titlePage: "Vue.js Shop",
total: 0,
products: [
{ title: "product A", id: 1, price: 10 },
{ title: "product B", id: 2, price: 2 },
{ title: "product C", id: 3, price: 1 },
],
cart: [],
},
methods: {
addToCart: function (product) {
let x = this.cart;
let y = typeof x;
console.log(y);
console.log("ssss");
//
this.total += product.price;
var found = false;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].id === product.id) {
this.cart[i].qty++;
found = true;
}
}
if (!found) {
this.cart.push({
id: product.id,
price: product.price,
title: product.title,
qty: 1,
});
}
//console.log(this.total);
//console.log(product.title);
//console.log(this.cart);
},
inc: function (item) {
item.qty++;
this.total = item.price + this.total;
},
dec: function (item) {
if (this.total >= 0) {
item.qty--;
this.total = this.total - item.price;
} else {
}
},
},
});
</script>
if (item.qty > 0)