Eliminar productos del carrito

Yo le quise poner un contador de unidades, para que pueda comprar mas de uno, y cuando guardo el producto del carrito le agrego una propiedad units al objeto para saber cuantas unidades cquiere comprar

aca parte del codigo :

 const sumOrRestItem =(id, action)=>{
    const newProducts = [...cartProducts]
    const itemIndex = newProducts.findIndex(product => product.id === id)
    if(action=='minus'){
      newProducts[itemIndex].units--
      setCartProducts(newProducts)
    }
    else if(action=='plus'){
      newProducts[itemIndex].units++
      setCartProducts(newProducts)
    }
    if(newProducts[itemIndex].units == 0){
      deleteItem(id)
    }
  }

Para mostrar la cantidad de items del carrito en NavBar, decidí eliminar del context

  const [count, setCount] = useState(0);

y simplemente reemplazarlo por

 { context.productsInCart.length }

del mismo context. De esta forma, no tengo que aumentar o disminuir la cantidad cada vez que se agrega o elimina un producto del carrito

Le agregue un poco para que cuando se elimine un producto el contador del carrito disminuya tambien:

const deleteProduct = (id) =>{
    const filteredProducts = context.cartProducts.filter(product => product.id != id)
    context.setCartProducts(filteredProducts)
    context.setCounter(context.counter - 1)
  }

Agregue estas clases adicionales para hacer la grilla responsive en el div que contiene todas las Cards:

'grid-cols-auto justify-items-center sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'

Le agregue titulos a las columnas, botones de agregar y reducir cantidad de los items y una columna de subtotal que se actualiza junto a la cantidad.

Les comparto el codigo de los metodos usados en el carrito

// ADD PRODUCTS TO CART
    const addProductToCart = (event, item) => {
        event.stopPropagation();
        closeProductDetail();
        closeShoppingCart();
        setCounter(counter + 1);
        const productIndex = cartProducts.findIndex(product => product.id === item.id)
        let newCart = []
        if (productIndex >= 0) {
            newCart = [...cartProducts]
            newCart[productIndex].quantity++
            newCart[productIndex].subtotal = newCart[productIndex].price * newCart[productIndex].quantity
            
        } else {
            newCart = [...cartProducts, { ...item, quantity: 1, subtotal: item.price }]
        }
        setCartProducts(newCart);
    }

    // DELETE PRODUCT OF CART
    const deleteProductOfCart = (id) => {
        const productIndex = cartProducts.findIndex(product => product.id === id);
        const quantity = cartProducts[productIndex].quantity
        const newCart = cartProducts.filter(product => product.id != id);
        setCounter(counter - quantity);
        setCartProducts(newCart);
    }

    // ADD QUANTITY OF ITEM IN CART
    const plusQuantity = (id) => {
        const productIndex = cartProducts.findIndex(product => product.id === id);
        let newCart = [...cartProducts];
        newCart[productIndex].quantity++;
        newCart[productIndex].subtotal = newCart[productIndex].price * newCart[productIndex].quantity
        setCounter(counter + 1);
        setCartProducts(newCart);
    }

    // DECREASE QUANTITY OF ITEM IN CART
    const lessQuantity = (id) => {
        const productIndex = cartProducts.findIndex(product => product.id === id);
        let newCart = cartProducts
        if (newCart[productIndex].quantity > 1) {
            newCart[productIndex].quantity--;
            newCart[productIndex].subtotal = newCart[productIndex].price * newCart[productIndex].quantity
            setCounter(counter - 1);
            setCartProducts(newCart);
        } else {
            alert("La cantidad de este item es 1, debes eliminarlo si ya no lo deseas");
        }
    }

Agregue la cantidad de productos en el titulo del CheckoutSideMenu.jsx

.

<div className="flex justify-between items-center pb-6 px-2">
        <h2 className="font-medium text-xl">My Order 
            <span className="font-normal text-base">({cartProducts.length} {cartProducts.length > 1 ? 'products' : 'product'})</span>
        </h2>
        <XCircleIcon
          className="h-6 w-6 text-gray-500 cursor-pointer hover:text-red-600 transition-all"
          onClick={() => closeCheckoutSideMenu()}
        />
      </div>

Usé otra API, pero igual puede servir, los nombres a veces estan muy largos y no quedaban bien, y cuando son muy cortos, no quedan bien alineados frente al precio en el grid de los productos

Entonces está fue mi solución:

Falto decrementar el valor del contador al eliminar el producto del carrito 😁

Mi contador lo dejé de esta forma

En mi caso hice lo siguiente:

.
Primero, en el componente Card a los objetos del carrito les aumenté la propiedad quantity que por defecto será igual a 1.

addProductToCart(event, { ...data, quantity: 1 })

.
En el componente OrderCard tengo lo siguiente:

import { MinusIcon, PlusIcon } from "@heroicons/react/24/solid";
import { useContext } from "react";
import { ShopiCartContext } from "../../Context";

const OrderCard = ({ product, handleDelete }) => {
  const { id, title, images, price, quantity } = product;
  const { cartProducts, setCartProducts } = useContext(ShopiCartContext);

  const addItem = (id) => {
    const updatedCartProducts = cartProducts.map((product) => {
      if (product.id === id) {
        return { ...product, quantity: product.quantity + 1 };
      }
      return product;
    });

    handleDelete(id);
    setCartProducts(updatedCartProducts);
  };

  const removeItem = (id) => {
    if (quantity === 1) {
      handleDelete(id);
    } else {
      const updatedCartProducts = cartProducts.map((product) => {
        if (product.id === id) {
          return { ...product, quantity: product.quantity - 1 };
        }
        return product;
      });

      handleDelete(id);
      setCartProducts(updatedCartProducts);
    }
  };

  return (
    <div className="flex justify-between item-center mb-3">
      <div className="flex items-center w-full justify-between gap-2">
        <figure className="w-20 h-20">
          <img
            className="w-full h-full rounded-lg object-cover"
            src={images}
            alt={title}
          />
        </figure>
        <div className="flex-grow w-[80px] flex flex-col items-end pr-3">
          <p className="text-lg font-medium text-end">{price * quantity}</p>
          <p className="text-sm font-light text-end">{title}</p>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <MinusIcon
          className="h-4 w-4 text-black cursor-pointer"
          onClick={() => removeItem(id)}
        ></MinusIcon>
        <span className="bg-slate-200 rounded-md">{quantity}</span>
        <PlusIcon
          className="h-4 w-4 text-black cursor-pointer"
          onClick={() => addItem(id)}
        ></PlusIcon>
      </div>
    </div>
  );
};

export default OrderCard;

He creado los iconos correspondientes a disminuir y aumentar la cantidad de un producto. Si al disminuir la cantidad de un ítem llega a 0 lo elimino.
.
El precio que se muestra será igual al precio * la cantidad.
.
Tanto al aumentar como al disminuir la cantidad de un ítem, lo que se hace es obtener un nuevo array con el item con la cantidad modificada updatedCartProducts. Eliminamos el ítem del carrito mediante la función handleDelete(id) y modificamos el carrito con el nuevo array mediante setCartProducts(updatedCartProducts).

const handleDeleteProductCart = (id) =>{
        const products = [...cartProducts]
        products.map((product,index) =>{
            if(product.id === id){
                product.count--;
                if(product.count === 0){
                    products.splice(index,1)
                }
            }
        } );
        setCartProducts(products);
    }

    const sumCountProductCart = (id) =>{
        const products = [...cartProducts]
        products.map((product,index) =>{
            if(product.id === id){
                product.count++;
            }
        } );
        setCartProducts(products);
    }

En mi caso defini la funcion handleDelete dentro del componente OrderCard y no en el CheckoutSideMenu

como agregue cantidades para poder tener varios items del mismo para borrarlos del carrito de navbar usé este code:

const CheckoutSideMenu = () => {
    const { 
        isCheckoutSideMenuOpen,
        closeCheckoutSideMenu, 
        cartProducts, 
        setCartProducts, 
        setCount,
     } = useContext(ShoppingCartContext);

    const handleDelete = (id) => {
        const filteredProducts = cartProducts.filter(product => product.id != id);
        setCount(cartProducts.length - 1)
        setCartProducts(filteredProducts)
    }

Para quitar el siguiente mensaje en el archivo OrderCard/index.jsx:
‘id’ is missing in props validation

Deben instalar propTypes:

npm install --save prop-types

De ahí, pongan el import en la parte superior:

import PropTypes from 'prop-types';

Por último, en seguida de return (todo el código de div), agregan lo siguiente:

OrderCard.propTypes = {
  id: PropTypes.node.isRequired,
  title: PropTypes.node.isRequired,
  imageUrl: PropTypes.node.isRequired,
  price: PropTypes.node.isRequired,
  handleDelete: PropTypes.node.isRequired,
};

Me funcionó a mí a quitar esos mensajes molestos.

Yo hice estas funciones para poder, mostrar los productos sin que se repitan las cards, aumentar, disminuir y eliminar todos los productos de la orden que estamos haciendo

export function MyOrder() {
    const {
        cartProducts,
        setCartProducts,
    } = useContext(ShoppingContext)

    const groupedProducts = [] 

    cartProducts.map(product => {
        const existingProduct = groupedProducts.find(pro => pro.title === product.title)

        if (existingProduct) {
            existingProduct.quantity += 1
        } else {
            groupedProducts.push({ ...product, quantity: 1 })
        }
    })

    const lessProduct = (product) => {
        let newProducts = [...cartProducts]
        let index = newProducts.findIndex(pro => pro.title === product.title)
        newProducts.splice(index, 1)
        setCartProducts(newProducts)
    }

    const plusProduct = (product) => {
        let newProducts = [...cartProducts]
        let index = newProducts.findIndex(pro => pro.title === product.title)
        let newProduct = newProducts.find(pro => pro.title === product.title)
        newProducts.splice(index, 0, newProduct)
        setCartProducts(newProducts)
    }

    const deleteProduct = (product) => {
        const newProducts = cartProducts.filter(pro => pro.title !== product.title)
        setCartProducts(newProducts)
    }

Yo lo hice de otra forma y estoy satisfecho con ella:

const {cartProducts, setCartProducts, setCounter} = useContext(Context)

    const deleteItemsFromCart = (id)=>{
        const newCart = [...cartProducts];
        const itemIndex = newCart.findIndex(item => item.id === id);
        newCart.splice(itemIndex, 1);
        setCartProducts(newCart)
        setCounter(newCart.length)
    }