¿Cómo añadir productos al carrito de compras?

Cuando un usuario navega por una tienda en línea, es imprescindible poder añadir productos a su carrito de compras. Este proceso requiere una comunicación fluida entre los diferentes componentes de la aplicación, especialmente entre el componente de la lista (donde se muestran los productos) y el componente del carrito de compras. Exploraremos cómo implementar esta funcionalidad utilizando reactividad y comunicación entre componentes padre e hijo.

¿Cómo identificar el componente donde se hace el render de productos?

El componente list component es el encargado de renderizar la lista de productos. Aquí es donde los usuarios podrán ver y seleccionar los elementos que desean añadir a su carrito. Este componente también tiene acceso a otros componentes como AppHeader, que gestiona la interfaz del encabezado.

¿Qué proceso utilizar para almacenar productos seleccionados?

Para almacenar los productos seleccionados, necesitamos crear una señal que funcione como una lista receptora. Esta lista se llenará conforme el usuario seleccione distintos artículos. Además, se manejará un evento add to cart en el que utilizaremos reactividad para actualizar el estado del carrito.

fullscreen
// Actualización de la señal del carrito de compras
function actualizarCarrito(eventoProducto) {
  carrito.update(estadoPrevio => [...estadoPrevio, eventoProducto]);
}

¿Cómo suscribirse al estado del carrito de compras?

Para poder mostrar la cantidad de productos en el carrito, es posible suscribirse al estado de dicha estructura de datos. De esta manera, podemos saber cuántos elementos hay en el carrito en cualquier momento.

fullscreen
<h3>Cantidad en el carrito: {{carrito.length}}</h3>

¿Cómo comunicar el estado del carrito al encabezado?

El encabezado o AppHeader es responsable de mostrar el número de productos en el carrito y detalla su contenido. Para enviar el estado del carrito desde el list component al AppHeader, se utiliza un input que permite recibir parámetros desde un componente padre.

fullscreen
<Input()
  @required
  carrito: Producto[] = [];

¿Cómo renderizar el contenido del carrito en el menú?

En el componente de encabezado, se puede utilizar una directiva como ngFor para renderizar dinámicamente el contenido del carrito en el menú de la aplicación.

fullscreen
<div *ngFor="let product of carrito">
  <p>{{product.title}} - {{product.price}}</p>
</div>

¿Cómo añadir un contador al botón del carrito de compras?

Para mejorar la visualización, es útil añadir un contador sobre el botón del carrito. Este mostrará cuántos artículos hay dentro.

¿Cómo personalizar el diseño del contador?

Utilizando estilos CSS, puedes personalizar cómo se ve el contador. Aquí un ejemplo básico:

fullscreen
<button>
  <svg><!-- Icono carrito --></svg>
  <div class="contador">{{carrito.length}}</div>
</button>

fullscreen
.contador {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #000;
  color: #FFF;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 10px;
}

Reto para mejorar la aplicación

Además de mostrar el número de elementos en el carrito, puedes mejorar la visualización detalla de los productos incluidos. ¡Sé creativo! Añade las imágenes o precios de los productos y calcula el total de todos los elementos del carrito. Este tipo de características no solo mejorarán la experiencia del usuario sino también tu habilidad para manejar datos dinámicos en interfaces.

¡Ánimo! Con estas mejoras, tu aplicación de compras online será mucho más interactiva y funcional.