Componentes CheckoutMenu y OrderCard

En las últimas clases trabajamos con el objetivo de crear un CheckoutMenu. Este componente consiste en un aside que contiene los productos que seleccionamos. Dentro del CheckoutMenu se renderiza un componente hijo que es OrderCard, que sería la card para cada producto seleccionado que queremos comprar.

<aside> 👨🏻‍💻 Segun lo explicado hasta la clase 20 del curso nuestra aplicación permite:

• Abrir el CheckoutMenu y agregar un producto al darle click al ícono de agregar de cada producto.
• Cerrar el CheckoutMenu al darle click al botón de cerrar.
• Eliminar productos del CheckoutMenu .
• Si el producto está marcado se renderiza un ícono de Check en el Card y si se elimina del carrito, se devuelve al PlusIcon.
• Se muestra al usuario la suma del precio de los productos del CheckoutMenu.
• La cantidad de productos en CheckoutMenu que se muestra en el ícono de compra del Navbar se obtiene mediante un estado contador. </aside>

<aside> 💡 Funcionalidades que he agregado o modificado:

• Que el CheckoutMenu se pueda abrir solo dando click al ícono de compra del Navbar.
• Que el CheckoutMenu se pueda cerrar dando click nuevamente al ícono de compra del Navbar o click en el ícono de cerrar dentro del CheckoutMenu.
• Al darle click al ícono de “+” del Card, se agrega el producto al CheckoutMenu y si se le da click de nuevo, se elimina el producto.
• Se agrega la propiedad quantity al objeto cartProducts.
• Se muestra al usuario la cantidad de unidades que comprará de un producto y se añaden dos botones, uno para disminuir y otro para aumentar la cantidad. Cuando la cantidad llega a 0 se elimina el producto del CheckoutMenu.
• Se puede seguir eliminado un producto del CheckoutMenu con el ícono “x”.
• Se muestra al usuario la suma de los productos del CheckoutMenu, pero multiplicado el precio de cada producto por la cantidad de unidades que quiere llevar.
• La cantidad de productos en CheckoutMenu que se muestra en el ícono de compra del Navbar se obtiene mediante el tamaño del estado cartProducts. </aside>

Implementación

1. Preparar los estados de información

2. Cambios inmediatos en el Navbar

3. Cambios en la lógica del Card Component

4. Cambios en el archivo de Utils

5. Actualización de la lógica del CheckoutMenu

6. Recibir toda la información en OrderCard y estilos

El resultado:

<aside> 👨🏻‍💻 Espero te haya servido este tutorial, cualquier pregunta puedes contactarme: [email protected]. Gracias por leer! Te recomiendo leer también: Modales para el Product Detail

</aside>