No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Suma total de productos en el carrito

20/31
Recursos

Aportes 21

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渞educe鈥 :

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>
      )
    } 
  }

Use un reduce, creo que el metodo cumple perfecto para esta tarea.

export const sumPriceAllItems = (items, initialValue = 0) => {
  return items.reduce((acc, item) => acc + item.price, initialValue )
}

Asi vamos鈥

Mi funcion totalprice 馃樇

/*
 * 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);