Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
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.
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.
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:
details
es un arreglo, específicamente de este tipo.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
.
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:
productId
, recibiremos un objeto product
completo.product
, debemos importarlo usando import type
y agregando Product
.product
completo, no solo su ID.id
del product
de cada detalle con el id
del 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:
product
completo.id
, ya que solo se aumentará o disminuirá la cantidad.Para eliminar un producto:
productId
, buscaremos por product.id
.deleteProduct
.product
completo.id
.productId
es suficiente.ProductCard
Debemos revisar dónde se usa addProduct
. Se llama desde ProductCard
, pero ahora hay un error:
id
.product
completo.Guardamos los cambios y probamos el proyecto en el navegador.
Aunque ahora el carrito almacena la información completa del producto, aún no la mostramos en el template.
ShoppingCart
Aprovechamos los detalles obtenidos desde el store:
Product
seguido del id
del producto.detail.product.name
.Para modificar la cantidad o eliminar productos:
productId
, que ahora se obtiene como detail.product.id
.v-for
será product.id
.Guardamos y hacemos otra prueba:
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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.