Construir un carrito de compras funcional requiere conectar datos dinámicos con la interfaz y, sobre todo, calcular el total de los productos agregados de forma automática. Aquí se explica paso a paso cómo vincular la información de cada producto al componente visual y cómo usar el método reduce de JavaScript para sumar precios en tiempo real.
¿Cómo conectar los datos del producto al componente order item?
El primer paso es hacer que el componente OrderItem reciba la información de cada producto como parámetro. Para ello, se le pasa un prop llamado product [01:05] y se reemplazan los valores estáticos por las propiedades reales del objeto:
- Título: se usa
product.title para mostrar el nombre del producto.
- Precio: se accede a
product.price para presentar el costo.
- Imagen: se utiliza
product.images[0], tomando el primer elemento del arreglo de imágenes que provee la API.
El atributo alt de la imagen también se conecta al título del producto para mejorar la accesibilidad. Con estos cambios guardados, cada elemento agregado al carrito aparece con su imagen, nombre y precio correspondientes.
¿Qué hacer cuando la aplicación se rompe por un error?
Al probar la aplicación, puede ocurrir que se rompa y deje de renderizar [02:27]. En este punto, el inspector del navegador y la consola son herramientas fundamentales. El error indicaba que no podía leer la posición cero de un valor indefinido, y la referencia apuntaba exactamente al archivo y línea del problema.
El detalle era sencillo: la propiedad correcta es images (con "s" al final), no image. Como se menciona durante la explicación, los errores son nuestros amigos y la consola nos dice exactamente dónde buscar [02:50]. Corregido ese typo, los productos se muestran correctamente en el carrito.
¿Cómo sumar los precios del carrito con reduce?
Una vez que los productos se visualizan bien, falta mostrar el total de la compra. Para lograrlo se crea una función llamada sumTotal dentro del componente MyOrder [03:30].
El método reduce permite iterar sobre un arreglo y acumular un resultado. Se necesitan dos piezas:
- Un reducer: una función que recibe un accumulator (el valor acumulado) y un currentValue (el elemento actual del arreglo). La lógica es
accumulator + currentValue.price, porque de cada producto solo interesa el precio [04:15].
- La invocación de reduce: se aplica sobre
state.card pasándole el reducer y un valor inicial de cero.
El código luce así:
javascript
const sumTotal = () => {
const reducer = (accumulator, currentValue) => {
return accumulator + currentValue.price;
};
const sum = state.card.reduce(reducer, 0);
return sum;
};
Esta función se ejecuta cada vez que se renderiza el componente, recorriendo todos los elementos del carrito y devolviendo la suma de sus precios.
¿Dónde se muestra el resultado del cálculo?
El valor que antes era estático se reemplaza por la llamada a sumTotal() [05:25]. De esta manera, cada vez que se agrega un producto, la función recorre el arreglo actualizado y muestra el nuevo total en pantalla.
Al probarlo se puede verificar que los números cuadran: si un producto cuesta determinado monto y se agrega otro, la suma refleja el acumulado correcto [05:50].
¿Por qué es importante entender reduce para el carrito?
El método reduce es una de las herramientas más versátiles de JavaScript para trabajar con arreglos. A diferencia de map o forEach, su propósito es condensar múltiples valores en uno solo, lo que lo hace ideal para cálculos como totales, promedios o conteos.
Algunos puntos a considerar:
- La función creada aquí vive dentro del componente, pero puede convertirse en un hook personalizado o en una utilería si se necesita reutilizar en otros lugares de la aplicación.
- El valor inicial (en este caso
0) es fundamental para evitar errores cuando el carrito está vacío.
- Acceder a
currentValue.price dentro del reducer permite enfocarse únicamente en el dato relevante de cada objeto.
Con el total funcionando, ya se tiene un carrito que muestra productos con imagen, título, precio individual y precio acumulado. El siguiente paso natural es implementar la opción de remover elementos del carrito para completar la experiencia de compra.
