Resumen de la compra & Total

Bien, tal como hemos comentado en la lección anterior, vamos a agregar un nuevo componente con un resumen de la compra, de tal manera que aquí va a estar el monto total a pagar y también un botón para confirmar el pedido. Como vemos, ya tenemos dos componentes asociados al carrito de compras y vamos a agregar un tercero. En ese caso, si nosotros lo deseamos, podemos organizar los tres componentes dentro de una carpeta, por ejemplo, dentro de components, vamos a crear una carpeta cart y vamos a desplazar allí ShoppingCart, ShoppingCartItem y aquí mismo vamos a crear un nuevo archivo que se va a llamar SummaryCard, o sea, es una tarjeta de resumen, punto vue. Entonces, nuestro CartView está importando ShoppingCart desde la carpeta cart, específicamente el componente ShoppingCart.vue. Así como hacemos uso de ShoppingCart, vamos también a importar nuestro nuevo componente que se llama SummaryCard, ¿sí?. Este componente es una carta, es una tarjeta que va a contener un resumen de la compra. ¿Sí?, entonces simplemente aquí vamos a llamarlo de esta manera. ¿Qué es lo que vamos a tener aquí? Pues empecemos definiendo un template. Este template debe tener un v-card. Este v-card, al igual que hicimos para el ShoppingCart, debe tener un título. En este caso, resumen de la compra. Y así mismo, un v-card-text. Total a pagar, dos puntos y aquí tenemos que imprimir el total a pagar. Seguido de este texto nosotros vamos a poner un v-btn con el texto realizar pedido. Hasta aquí guardamos. Al actualizar vamos a tener esto de aquí. Probablemente te estés preguntando por qué este card se encuentra un poco por debajo que el card de la derecha. Veamos a qué se debe esto. Nuestro CartView contiene a un ShoppingCart y contiene un SummaryCard. Ambos se encuentran directamente definidos dentro de un v-col en CartView. Si abrimos ShoppingCart vemos que es un v-card pero este ShoppingCart tiene un margin top. Entonces vamos a quitarle este margin top para que ambos cart estén a la misma altura. Lo siguiente es que el total a pagar se calcula realmente. podemos acceder este valor a través de nuestro store, podemos pedirle a nuestro store que haga este cálculo por nosotros. Entonces vamos a dejar SummaryCard abierto y vamos a abrir ahora nuestro store llamado cart, para calcular el total como no vamos a modificar el estado y simplemente nos interesa calcular un valor vamos a definir un getter, el getter se llamará totalAmount, monto total apagar. Creamos una función a través de esta anotación de arrow function y le pasamos como primer argumento el estado. Este state contiene details por lo tanto vamos a usar un for each y vamos a iterar cada uno de los detalles, ¿sí?. Vamos a tener una variable zoom que es la suma que va a empezar en cero y luego vamos a ir sumando el sub total de cada producto en este caso sería d.product.price multiplicado por d.quantity, finalmente devolveremos esta suma y esta suma vendrá a ser el total apagar, si queremos lo podemos llamar total también. Guardamos hasta aquí y vamos a acceder a este getter desde nuestro componente, para esto agregamos una sección de script, definimos que queremos usar typescript, agregamos un export default porque vamos a usar Options API y aquí nosotros vamos a definir una Computed property. Podemos hacerlo manualmente o podemos hacer uso de el helper que ofrece pinia, que es mapState, a mapState hay que indicarle qué store queremos usar, en este caso useCartStore y luego le vamos a pasar aquí un arreglo con el nombre del estado que nos interesa o bien el getter que nos interesa, en este caso totalAmount. ¿Sí?, por lo tanto aquí ya podemos imprimir el valor de totalAmount, guardamos y como vemos aquí el total a pagar es 0, vamos a agregar dos sillas y como vemos el total a pagar es 112 igual al sub total que está aquí, pero si agregamos otro producto distinto como un micrófono, vemos que el total a pagar es 132 que viene a ser la suma de los sub totales. ¿Si?, como este botón de realizar pedido no resalta mucho vamos a cambiarle de color. En la documentación de Vuetify podemos ver cómo personalizar los botones, vamos a usar aquí una variante tonal para ver cómo queda. Ahora el botón resalta un poco más, sin embargo se encuentra totalmente pegado al texto. Así como tenemos un v-card-title, vamos a hacer uso de un v-card-subtitle. El subtitle será el total a pagar. Y el card-text solo contendrá al botón. Tras hacer ello, ya hay una separación entre estos elementos. Si lo queremos, también podemos cambiar el color del botón para que coincida con el botón de agregar al carrito. ¿Qué estilos hemos usado para eso? Pues lo podemos ver en productCard. Aquí vemos que estamos usando el color orange-lighten-2. Entonces vamos a copiar ello y le vamos a aplicar este v-btn. Nos vamos aquí y aquí está el botón con su nuevo estilo.

Crea una cuenta y continúa aprendiendo 🚀

Resumen de la compra & Total

Agregando un nuevo componente: SummaryCard

Estructura del componente SummaryCard

Alineación del card

Cálculo del total a pagar

Usando el getter en SummaryCard

Personalización del botón