0

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>
2
  • 4
    Si vas a reducir cantidad, entonces compara cantidad y no total: if (item.qty > 0)
    – Triby
    Commented el 22 oct. 2020 a las 14:50
  • @Triby <3 gracias!!!!!!! exactamente eso es lo que tenia que hacer, comparar la cantidad y si es >0 disminuyele la cantidad al elemento[i]
    – Alluka
    Commented el 22 oct. 2020 a las 15:08

1 respuesta 1

1

El problema esta en el primer segmento de código:

 dec: function (item) {
    if (this.total >= 0) {
      item.qty--;
      this.total = this.total - item.price;
    } else {
    }
  },

En la cláusula if estás preguntando si total es mayor o IGUAL que 0. Por lo que cuando la cantidad es 0, te permite reducirlo hasta -1. Lo correcto sería solo dejar reducir la cantidad si esta es MAYOR que 0.

 dec: function (item) {
    if (this.total > 0) {
      item.qty--;
      this.total = this.total - item.price;
    }
  },

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.