Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Frontend
Aprendiz
Aumentar cantidad o agregar detalle
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.
Manejo de productos en un arreglo
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.
¿Cómo podemos corregir esto?
Vamos a agregar una condición para que si el producto ya existe, sumemos una unidad a la cantidad.
¿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.
Uso del método 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.
Prueba del 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
undefined. - Si agregamos una vez más, ya no es
undefined, porque sí se encontró el producto.
Agregando la condición if
En ese caso, lo que podemos hacer es poner un if:
- Si se encuentra el detalle, aumentaremos la cantidad en uno.
- Solamente en caso de que no se encuentre, haremos
pushpara agregar un nuevo detalle.
Probemos hasta aquí
- Vamos a actualizar.
- Agregamos un producto.
- Si lo queremos agregar una vez más, ya no lo hace.
- Solamente va a agregar un producto cuando sea nuevo.
- Si se encuentra, tenemos que sumarle uno.
- Si no se encuentra, haremos
push.
Aumentando la cantidad de un detalle encontrado
¿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.
Resultado final
- 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 otro producto distinto y seguimos agregando.
- 4, 5, 6, 2, 3, 4 y aquí 2.
Entonces estamos muy bien.
- Si el producto ya existe y ha sido encontrado, simplemente aumentamos su cantidad.
- Si no existe, lo agregamos como nuevo con una cantidad inicial de uno.
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