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
Refactor: CartDetail & Product
Anteriormente nuestro detalle sólo contenía el id de cada producto. Veamos cómo refactorizar nuestra implementación para empezar a mostrar información de cada producto que tenemos en el carrito.
Corrección de Warnings y Refactorización
En la lección anterior, hemos corregido todos los warnings reportados por nuestra herramienta de linting.
Es importante siempre hacer esto antes de empezar a refactorizar. La idea es que nuestro linter no nos reporte ningún error.
Luego de terminar la refactorización, debemos correr nuevamente el linter y asegurarnos de que no haya errores.
Objetivo de la Refactorización
Vamos a mejorar la manera en que presentamos la información del carrito de compras. Para ello, nos dirigimos a nuestro store, donde se define detail, que es un arreglo de cart detail.
Si queremos, también podemos cambiar la sintaxis y definir el tipo de la siguiente manera:
-
detailses un arreglo, específicamente de este tipo.
Actualización de cart detail
Antes, un cart detail contenía:
-
productId -
quantity
Ahora, un cart detail contendrá:
-
product, que representa el producto agregado. -
number, que define la cantidad.
Este cambio afectará todos los lugares donde se usa cart detail.
Ajustes en el Store
Antes, cada detail tenía un productId. Ahora, para acceder al ID, debemos usar .id, ya que cada detail contiene un product y ese product tiene un id.
Siguiendo esta lógica:
- Para agregar un producto, en lugar de recibir solo un
productId, recibiremos un objetoproductcompleto. - Para poder usar
product, debemos importarlo usandoimport typey agregandoProduct. - Cuando hagamos push, almacenaremos el
productcompleto, no solo su ID. - Para buscar un producto, iteramos sobre los detalles y comparamos el
iddelproductde cada detalle con eliddel producto recibido como argumento.
Esta lógica se replicará en los métodos increment y decrement, ya que ambos buscan productos.
Para estos métodos:
- No necesitamos el
productcompleto. - Solo requerimos el
id, ya que solo se aumentará o disminuirá la cantidad.
Para eliminar un producto:
- En lugar de buscar por
productId, buscaremos porproduct.id. - Esto actualiza la lógica de
deleteProduct.
Resumen de Cambios
- Para agregar un producto: se necesita el objeto
productcompleto. - Para eliminar un producto: solo se necesita su
id. - Para incrementar o disminuir la cantidad: el
productIdes suficiente.
Ajustes en ProductCard
Debemos revisar dónde se usa addProduct. Se llama desde ProductCard, pero ahora hay un error:
- Antes pasábamos solo el
id. - Ahora, al hacer clic en Agregar al carrito, debemos pasar el objeto
productcompleto.
Guardamos los cambios y probamos el proyecto en el navegador.
Prueba en el Navegador
- Hacemos clic en Agregar al carrito.
- Agregamos dos monitores y una silla.
- Verificamos que los productos se muestran correctamente.
Aunque ahora el carrito almacena la información completa del producto, aún no la mostramos en el template.
Ajustes en ShoppingCart
Aprovechamos los detalles obtenidos desde el store:
- Antes:
Productseguido deliddel producto. - Ahora:
detail.product.name.
Para modificar la cantidad o eliminar productos:
- Debemos pasar un
productId, que ahora se obtiene comodetail.product.id. - La clave para cada iteración en
v-forseráproduct.id.
Guardamos y hacemos otra prueba:
- Agregamos una silla y dos monitores.
- Verificamos que los productos y sus cantidades aparecen correctamente.
- Probamos aumentar la cantidad.
- Eliminamos productos con el botón de la papelera.
Con esto, el carrito de compras ha sido refactorizado correctamente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En la lección anterior hemos corregido todos los warnings reportados por nuestra herramienta de linting. Es importante siempre hacer esto antes de empezar a refactorizar. La idea es que nuestro linter no nos reporte ningún error. Luego que nosotros terminamos de hacer una refactorización, la idea es correr nuevamente el linter y de la misma manera no tenemos que tener ningún error. ¿Qué es lo que vamos a refactorizar? Hemos dicho que queremos mejorar la manera en que presentamos la información del carrito de compras. Por lo tanto, nos vamos a nuestro store y este store define un detalle y este detalle es un arreglo de cart detail. Aquí por cierto, si queremos también podemos cambiar la sintaxis, podemos definir el tipo de esta manera. Details es un arreglo, específicamente de este tipo. Bien, lo que vamos a hacer es actualizar nuestro cart detail, la definición de nuestro cart detail. Un cart detail anteriormente era un productId y un quantity. Ahora un cart detail será un product que es el product que se está agregando y un number, es decir un tipo puede estar compuesto por otro tipo. Si hacemos este cambio esto va a tener una repercusión en todos los lugares donde usamos el tipo cart detail. Por ejemplo en nuestro store comenzamos a ver algunos errores. Anteriormente cada detail de tenía un productId. Ahora si queremos acceder al ID tenemos que poner .id porque cada detalle ya no contiene directamente un productId. Cada detalle contiene un product y ese product tiene un ID. Entonces de esta manera podemos corregir este primer error. Siguiendo la misma idea cada vez que se vaya a agregar un nuevo producto no vamos a recibir sólo un product ID. Vamos a recibir un objeto product completamente, ¿sí?. Para poder usar el tipo product aquí, tenemos que importarlo, aquí arriba tenemos un import type, vamos a agregar simplemente aquí Product, ¿sí?. Y cuando vayamos a hacer push, vamos a guardar el product completamente no solo su ID, de tal manera que cuando nos envíe un producto y queramos buscarlo, vamos a iterar sobre todo los detalles y vamos a ir comparando el ID del producto de cada detalle con el ID del producto que nos envían como argumento, ¿si? De esta manera es como vamos a buscar productos. Esta línea la vamos a copiar al método increment y decrement ya que ambos se encargan de hacer búsquedas, ¿si?. En el caso de increment y decrement no necesitamos enviar el producto completamente, basta con enviar solo su ID porque no vamos a registrar un producto nuevo simplemente vamos a aumentar su cantidad o sea que para increment y decrement el ID es suficiente. Para cuando vayamos a eliminar un producto y queramos hacer una búsqueda cada detalle va a contener en vez de un productId un product.id, ¿sí?, estamos actualizando nuestra lógica para deleteProduct. Dicho de otra forma, cuando vayamos a agregar un producto necesitamos el objeto product completamente pero cuando vayamos a eliminar es suficiente el ID, cuando vayamos a incrementar o disminuir la cantidad el productId será suficiente también. Entonces hasta aquí guardamos, sin embargo este no es el único archivo que tenemos que cambiar, estos de aquí siguen recibiendo un productId solamente pero la acción addProduct ha sido modificada para recibir un producto, entonces veamos ¿dónde se está usando addProduct?. AddProduct lo estamos llamando desde nuestro ProductCard, ¿sí? y aquí hay un error. Anteriormente estábamos pasando aquí solo un ID, ahora cuando se haga clic en agregar al carrito tenemos que pasar todo el objeto product, no solo el ID. ¿Sí?, entonces, guardamos y vamos a probar nuestro proyecto en el navegador, le damos clic en agregar al carrito, agregamos dos monitores y una silla y al venir aquí tenemos el producto. Sin embargo, a pesar que nuestro carrito ya tiene información del producto completamente no solo el ID, todavía no estamos usando esa información, nos falta mostrar esos datos en nuestro template. Por lo tanto, nos dirigimos a nuestro ShoppingCart y en nuestro ShoppingCart vamos a aprovechar los detalles que estamos obteniendo a partir del store. Anteriormente teníamos Product seguido del ID del producto. Ahora en cambio vamos a tener detail.product.name, ¿sí?. Si queremos disminuir o aumentar la cantidad, o incluso si queremos eliminar el producto, tenemos que pasar un productId. Pero el productId no viene directamente desde detail, sino que el productId será el ID del product. Debido a que ahora guardamos el objeto product en detail. De la misma, manera la clave para identificar a cada iteración de nuestro v-for será product.id. Guardamos, vamos al navegador y hacemos otra prueba. Agregamos una silla y dos monitores y aquí está silla 1, monitor 2. Podemos aumentar la cantidad o podemos decidir no comprar más monitores. Para eliminar también podemos usar directamente este botón del tachito de basura y desaparece.
¿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