Cursos Empresas Blog Live Conf Eventos Precios

0:0013:34

Recursos

Resumen

¿Cómo sumar los precios de los productos en un carrito de compras?

Imaginemos que estamos navegando por un e-commerce, llenando nuestro carrito de compras con productos. Cuando llega el momento de pagar, queremos saber el precio total de nuestros artículos. En este contexto, es esencial crear una función que sume los precios de todos los productos en nuestro carrito. Esta función debe ser lo suficientemente versátil para utilizarse en diferentes partes de nuestra aplicación, como en los componentes CheckoutSiteMini y MyOrder.

¿Cómo crear una función para calcular el precio total?

Para lograr esto, podemos seguir un enfoque sencillo pero efectivo. Proponemos crear una función global que sea capaz de interpretar y sumar los precios de los productos desde cualquier parte de la aplicación donde se necesite.

Configuración del entorno:
- Crea una carpeta denominada Utils en tu proyecto.
- Dentro de esta carpeta, crea un archivo llamado index.js donde residirá la función.

Creación de la función totalPrice:

Exportamos la función como una constante desde index.js:

export const totalPrice = (products) => {
    let sum = 0;
    products.forEach(product => {
        sum += product.price;
    });
    return sum;
};

Uso de la función totalPrice:
- Importa la función en tu componente, por ejemplo, en CheckoutSiteMini:
```
import { totalPrice } from './utils';
```
- Llama a la función dentro del componente para calcular el total y muéstralo en la interfaz de usuario.

¿Cómo documentar la función para mejorar su comprensión?

Una buena práctica al desarrollar funciones es documentar bien los parámetros y el resultado esperado.

Comentarios descriptivos: Explica qué hace cada parte de la función y el tipo de datos que maneja.

/**
 * Calcula el precio total de un nuevo pedido.
 * @param {Array} products - Lista de productos en el carrito.
 * @returns {Number} Precio total de los productos.
 */

¿Cómo integrar la función en la interfaz de usuario?

Para visualizar el total en nuestro componente CheckoutSiteMini, sigue estos pasos:

Implementación en el front-end:

Añade un nuevo elemento div donde se mostrará el total del precio.
Usa clases CSS para alinear y estilizar el texto.

<div className="footer">
    <p>
        <span>Total:</span>
        <span>{totalPrice(context.cardProducts)}</span>
    </p>
</div>

Estilización:
- Asegúrate de que el diseño sea consistente y claro, utilizando propiedades para un espaciado adecuado y tipografía destacada.

¿Cómo validar y depurar la función totalPrice?

Después de integrar la función, es fundamental verificar su correcto funcionamiento.

Verificación:
- Agregar y eliminar productos del carrito y verificar que el total se actualiza correctamente.
- Realizar pruebas unitarias para asegurar que la función entrega los resultados esperados con diferentes conjuntos de datos.

El camino hacia un código robusto pasa por la innovación y la mejora continua. Comparte tus experiencias y enfoques alternativos para implementar esta funcionalidad y siempre busca nuevas maneras de optimizar los procesos en tu aplicación. Mantente motivado para aprender y aplicar nuevas técnicas en tu próximo proyecto.

Suma total de productos en el carrito

Curso de React.js con Vite.js y TailwindCSS

Clase 20 de 31

Clase 20 / 31

Comentarios (54)54 comentarios

SANDRO SIMON

Hace 3 años

Otra alternativa es usar reduce, así:

return products.reduce((sum, product) => sum + product.price)

Humberto Asca

Rubén Ernesto Aragón Gil

Me sirve, están muy óptimos los que comparten. Gracias.

Andres Eduardo Maneiro Antunez

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

JOSE FABIAN BONILLA GUZMAN

realice lo mismo xd y en el componente card le dije que si da click en el mas que sume el precio al custom, se considera buena o mala practica

< context.setTotalCart(context.totalCart+newItem.price); 
>

Andrés Julian Caro Restrepo

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

Jhon Eduard Bocanegra Ortiz

Esta fue mi solucion:

Juan Mercado

const totalPrice = (array) => {
    let total = 0
    let prices = array.map(product => product.price)
    prices.forEach(price => total += price)
    return total
}

Abraham Gonzalez

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

Bryan Enrique Garay Benavidez

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

Jose Pabon

Gracias, me ayudo tu aporte.

Amanda Limón

Muy bien explicado todo, me ayudó bastante!!

Emilio Nicolás Mendoza Patti

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

Daniel Morales

Gracias por el aporte, me sirvió mucho para entender el .reduce()

Julián Muñoz

Pregunta sobre el uso de totalPrice ¿No estaría en la renderización llamándolo constantemente?

Sé que tal vez ni se note al ser algo chiquito y que vive cambiando pero ¿Qué onda con eso?

Sebastián Andrés Sanhueza Tapia

Hace 2 años

Vamos bien

William Armando Forero Bermeo

Se ve muy bien Sebas!

Humberto Cruz

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 😊😎.

Kengya Moncada

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

Miguel Angel Reyes Moreno

Antes de ver el resto de la clase:

export const calculateTotalPrice = (products) => {
  return products.reduce((total, product) => {
    return total + product.price
  }, 0)
}

Gianluca Enzo Procopio

Yo lo hice con el método de array "reduce" :

export const totalPrice = (products) =>{
    return products.reduce((acc, product) => acc + product.price, 0);
}

Andres Felipe Camacho Rodriguez

Genial

Irving Juárez

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

Fernando de Leon Gil

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.

Andres Felipe Bravo Hernandez

  const totalOrder = useMemo(
    () => cart.reduce((prev, product) => prev + product.price, 0),
    [cart],
  );

Recursos

Resumen

Suma total de productos en el carrito

Progreso del curso

Introducción

Enrutamiento y estructura base

Manejo de estado global con Context

Carrito de Compras

Checkout y Órdenes de Compra

Filtrando productos desde el frontend

Próximos pasos