Refactor: VList to VTable

En la lección anterior, nosotros hemos agregado una imagen para los productos que están sobre el carrito. También nos encargamos de desplazar parte de nuestro shopping cart a un nuevo componente llamado shopping cart item. Este shopping cart item representa a cada producto agregado al carrito y su cantidad. Probablemente te estés preguntando por qué tantos componentes. En realidad mientras más componentes tengas es mejor porque tu proyecto se encontrará mejor organizado. Por ejemplo, si quieres ver el componente que representa el carrito de compras, miras shopping cart en general y va a ser muy entendible. Ya que es un card que tiene un título y que contiene un texto con el cuerpo del card. Como contenido vamos a tener una lista si es que hay detalles y en caso que no un mensaje. La lista incluye varios shopping cart items. Sin embargo aquí no tenemos que preocuparnos por cómo va a lucir cada item porque de eso se encargará el componente cart item. Este componente cart item va a contener una imagen, un product name y unos tres botones para disminuir y aumentar la cantidad y así mismo para eliminar el detalle del carrito de compras. De caso contrario todo este código estaría también presente aquí y sería un poco difícil de leer. Por lo tanto debemos tratar de mantener el template de nuestros componentes lo más simple posible. Sin embargo como estamos viendo una lista con items no nos resulta de mucha ayuda para representar un carrito de compras porque de hecho aquí nos falta más datos. queremos saber cuál es el precio unitario de cada producto, tal vez un subtotal y un total que se debe pagar finalmente si se decide proceder con la compra. Por lo tanto lo que vamos a hacer ahora es dirigirnos a la documentación de Vuetify y vamos a buscar table. Vuetify también nos permite trabajar con tablas. El componente v-table simplemente es un wrapper sobre el elemento table que existe en html entonces la forma de usarlo es muy similar, tenemos v-table, este v-table en su interior tiene un table head con las cabeceras cada cabecera va dentro de un th y luego tenemos un table body que contiene filas representadas a través de un tr. Tr significa table row o sea fila de tabla, ¿sí? entonces vamos a actualizar nuestra implementación para que no usemos un v-list sino que en cambio usemos un v-table. Entonces, de este lado vamos a ir poniendo nuestra tabla. Vamos a copiar este v-table. Lo ponemos por aquí. Y para empezar, vamos a poner por aquí unos datos constantes. ¿Sí? Solamente para demostrar que la tabla se muestra. Guardamos. Y aquí tenemos una tabla que tiene dos columnas name y calories. Acá tenemos un nombre de un postre y la cantidad de calorías que aporta. Sobre esta tabla vamos a ir situando nuestro carrito de compras. En nuestro caso vamos a tener el nombre del producto, la cantidad escogida y un subtotal. Por ahora empecemos con estos tres. Para que esto funcione, cada item tiene que ser un tr, o sea, un table row. Por lo tanto, vamos a cortar esto para guiarnos. Y aquí en nuestro shopping cart item vamos a tener un tr. El tr va a contener tres datos. Para que coincida con las tres cabeceras que hemos definido. En la primera celda, vamos a poner entonces el nombre del producto con su imagen. En este caso sería esto de aquí. En la segunda celda vamos a poner la cantidad. En este caso vamos a poner la cantidad junto a los botones. En la tercera celda vamos a poner el subtotal. Por ahora nos falta calcularlo. Lo dejamos pendiente. y vamos a poner una celda más con la opción de eliminar el detalle completamente, ¿sí?. Entonces borramos el v-list-item y nos quedamos simplemente con un tr, guardemos hasta aquí. Anteriormente usábamos un v-list con esta condición, la condición ahora lo tendrá el v-table y este shopping cart item ya no estará aquí sino que estará dentro de este table body. Probablemente te estés preguntando ¿por qué hacemos tantos cambios?, ¿por qué creamos más componentes?, ¿por qué modificamos la estructura de los componentes? En primer lugar hacemos todo esto para organizar mejor nuestra data pero además porque es importante que practiques refactorizar tus componentes, un componente puede cambiar su estructura continuamente y de un componente pueden surgir más componentes también. En este caso por ejemplo tenemos un v-table si es que hay elementos, si es que no vamos a tener solo un párrafo, este v-table contiene un table head que contiene en su interior una fila de cabecera donde cada table header o sea TH son producto, cantidad y su total y luego tenemos un table body y dentro de table body tenemos varios cart items donde cada cart item será un table row. Hasta aquí guardamos, y al volver al navegador nos encontramos con este resultado tenemos producto, cantidad, sub total y luego aquí tenemos estas dos opciones. Bien, vamos a mejorar esto, primero que todo vamos a centrar el texto de la cantidad para que diga text-center, de esta manera, vamos a centrar también la celda correspondiente a la cantidad con un text-center. Allí lo tenemos, y ahora vamos a agregar en una columna el precio unitario y luego el sub total, ¿sí? Para ello empezaremos agregando un TH más que dirá precio y luego el sub total, entonces aquí antes del sub total vamos a poner un TD con el precio del producto, como tenemos acceso al detalle hacemos detail.product.price, y luego el sub total sería la multiplicación de el precio por la cantidad. Podemos calcularlo aquí en template pero como bien sabemos es recomendable hacerlo a través de Computed properties, por lo tanto vamos a agregar una Computed property llamada sub total y aquí vamos a devolver this.detail.product.price por this.detai .quantity. Y entonces aquí simplemente vamos a mostrar el subtotal, guardamos y tenemos este resultado. Tenemos el precio unitario, el subtotal y nos faltaría agregar el total general. Para aprovechar mejor el espacio vamos a agregar otro card a la derecha de tal manera que este otro card contenga el total a pagar, si queremos agregar un card a la derecha, ¿donde ponemos ese nuevo card? Ese nuevo card va a ser un nuevo componente, ¿en donde tenemos que registrar ese nuevo componente?. Bueno, actualmente tenemos una vista CartView que contiene simplemente un ShoppingCart, aquí nosotros podemos aprovechar y usar un v-row. El v-row en este caso va a contener un v-col, ocupando 8 columnas y luego vamos a tener otro v-col ocupando cuatro columnas. En este primer bloque de ocho columnas ponemos el ShoppingCart, y en este otro bloque vamos a poner el total a pagar, ¿sí?. Como vemos, ya va tomando forma, solo que aquí en vez de poner el texto directamente tenemos que poner un nuevo componente que a su vez va a ser un card o sea una tarjeta.

Crea una cuenta y continúa aprendiendo 🚀

Refactor: VList to VTable

Agregando una Imagen a los Productos del Carrito

¿Por qué tantos componentes?

Implementando una Tabla con Vuetify

Creando la Tabla

Ajustando la Tabla

Creando el Card de Total a Pagar