Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Badge: Cantidad de items en el carrito
Veamos cómo usar el componente badge de Vuetify, para mostrar un círculo en la esquina superior derecha con la cantidad de items que han sido agregados al carrito.
Desaparecer la sección del carrito
El siguiente cambio que vamos a hacer es desaparecer esta sección, porque el carrito ya tiene una página propia.
Más bien, cuando se vayan agregando productos al carrito, vamos a mantener aquí en cart un contador.
Aquí vamos a poner un badge, indicando cuántos productos hay en el carrito.
También vamos a duplicar la cantidad de productos que tenemos.
Duplicar la cantidad de productos
Entonces, ¿cómo duplicamos la cantidad de productos que tenemos?
Nos vamos a product list y aquí tenemos nuestros productos por ahora.
Lo único que vamos a hacer es agregar más productos, por ahora repetidos. Eso no importa.
Más adelante esta información va a venir de una API.
Guardamos y tenemos ya seis productos.
Eliminar el carrito
Vamos a eliminar el carrito de este lado.
¿Cómo hacemos ello?
Aquí en product list nos vamos a la sección de template, y simplemente vamos a quitar cart.
De tal manera que nos vamos a quedar solamente con un b-row, que contiene product cards, ordenados en columnas.
Guardamos, y ya no tenemos el carrito que estaba debajo.
Agregar un contador
Lo que vamos a hacer luego es agregar aquí arriba un contador, como comentamos, para que siempre esté disponible.
Nos dirigimos entonces a la documentación de Vuetify y hacemos una búsqueda del término badge.
Nos dirigimos al componente badge, y vemos un ejemplo.
Opciones del badge
Un badge puede estar en varias modalidades: in-line, floating y default.
Por defecto, se ve de esta manera.
El valor puede cambiar según lo que queramos.
Si hacemos clic en el check, vemos que se convierte simplemente en un punto.
Esto generalmente se usa para expresar que hay una opción nueva en un sitio.
En nuestro caso queremos indicar un número.
Uso del badge
¿De qué manera se usa el badge?
En este caso, el badge encierra a un icon, y tiene un contenido, que en este caso es un número.
Vamos a hacer una prueba con esto.
Copiamos el código y nos dirigimos a nuestro proyecto.
Agregar el badge en la app
¿En qué sección tenemos que agregar el badge?
Eso está dentro de app, dado que el componente app actualmente es el que contiene al app bar, que es la barra superior.
Entonces aquí vamos a poner un badge.
En vez de este v-icon, vamos a poner el botón.
De tal manera que el badge se genere teniendo en cuenta la posición del botón.
Vamos a poner que hay siete items en el carrito.
Guardamos y aquí tenemos el badge.
El badge está a nivel del botón, justo en la esquina del botón.
Si le damos clic, vemos que sigue funcionando. Entonces, estamos bien.
Hacer que el badge refleje la cantidad de elementos
Lo siguiente es hacer que el badge coincida verdaderamente con la cantidad de elementos.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
El siguiente cambio que vamos a hacer, es desaparecer esta sección de acá, porque el carrito ya tiene una página propia. Y más bien, cuando se vayan agregando productos al carrito vamos a mantener aquí en cart, un contador, sí? Aquí vamos a poner un badge, indicando cuántos productos hay en el carrito. También vamos a duplicar la cantidad de productos que tenemos, ¿sí? Entonces, ¿cómo duplicamos la cantidad de productos que tenemos? Nos vamos a product list y aquí tenemos nuestros productos por ahora. Entonces lo único que, que vamos a hacer es agregar más productos, por ahora repetidos, eso no importa. Más adelante esta información va a venir de una "API". Guardamos y tenemos ya seis productos. Vamos a eliminar el carrito de este lado. ¿Cómo hacemos ello? Aquí en product list nos vamos a la sección de template, y simplemente vamos a quitar cart, de tal manera que nos vamos a quedar solamente con un b-row, que contiene product cards, ordenados en columnas. Guardamos, y ya no tenemos el carrito que estaba debajo. Lo que vamos a hacer luego, es agregar aquí arriba, un contador como comentamos, para ir mostrando aquí arriba, y siempre esté disponible aquí arriba también la cantidad de items en el cart. Nos dirigimos entonces a la documentación de Vuetify y vamos a hacer una búsqueda. Vamos a buscar el término badge. Nos dirigimos al componente badge, y como vemos aquí tenemos un badge de ejemplo, ¿sí? Un badge puede estar en varias modalidades: in-line, floating y default. Por defecto se ve de esta manera. El valor puede cambiar según lo que queramos. Entonces esto es lo que vamos a conseguir. Si hacemos clic en este check, vemos que se convierte simplemente en un punto. Esto generalmente se usa para expresar que hay una opción nueva en un sitio. En nuestro caso queremos indicar un número. ¿De qué manera se usa el badge? En este caso el badge encierra a un icon, y tiene un contenido, que en este caso es un número. Vamos a hacer una prueba con esto. Copiemos esto y nos dirigimos a nuestro proyecto. ¿En qué sección tenemos que agregar el badge? Eso está dentro de app, dado que el componente app actualmente es el que contiene al app bar, que es la barra superior. Entonces aquí vamos a poner un badge. Y en vez de este v-icon vamos a poner el botón. De tal manera que el badge se genere teniendo en cuenta la posición del botón, y vamos a poner aquí que hay siete items en el carrito. Guardamos y aquí tenemos el badge. El badge está a nivel del botón. Está justo en la esquina del botón. Si le doy clic vemos que sigue funcionando. Entonces estamos bien. Lo siguiente es hacer que el badge coincida verdaderamente con la cantidad de elementos.
¿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