Suma total de productos en el carrito

Curso de React.js con Vite.js y TailwindCSS

Contenido del curso

Introducción

1
Construye un ecommerce completo con React
04:59 min

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

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:34

Suma total de productos en el carrito

Curso de React.js con Vite.js y TailwindCSS

Clase 20 de 31

Clase 20 / 31

Recursos

¿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.

Andres Eduardo Maneiro Antunez

Hace 3 años

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

Hace 3 años

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

Comentarios (54)54 comentarios

SANDRO SIMON

Humberto Asca

Rubén Ernesto Aragón Gil

Andrés Julian Caro Restrepo

Jhon Eduard Bocanegra Ortiz

Juan Mercado

Abraham Gonzalez

Bryan Enrique Garay Benavidez

Jose Pabon

Amanda Limón

Emilio Nicolás Mendoza Patti

Daniel Morales

Julián Muñoz

Sebastián Andrés Sanhueza Tapia

Hace 2 años

William Armando Forero Bermeo

Humberto Cruz

Kengya Moncada

Miguel Angel Reyes Moreno

Gianluca Enzo Procopio

Andres Felipe Camacho Rodriguez

Irving Juárez

Fernando de Leon Gil

Andres Felipe Bravo Hernandez

Introducción

Construye un ecommerce completo con React

Enrutamiento y estructura base

Instalación de Vite y Tailwind en React

Análisis de rutas y componentes en React

Rutas en React con React Router Dom

Componente Navbar

Componente Layout para todas las vistas

Componente de Card

Consumiendo la FakeStore API para pintar cards

Manejo de estado global con Context

Estado global con Context en React

Contador de productos en el carrito

Cómo crear un side menu con React y CSS

Heroicons en React: íconos sin emojis

Abrir y cerrar el Product Detail con Context

Mostrar info de producto al hacer clic

Carrito de Compras

Agregando productos al carrito

Checkout Side Menu con Context API

Construye el componente OrderCard en React

Evitando productos duplicados en el carrito

Eliminar productos del carrito con filter

Suma total de productos en el carrito

Checkout y Órdenes de Compra

Flujo para crear una nueva orden

Visualizar la última orden en My Order

Página de MyOrders: lista de órdenes

Rutas dinámicas con index en React

Estiliza la OrdersCard con Tailwind CSS

Filtrando productos desde el frontend

Buscador de productos con useContext

Filtrado de productos por título en React

Filtrado de productos por categoría en React

Bugs finales en e-commerce React

Próximos pasos

Deploy de e-commerce con Netlify y GitHub

Qué sigue después de tu e-commerce en React

Suma total de productos en el carrito