Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
En esta lección agregamos una condición para no repetir productos en nuestro carrito. Si el producto ya se encuentra en el carrito, sólo aumentamos la cantidad a comprar, y de caso contrario, agregamos el producto como un nuevo detalle.
Nosotros tenemos un arreglo de productos.
Sin embargo, cada vez que agregamos un producto, en vez de sumar la cantidad, se está repitiendo el producto.
Vamos a agregar una condición para que si el producto ya existe, sumemos una unidad a la cantidad.
La tenemos que poner en este método, porque este método se llama cada vez que se hace click en un botón y recibimos aquí el productId
.
find
Vamos a usar el método find
que está disponible para arreglos.
Este método nos permitirá encontrar un detalle si el producto ya está agregado.
El método find
va a comparar la condición que le vamos a indicar con cada uno de los detalles.
En este caso, a cada uno de los detalles los vamos a llamar d
.
Si d.productId
es igual al productId
que se quiere agregar, quiere decir que hemos encontrado al detalle que nos interesa.
Esto lo vamos a llamar detailFound
(detalle encontrado).
Hemos encontrado un detalle cuyo productId
coincide con el que se está queriendo agregar.
En este caso, vamos a imprimir por consola cuál es el valor de detailFound
.
Guardamos hasta aquí solamente para ver cuál es el resultado de este método find
.
find
Entonces vamos a presionar el botón:
undefined
.undefined
, porque sí se encontró el producto.if
En ese caso, lo que podemos hacer es poner un if
:
push
para agregar un nuevo detalle.push
.¿Cómo podemos aumentar en uno la cantidad de un detalle que ha sido encontrado?
A partir del detalle encontrado podemos aumentar su cantidad en uno.
De esta manera:
detailFound.quantity += 1;
Estamos accediendo al atributo de la cantidad dentro del detalle encontrado y lo estamos aumentando en uno.
Entonces estamos muy bien.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Nosotros tenemos un arreglo de productos. Sin embargo, cada vez que agregamos un producto, una vez más, en vez de sumar la cantidad, se está repitiendo el producto. ¿Cómo podemos corregir esto? Vamos a agregar una condición para que si el producto ya existe, sumemos una unidad a la cantidad. Entonces, ¿Dónde tenemos que poner esa lógica? La tenemos que poner en este método, porque este método se llama cada vez que se hace click en un botón y recibimos aquí el "productId". Entonces vamos a usar el método "find" que está disponible para arreglos. Este método nos permitirá encontrar un detalle si el producto ya está agregado,. El método "find" va a comparar la condición que le vamos a indicar con cada uno de los detalles. En este caso, a cada uno de los detalles los vamos a llamar "D" si "d.productId" es igual al "productId" que se quiere agregar, quiere decir que hemos encontrado al detalle que nos interesa. Entonces esto lo vamos a llamar "detailFound" detalle encontrado. Hemos encontrado un detalle cuyo "productId" coincide con el que se está queriendo agregar. En este caso vamos a imprimir por consola cuál es el valor de “detailFound”. Guardamos hasta aquí solamente para ver cuál es el resultado de este método "find". Entonces vamos a presionar el botón. Por primera vez. Hizo la búsqueda, no encontró ninguno y nos devolvió el valor de "undeFind". Si agregamos una vez más, ya no es "undeFind", porque si se encontró el producto, en ese caso lo que podemos hacer es poner por aquí un "if". Si se encuentra el detalle, aumentaremos la cantidad en uno y solamente en caso que no se encuentre vamos a hacer push para agregar un nuevo detalle. Probemos hasta aquí. Vamos a actualizar. Agregamos un producto. Allí está. Si lo queremos agregar una vez más. Ya no lo hace. Solamente va a agregar un producto cuando sea nuevo. Allí está. Si se encuentra, tenemos que sumarle uno. Nos falta hacer esto. Y si no se encuentra, haremos. push. ¿Cómo podemos aumentar en uno la cantidad de un detalle que ha sido encontrado? Bueno, a partir del detalle encontrado podemos aumentar su cantidad en uno. De esta manera, "idetailFound.quantity + = 1" estamos accediendo al atributo de la cantidad dentro del detalle encontrado y lo estamos aumentando en uno. Guardamos hasta aquí, actualizamos, agregamos un producto, agregamos una vez más, otra vez más, otra vez más. Agregamos un producto distinto. Agregamos un producto distinto y seguimos agregando 456234 y aquí 2. Entonces estamos muy bien. Si el producto ya existe, ha sido encontrado, simplemente aumentamos su cantidad. Si no existe, lo agregamos como lo estamos agregando recién, empieza con la cantidad de uno.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.