No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Flujo para crear una nueva orden

21/31
Recursos

Aportes 15

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

No se nos debe olvidar el peque帽o detalle del estado del contador de carrito de compras, lo usamos con el 鈥榗ount鈥 y 鈥榮etCount鈥:

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 鈥淒铆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.

Paso para decirles que鈥 el contador solo sigue sumando鈥hora me retiro lentamente

馃槷 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)`}

Una soluci贸n para el error 鈥淯ncaught TypeError: context.order is not iterable鈥濃 Utilizar 鈥楢rray. isArray(context. order)鈥 para verificar si context order es un arreglo y si lo es; podremos utilizar el operador spread para agregar 鈥榦rderToAdd鈥 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([])
   }

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

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>
En el minuto 10:50 aproximadamente Teff dice que hagamos esto `context.cartProducts([])` Pero eso es una mala practica, los estados no deben actualizarse directamente, sino atravez de su seteador de esta manera `context.setCartProducts([])`

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>
Teniendo en cuenta lo que han expresado, resolv铆 el tema de la cantidad de art铆culos o la disminuci贸n, utilizando el siguiente c贸digo en: ChekoutSideMenu/index.jsx:\
聽 聽 聽 聽 {*/\*\* 聽Mostrar el contador de art铆culos aqu铆 \*/*}聽 聽 聽 聽 \

聽 聽 聽 聽 聽 My Order ({context.count} items)聽 聽 聽 聽 \

聽 聽 聽 聽 \
esto funciona, ya que en Context/index.jsx, se definio un contador
```js const handleDelete = (id) =>{ const filteredProducts = context.cartProducts.filter(product => product.id != id); context.setCartProducts(filteredProducts); context.setCount(context.count - 1) } ```De esta forma vamos descontando los elementos del carrito que vamos sacando **context.setCount(context.count - 1)**
Una peque帽a sugerencia; sobre fondo blanco los colores tan chillones casi no se ven para las personas que tenemos ciertas afecciones oculares

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