Badge: Cantidad de items en el carrito

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.

Crea una cuenta y continúa aprendiendo 🚀

Badge: Cantidad de items en el carrito