Flujo para crear una nueva orden

No se nos debe olvidar el pequeño detalle del estado del contador de carrito de compras, lo usamos con el ‘count’ y ‘setCount’:

lo hay que actualizar su estado también:

const handleCheckout = () => {
    const orderToAdd = {
      date: '01.02.2023',
      products: context.CartProducts,
      totalProducts: context.CartProducts.lenght,
      totalPrice: calculateTotalPrice(context.CartProducts),
    };

    context.setOrder([...context.Order, orderToAdd]);
    context.setCartProducts([]);
    context.setCount(0);
  }

10 de mayo “Día de las madres”, Felicidades a todas aquellas que son mamás.

Hay un error en la API que no me está proporcionando la info y las img. Espero se pueda solucionar.

😮 no sabía lo de flex-1

Hola, programé una clase que permite saber si hay elementos en el array de cartProducts, y si no los hay renderizará algo o no, así logré crear un checkout menu que se siente más dinámico.

className={`${cartProducts.length > 0 ? 'flex' : 'hidden'} (lo que ustedes quieran)`}

Algo que podemos hacer para que el botón se muestre solamente cuando hayan productos en el carrito es verificar el length de cart:

{context.cart.length > 0 ? (
       <button 
      className="w-4/5 h-12 bg-blue-600 text-white hover:bg-green-800 font-medium m-auto my-6 rounded-lg"
      onClick={()=> handleCheckout()}>Checkout</button>
      ) : null }```

Una solución para el error “Uncaught TypeError: context.order is not iterable”… Utilizar ‘Array. isArray(context. order)’ para verificar si context order es un arreglo y si lo es; podremos utilizar el operador spread para agregar ‘orderToAdd’ al arreglo existente.

const handleCheckout = () => {
      const orderToAdd = {
         data: '01.02.2023',
         products: context.cartProducts,
         totProducts: context.cartProducts.length,
         totalPrice: totalPrice(context.cartProducts)
      }

      if (Array.isArray(context.order)) {
         context.setOrder([...context.order, orderToAdd])
      } else {
         context.setOrder(orderToAdd)
      }

      context.setCartProducts([])
   }

Para que el carrito de compras disminuya si borras productos o al darle al nuevo boton de check order solo cambie un poco una linea de codigo de ShoppingCartIcon que esta en el componente Navbar

Codigo anterior

<li className='flex justify-center item-center'>
                    <ShoppingCartIcon className="h-6 w-6 text-black"/> 
                    <div className='flex items-center mx-1'>{context.count}</div>
                </li>

Codigo con la modificacion

<li className='flex justify-center item-center'>
                    <ShoppingCartIcon className="h-6 w-6 text-black"/> 
                    <div className='flex items-center mx-1'>{context.cartProducts.length}</div>
                </li>

Para ocultar nuestro scrollbar con tailwind podemos añadir lo siguiente a nuestro archivo principal de css:

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer utilities {
    @variants responsive {
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }

      /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
      }
    }
}

 
Y luego simplemente añadimos la clase no-scrollbar a nuestro elemento:

<div className="mt-7 flex-auto overflow-y-scroll no-scrollbar">
	{isCheckoutSideMenuOpen ? (
		cart.map((product) => (
			<OrderCard key={product.id} id={product.id} title={product.title} imageURL={product.images[0]} />
		))
	) : null}
</div>

Aporto mi versión de handleCheckout desestructurando context y usando typescript.

const handleCheckout = () => {
    if (!context) {
      return; // Asegurarse de que context no sea nulo antes de usarlo
    }
    const { cartProduct, setOrder, setCartProduct, setCount } = context

    const orderToAdd = {
      date: '01.02.2023',
      products: cartProduct,
      totalProducts: cartProduct.length,
      totalPrice: totalPrice(cartProduct? cartProduct: []),
    }
    setOrder([...context.order, orderToAdd])
    setCartProduct([])
    setCount(0)
  }

Mi solucion al bug que solo agregaba numeros al icono del cart mas no lo eliminaba

  // CALCULAR EL SHOPPING BAG
  const calculateItems = (items) => {
    if (items === "add") {
      context.setCartProducts([...context.cart]);
    } else if (items === "remove") {
      if (context.cart.length > 0) {
        const updateCart = context.cart.slice(0, -1);
        context.setCartProducts(updateCart);
      }
    }
  };```