Otra alternativa es usar reduce, así:
return products.reduce((sum, product) => sum + product.price)
Introducción
Construye una tienda online con React
Enrutamiento y estructura base
Instalación de React con Vite y TailwindCSS
Análisis de rutas y componentes en React
Enrutamiento con React Router DOM
Componente Navbar
Componente de Layout
Componente de Card
Consumiendo la FakeStore API para pintar cards
Manejo de estado global con Context
Contexto global de la aplicación
Contador de productos en el carrito
Abriendo el detalle de cada producto
Reto: heroicons con TailwindCSS
Maquetando el ProductDetail
Mostrando productos en ProductDetail
Carrito de Compras
Agregando productos al carrito
SideMenu del carrito de compras
Componente OrderCard
Evitando productos duplicados en el carrito
Eliminar productos del carrito
Suma total de productos en el carrito
Checkout y Órdenes de Compra
Flujo para crear una nueva orden
Checkout de productos en el carrito
Página de MyOrders: lista de órdenes
Página de MyOrder: órden individual
Reto: órdenes de compra con TailwindCSS
Filtrando productos desde el frontend
Buscador de productos
Filtrando títulos con JavaScript
Filtrando categorías con JavaScript
Corrigiendo bugs de la aplicación
Próximos pasos
Deploy de React en Netlify
¿Preparada o preparado para un Laboratorio de React?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 21
Preguntas 2
Otra alternativa es usar reduce, así:
return products.reduce((sum, product) => sum + product.price)
yo cree un custom hook que se encarga de manejar todo lo relacionado con el carrito de compra
import { useState } from 'react'
export const useShoppingCart = () => {
const [cart, setCart] = useState([])
const [totalQuantity, setTotalQuantity] = useState(0)
const [totalPrince, setTotalPrince] = useState(0)
const [isCheckoutSideMenuOpen, setIsCheckoutSideMenuOpen] = useState(false)
//Funciones que se encargan de abrir y cerrar el menu laterial de las ordenes
const openCheckoutSideMenu = () => setIsCheckoutSideMenuOpen(true)
const closeCheckoutSideMenu = () => setIsCheckoutSideMenuOpen(false)
//Agrega un producto al carrito, y si ya existe aumenta la cantidad y suma los productos
const addProduct = payload => {
const productIndex = cart.findIndex(product => product.id === payload.id)
let newCart = []
if (productIndex >= 0) {
newCart = [...cart]
newCart[productIndex].quantity++
newCart[productIndex].price = payload.price + newCart[productIndex].price
} else {
newCart = [...cart, { ...payload, quantity: 1 }]
}
setCart(newCart)
getTotalInfo(newCart)
openCheckoutSideMenu()
}
const deleteProduct = (id) => {
console.log(id)
const newCart = cart.filter(product => product.id !== id)
setCart(newCart)
}
const showCartList = () => {
return cart
}
const getTotalQuantity = (data) => {
const quantity = data.reduce((total, product) => total + product.quantity, 0)
setTotalQuantity(quantity)
}
const getTotalPrice = (data) => {
const price = data.reduce((total, product) => total + product.price, 0)
setTotalPrince(price)
}
const getTotalInfo = (data) => {
getTotalQuantity(data)
getTotalPrice(data)
}
return {
cart,
addProduct,
deleteProduct,
showCartList,
totalQuantity,
totalPrince,
isCheckoutSideMenuOpen,
openCheckoutSideMenu,
closeCheckoutSideMenu
}
}
Esta fue mi solucion:
Hola a todos! les comparto como integré la funcionalidad de añadir más cantidades de productos al carrito, además de calcular el total de cada producto dependiendo de su cantidad. También se encuentran ordenados alfabéticamente para evitar que al darle click se muevan de su puesto:
Bienvenidos a ver el código en el repositorio 😄:
GitHub Repository - andrescaro16 - React-Vite-Ecommerce
Cualquier oportunidad de mejora se agradece! 🤠
const totalPrice = (array) => {
let total = 0
let prices = array.map(product => product.price)
prices.forEach(price => total += price)
return total
}
Hola comunidad! Preparé un Order Card pero con otras funcionalidades como pueden ver en la imagen. Se puede aumentar y disminuir la cantidad de un producto, hice cambios en el contexto y trate de dejar un diseño bonito para el componente (me tomó horas, soy principiante en Tailwind y CSS). Les dejo mis apuntes, el código y el paso a paso hecho en Notion. Espero les sea de utilidad.
Link aquí:
https://bg99astro.notion.site/Order-Card-641bb8875a3e47fca133b2dceae40b84
Mi solucion:
const accumulate = (acc, value ) => acc + value.price
export const totalPrice = (products) => {
return products.reduce(accumulate, 0)
}
por si quieren aprender mas de reduce les dejo este link
https://youtu.be/tP8JiVUiyDo?t=1070
Antes de ver el resto de la clase:
export const calculateTotalPrice = (products) => {
return products.reduce((total, product) => {
return total + product.price
}, 0)
}
Yo lo hice con el método de array “reduce” :
export const totalPrice = (products) =>{
return products.reduce((acc, product) => acc + product.price, 0);
}
En clases anteriores me dio por hacer esta funcion, tengan en cuenta de que no me esperaba esta clase:
const getTotal = () => {
if (cartProducts.length != 0) {
return (
<p className="font-medium text-xl">
{
cartProducts
.map(product => product.price)
.reduce((total, price) => total + price)
}
</p>
)
}
}
export const sumPriceAllItems = (items, initialValue = 0) => {
return items.reduce((acc, item) => acc + item.price, initialValue )
}
Asi vamos…
/*
* This function calculates total price of a new order
* @params {Array} products cartProducts: Array of Objects
* @return {number} Total price
*/
export const totalPrice = (productList) => {
const listPrices = productList.map( product => product.price)
return sumArray(listPrices)
}
function sumArray(arr){
return arr.reduce( (total, currentValue) => total + currentValue, 0)
}
import { IProduct } from '@/interfaces';
/**
* Calculate the total price of a list of products and return the result
* in currency format.
*
* @param {IProduct[]} products - The list of products to sum.
* @param {string} [currency='USD'] - The currency in which the result will be displayed. Default is 'USD'.
* @returns {string} - The total in currency format.
*/
export const totalPrice = (
products: IProduct[],
currency: string = 'USD'
): string => {
const total = products.reduce(
(total: number, element: IProduct) => total + Number(element.price),
0
);
const formatter = new Intl.NumberFormat(undefined, {
style: 'currency',
currency: currency,
});
return formatter.format(total);
};
Mi alternativa
const calcTotal = (items) => {
let total = 0;
items.map((item) => (
total = total + (item.price * item.quantity)
))
context.setTotalAmmount(total);
}
Mi solución:
export const totalPrice = shoppingCart => {
const initialValue = 0
return shoppingCart.reduce(
(accumulator, product) => accumulator + product.price * product.count,
initialValue,
)
}
Bueno, en mi caso decidí hacer la fucnion para obtener el valor total en el context, agrupado cerca de donde definí el estado de cartItems
.
Decidí hacerlo así porque me pareció apropiado ya que es en el mismo contexto donde tengo la información de los productos.
.
No estoy muy seguro de que tipo de cosas meter en utils. He visto ese archivo en otras partes pero no lo he usado personalmente
.
Si no estuviera usando la estrategia de hooks sin usar context, el estado y las funciones para agregar y quitar productos del carrito y esto de sumar el total irían dentro de el hook useShoppingCart
La forma mas larga de hacerlo con un for.
let sum = 0
for(let i = 0; i < products.length; i++){
const product = products[i]
const suma = sum += product.price
}
Buenas si usan reduce, es necesario setear un valor inicial, ya que al cargar por 1 vez la pagina el carrito no tendra elementos y nos tira un error.
/**
* This function allows to calculate the price of a new order
* @param {Array} products
* @returns Total Price
*/
export const GetTotalPrice = (products) =>
products.reduce((sum, product) => {
return sum + product.price;
}, 0);
genial 😊
Con base a los comentarios de los pares: Sandro y Humberto, le pregunté a la IA y me sugirió este código para utiles/index.js:
export const totalPrice = products => products.reduce((sum, {price}) => sum + price, 0);
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.