You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
0 Hrs
45 Min
51 Seg

Suma total de productos en el carrito

20/31
Resources

How to add the prices of products in a shopping cart?

Let's imagine that we are browsing an e-commerce site, filling our shopping cart with products. When it's time to checkout, we want to know the total price of our items. In this context, it is essential to create a function that adds up the prices of all the products in our cart. This function must be versatile enough to be used in different parts of our application, such as in the CheckoutSiteMini and MyOrder components.

How to create a function to calculate the total price?

To achieve this, we can follow a simple but effective approach. We propose to create a global function that is able to interpret and sum the product prices from any part of the application where it is needed.

  1. Environment setup:

    • Create a folder named Utils in your project.
    • Inside this folder, create a file called index.js where the function will reside.
  2. Creating the totalPrice function:

    • We export the function as a constant from index.js:
    export const totalPrice = (products) => { let sum = 0; products.forEach(product => { sum += product.price; }); return sum;};
  3. Using the totalPrice function:

    • Import the function into your component, for example, in CheckoutSiteMini:
    import { totalPrice } from './utils';
    • Call the function inside the component to calculate the total and display it in the user interface.

How to document the function to improve its understanding?

A good practice when developing functions is to document well the parameters and the expected result.

  • Descriptive comments: Explain what each part of the function does and the type of data it handles.
    /** * Calculate the total price of a new order * @param {Array} products - List of products in the cart * @returns {Number} Total price of the products */

How to integrate the function in the user interface?

To display the total in our CheckoutSiteMini component, follow these steps:

  1. Front-end implementation:

    • Add a new div element where the price total will be displayed.
    • Use CSS classes to align and style the text.
    <div className="footer">
         <p>
              <span>Total:</span>
             <span>{totalPrice(context.cardProducts)}</span>
         </p>
      </div>
  2. Styling:

    • Make sure the layout is consistent and clear, using properties for proper spacing and prominent typography.

How to validate and debug the totalPrice function?

After integrating the function, it is essential to verify its correct operation.

  • Verification:
    • Add and remove products from the cart and verify that the total is updated correctly.
    • Perform unit tests to ensure that the function delivers the expected results with different data sets.

The path to robust code is through innovation and continuous improvement. Share your experiences and alternative approaches to implementing this functionality and always look for new ways to optimize processes in your application. Stay motivated to learn and apply new techniques in your next project.

Contributions 52

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

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

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! 🤠

Esta fue mi solucion:

const totalPrice = (array) => {
    let total = 0
    let prices = array.map(product => product.price)
    prices.forEach(price => total += price)
    return total
}
El comentario que usa la profesora en la función *totalPrice* es un estándar llamado JSDoc, se los recomiendo si quieren tener su código ordenado y además ayuda al IDE (VSCode o PHPStorm) a mejorar las sugerencias.

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

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

Vamos bien ![](https://static.platzi.com/media/user_upload/image-286da357-74ab-4178-8a64-7ca57faa2a13.jpg)
me tomo varias horas ver como lograba que se agregara el valor de quantity a la información del cartProducts y visualizar tanto el total de un solo producto como del total gloval, ya que le agregé un input number para poder modificar la cantidad de productos, pero luego de tanto esfuerzo acá esta el resultado 😊😎. ![]()![]()![]()![]()![](https://static.platzi.com/media/user_upload/image-26a4bba5-ff6a-4f44-8832-b15d9c27ed3d.jpg)
```js /** * This function calculates Total price of a new order * @param {Array} products * @returns {number} Total price */ export const TotalPrice = (products) => products.reduce((sum, product) => sum + product.price, 0); ```

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);
}
Curiosa la imagen de 'generic fresh chips', no sabia que asi se veian una papas genericas
Yo solucione el algoritmo de calcular el total a partir de reduce `export const totalPrice = (products) => {    const prices = products.map((product) => product.price);    return prices.reduce((productA, productB) => productA + productB, 0);};` ![](https://static.platzi.com/media/user_upload/totalITems-cf77a29f-f410-4f5c-8457-8e285b79f9d5.jpg)
Una locura este curso, hasta ahora se convirtió en mi favorito, se siente tan bien poder crear estas cosas tan fácilmente y lo mejor poder entender los conceptos rápidamente. ![](https://static.platzi.com/media/user_upload/image-b4c6856b-babb-4b3c-8f4e-2dc4ffcbba23.jpg)
Mi solucion: ```js const totalOrder = useMemo( () => cart.reduce((prev, product) => prev + product.price, 0), [cart], ); ```
```js const totalOrder = useMemo( () => cart.reduce((prev, product) => prev + product.price, 0), [cart], ); ```const totalOrder = useMemo( () => cart.reduce((prev, product) => prev + product.price, 0), \[cart], );
`const totalOrder = useMemo(` ` () => cart.reduce((prev, product) => prev + product.price, 0),` ` [cart],` `);`
Tambien puedes usar Reduce de la siguiente forma:\                        ${context.cartBuy.reduce((acc, product) => acc + product.price, 0)}                    \ ```js ${context.cartBuy.reduce((acc, product) => acc + product.price, 0)} ```
Mi solución: ```jsx const totalPrice = (products) => products.reduce((sum, product) => sum + product.price, 0); ```
![](https://static.platzi.com/media/user_upload/image-aaa36ac0-2346-4228-aaa9-64b8b50a830e.jpg) con typeScript no necesitaria comentarios
Otra alternativa const suma = context.cartProducts.map(p=>(p.price    )).reduce((resultadoAnterior, resultadoActual) => {        return resultadoAnterior + resultadoActual;      }, 0);    console.log(suma)
Aqui les dejo otra alternativa: **CheckoutSideMenu** `Total:                     $ { totalPrice(context.cartProducts.map(product => (product.price))) }` **Utils** `export const totalPrice = (priceArray) => {    return priceArray.reduce( (total, price) => total + price, 0);}`
```js export const totalPrice = (products) => { const total = products.reduce((sum, product) => sum + product.price, 0); return parseFloat(total.toFixed(2)); } ```
Yo lo hice desde el mismo CheckoutSideMenu ![](https://static.platzi.com/media/user_upload/image-4d76b712-8d0e-4eb6-bb7c-2e9c949b38f5.jpg)
```js const totalPrice = (shoppingCart) => { let precioTotal = 0; shoppingCart.forEach(product => { precioTotal += product.price; }); return precioTotal}; export { totalPrice }; ```

Mi versión…

/**
 * @function totalPrice - Function to calculate the total price of the products in the cart
 * @param {Array} cartProducts - Array of objects with the products added to the cart
 * @returns {Number} - The total price of the products in the cart
 */

export const totalPrice = (cartProducts) => {
  return cartProducts.reduce((acc, product) => acc + product.price, 0)
}
la función para sumar el precio de los productos dentro del carrito de compras, lo realicé con el método reduce() ```js export const totalPriceProducts = (products) => { return products.reduce((sum,product) => sum += product.price, 0) } ```
export *const* totalPrice = (*products*) *=>*{  return products.reduce((*acc*, {*price*})*=>*{    return acc + price;  }, 0)}
Realizando suma total -saludos ![](https://static.platzi.com/media/user_upload/imagen-8deea723-362c-4dd5-a3ad-595e1c510f39.jpg)![](https://static.platzi.com/media/user_upload/imagen-8a6de169-78fb-4651-859e-aed846345ab0.jpg)
\* @param {Array} products: Array of Object \* @returns {number} TotalPrice: number \*/export const totalsPrice = (*products*) => { if (products.length <= 0) return 0 return products.reduce((*sum*, *prod*) => sum + prod.price, 0);}
yo utilicé el contexto para obtener el carrito y luego utilice .reduce para calcular la suma total y retornarla ```js import { useContext } from 'react' import { ShoppingCartContext } from '../Context' export const TotalPrice = () => { const { shoppingCart } = useContext(ShoppingCartContext) const initialValue = 0 const getSum = shoppingCart.reduce((total, current) => total + current.price, initialValue) return getSum } ```
```js //totalPrice.ts import { Items } from "../Global/globalConst"; export const totalPrice = (products: Array<Items>): number => { let sum: number = 0; products.forEach(product => { sum += product.price }); return sum; } ```*//checkOutSideMenu.tsx*import { useShoppingContext } from '../../Context/Context';import { XMarkIcon } from '@heroicons/react/24/solid';import { OrderCard } from '../OrderCard/OrderCard';import { Items } from '../../Global/globalConst';import { totalPrice } from '../../utils/totalPrice';import './checkOutSideMenu.css'; export *const* CheckOutSideMenu = (): JSX.Element => {     *const* { isCheckoutSideMenuOpen, closeCheckOutMenu, cartProducts, setCartProducts } = useShoppingContext();     *const* closeCheckOutModal = () => {        closeCheckOutMenu();    }     *const* handleDelete = (productCart: Items): void => {        *const* filteredProducts = cartProducts.filter(product => product.id != productCart.id)        setCartProducts(filteredProducts)    }     *return* (        \<aside            className={`${isCheckoutSideMenuOpen ? 'checkout-side-menu flex flex-col fixed right-0 border border-black  rounded-lg bg-white' : 'hidden'}`}        >            \
                \

My Order\

                \
                    \<XMarkIcon className='h-6 w-6 cursor-pointer' onClick={closeCheckOutModal} />                \
            \
            \
                {cartProducts.map((product) =>                    \<OrderCard                        key={product.id}                        {...product}                        handleDelete={handleDelete}                    />                )}            \
            \
                \

                    \Total:\                    \${totalPrice(cartProducts).toFixed(2)}\                \

            \
        \</aside>    )} *//totalPrice.ts*import { Items } from "../Global/globalConst"; export *const* totalPrice = (products: Array\<Items>): number => {    *let* sum: number = 0;     products.forEach(product => {        sum += product.price    });     *return* sum;}```js //checkOutSideMenu.tsx import { useShoppingContext } from '../../Context/Context'; import { XMarkIcon } from '@heroicons/react/24/solid'; import { OrderCard } from '../OrderCard/OrderCard'; import { Items } from '../../Global/globalConst'; import { totalPrice } from '../../utils/totalPrice'; import './checkOutSideMenu.css'; export const CheckOutSideMenu = (): JSX.Element => { const { isCheckoutSideMenuOpen, closeCheckOutMenu, cartProducts, setCartProducts } = useShoppingContext(); const closeCheckOutModal = () => { closeCheckOutMenu(); } const handleDelete = (productCart: Items): void => { const filteredProducts = cartProducts.filter(product => product.id != productCart.id) setCartProducts(filteredProducts) } return ( <aside className={`${isCheckoutSideMenuOpen ? 'checkout-side-menu flex flex-col fixed right-0 border border-black rounded-lg bg-white' : 'hidden'}`} >

My Order

<XMarkIcon className='h-6 w-6 cursor-pointer' onClick={closeCheckOutModal} />
{cartProducts.map((product) => <OrderCard key={product.id} {...product} handleDelete={handleDelete} /> )}

Total: ${totalPrice(cartProducts).toFixed(2)}

</aside> ) } ```

Mi solucion fue agregar una propiedad totalQuantityPrice que se inicia con el precio del producto. Al agregar un producto que ya está en el carrito se multiplica el precio del producto por quantity la cantidad del producto en el carrito y luego para obtener el precio total de los productos en el carrito agregue un constante en el contexto que utiliza la funcion reduce(se utiliza para reducir un array a un solo valor) para sumar el precio de todo el carrito

const addToCart = (product) => {
    // Encuentra la posición del producto actual en el carrito según su 'id'.
    const productInCart = cart.findIndex(item => item.id === product.id);

    // Si el producto ya está en el carrito.
    if (productInCart >= 0) {
        // Crea una copia profunda del carrito actual.
        const newCart = structuredClone(cart);

        // Incrementa la cantidad del producto en el nuevo carrito.
        newCart[productInCart].quantity += 1;

        // Actualiza el precio total multiplicando el precio por la nueva cantidad.
        newCart[productInCart].totalQuantityPrice = newCart[productInCart].price * newCart[productInCart].quantity;

        // Actualiza el estado del carrito con el nuevo carrito.
        setCart(newCart);
    } else {
        // Si el producto no está en el carrito, lo agrega como un nuevo elemento.
        setCart(prevState => ([
            ...prevState,
            {
                ...product,
                quantity: 1,
                totalQuantityPrice: product.price
            }
        ]));
    }
}

// Elimina una unidad de un producto dado del carrito.
const removeOneFromCart = (product) => {
    const productInCart = cart.findIndex(item => item.id === product.id);
    if (productInCart >= 0) {
        const newCart = structuredClone(cart);

        // Si la cantidad del producto no es 1, reduce la cantidad en el nuevo carrito.
        if (newCart[productInCart].quantity !== 1) {
            newCart[productInCart].quantity -= 1;

            // Actualiza el precio total multiplicando el precio por la nueva cantidad.
            newCart[productInCart].totalQuantityPrice = newCart[productInCart].price * newCart[productInCart].quantity;

            setCart(newCart);
        }
    }
}
![]()![](file:///home/giovanny/Im%C3%A1genes/Capturas%20de%20pantalla/Captura%20desde%202023-10-27%2008-02-34.png)
Esta fue mi solución al reto: ```````js export const totalPrice = (products) => { const sum = products.map((item) => item.price); let total = sum.reduce((a, b) => { return a + b; }, 0); return total;}; ``````js ```````
De manera resumida y corta: ```js /** * This function returns the new order's total price * @param {Array} products cartProduct: Array of Objects * @returns {number} Total price */ export const totalPrice = (products) => products.reduce((sum, element) => sum + element.price, 0); ```*/\*\* \* This function returns the new order's total price \* @param {Array} products cartProduct: Array of Objects \* @returns {number} Total price \*/*export const totalPrice = (*products*) =>  *products*.reduce((*sum*, *element*) => *sum* + *element*.price, 0);
Cree el archivo utils, cree estas funciones, las que me calculan el total neto, el tax o el iva que en chile es el 19% y que me formateara el precio con punto según sus cifras, les comparto*export* const *totalPrice* =** (*products*)** =>  *products.reduce*((*accumulator*, *product*)** =>** accumulator** + *product.price*,** 0); *export* const *totalTax* =** (*products*)** => *Math.round*(*totalPrice*(products)** \*** 0.19); *export* const *priceFormat* =** (*price*)** =>** {  *console.log*(price); **  if** (!price)** {    *return* 0;**  }   *return price.toString*()*.replace*(/*\B*(?=(*\d*{3})+(?!*\d*))/g,** ".");}; ```js export const totalPrice = (products) => products.reduce((accumulator, product) => accumulator + product.price, 0); export const totalTax = (products) => Math.round(totalPrice(products) * 0.19); export const priceFormat = (price) => { console.log(price); if (!price) { return 0; } return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }; ```Adicional a eso, agregue estos valores al carrito de compra más un boton de pago
`const totalPrice = () =>{    const context = useContext(ContextShoppingCart);    let sum = 0;` `    for (let i = 0; i < context.cartProducts.length; i++) {        const price = context.cartProducts[i].price;        sum = sum + price;    }    return sum.toFixed(2);}` mi funcion :)

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 😊