Rubén Ernesto Aragón Gil
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.
Abraham Gonzalez
Abraham Gonzalez
Crear una orden y manejar el conjunto de órdenes es un escenario común en el desarrollo de aplicaciones e-commerce, sobre todo cuando trabajamos con el lenguaje de programación Perl. Vamos a profundizar paso a paso en cómo se implementa este proceso en una aplicación, utilizando un iPad como herramienta de visualización para clarificar conceptos. Este conocimiento te permitirá gestionar de manera eficiente las compras de los usuarios en tu sitio web o aplicación móvil.
¿Cómo se crea una orden en una aplicación de e-commerce?
Cuando hablamos de crear una orden en el contexto de nuestra aplicación e-commerce, nos referimos al proceso de recopilar todos los productos que el usuario desea comprar y prepararlos para la transacción final. El Checkout es el botón que aparece en el Checkout Side Menu y es crucial, ya que permite a los usuarios finalizar sus compras. La creación de esta orden es un paso esencial antes de su almacenamiento en 'My Orders'.
¿Por qué es importante diferenciar entre 'my order' y 'my orders'?
Es vital comprender la diferencia entre 'my order' y 'my orders' dentro de la aplicación:
Esta diferenciación ayuda a administrar y rastrear las compras de los usuarios de forma organizada.
¿Cómo se almacena una orden en el sistema?
Almacenar una orden correctamente en el sistema es clave para una buena gestión de órdenes:
¿Cómo se integra el botón de checkout en la aplicación?
El botón de Checkout es el puente entre la selección de productos y la finalización de la compra:
¿Qué pasa después del checkout?
Una vez se realiza el checkout, es importante el flujo de acciones que limpian y actualizan la interfaz:
Manejar estas transiciones de manera suave y eficiente mejorará la retención y satisfacción del cliente en tu aplicación e-commerce. Recuerda que el aprendizaje de estos conceptos es un proceso continuo, y no dudes en experimentar y mejorar tu implementación. ¡El mundo del desarrollo web y las aplicaciones espera por tus contribuciones!
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); }
Hola Miguel, es correcto si deberíamos modificar el contador, pero creo que el contador debería estar determinado por el tamaño del array, por lo que agregue este código al compoenente NavBar:
<li className="flex items-center"> <ShoppingCartIcon className='h-6 w-6 text-black'/> <span> {cartProducts.length} </span> </li>
Y elimine esta línea del componente Card
// setCount(count + 1);
Si te fijas en este momento tiene un bug, si agregar un producto el carro incremente, pero si lo eliminas no se disminuye.
Rubén Ernesto Aragón Gil
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.
Abraham Gonzalez
Abraham Gonzalez
Jean Bustamante
:o no sabía lo de flex-1
Julio Peña
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)`}
Jose Ever Muñoz Muñoz
creativo
Gilbert Ardila
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 }```
Gerson David Barboza Alvarez
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([]) }
Leopoldo Martinez
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([])
Erik David Medina Lopez
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>
Cristian Acalo
✨🦄 Así quedó mi aside para el checkout :3
Andrés Julian Caro Restrepo
David Esteban Giraldo Duque
Usando la clase "overflow-y-auto" solo aparece cuando es necesario
Nicolás Felipe Pinto Vega
Definitivamente es mágia! Muchas gracias Teff por enseñarme acerca del flex-1.
Ulqernesh Karvenae
interesante no conocía acerca del flex-1
Alfonso Ricaurte Riveros
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:<div className="flex justify-between items-center p-3"> {/** Mostrar el contador de artículos aquí */} <h2 className="font-medium text-xl"> My Order ({context.count} items) </h3> <div> esto funciona, ya que en Context/index.jsx, se definio un contador
Ezequiel Freire
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)**  
Andres Prieto
Una pequeña sugerencia; sobre fondo blanco los colores tan chillones casi no se ven para las personas que tenemos ciertas afecciones oculares
Mauricio Combariza
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) }
Moises Navarro
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); } } };```
Si hay un error con el API, hay varias formas de solucionar este problema o prevenirlo.
Valida que images exista, de no existir puedes colocar una alternativa. Para ello uso el state ImageError
*const* \[imageError, setImageError] = *useState*(*false*); *const* handleImageError = () => {   setImageError(*true*); } // En nuestro return del componente return ( 	// ... 	\<img   *src*={!imageError   ? product.images\[0]   : 'https://picsum.photos/seed/picsum/200/300'   }   *alt*={product.title}   *referrerPolicy*="no-referrer"   *className*='w-full h-full object-cover rounded-lg'   *onError*={handleImageError} /> )
i hay un error con el API, hay varias formas de solucionar este problema o prevenirlo. Valida que images exista, de no existir puedes colocar una alternativa. Para ello uso el state ImageError
const [imageError, setImageError] = useState(false); const handleImageError = () => { setImageError(true); }
Luego en el return del componente
<img src={!imageError ? product.images[0] : 'https://picsum.photos/seed/picsum/200/300' } alt={product.title} referrerPolicy="no-referrer" className='w-full h-full object-cover rounded-lg' onError={handleImageError} />
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>