Flujo para crear una nueva orden

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:0015:50

Flujo para crear una nueva orden

Curso de React.js con Vite.js y TailwindCSS

Clase 21 de 31

Clase 21 / 31

Recursos

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:

My order: Se refiere a la orden actual que está siendo creada por el usuario, similar a la lista de compras de un día específico. Es única y temporal hasta que el usuario decide realizar el pago.
My orders: Es una colección de 'my order', un historial de todas las compras realizadas por el usuario en la aplicación. Almacena un registro de diferentes órdenes realizadas en fechas distintas.

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:

Crear un objeto de orden: Incluye detalles como la lista de productos, el total de artículos y el precio total.
Uso de arrays: Almacenar estos objetos en un array facilita la manipulación y actualización de las órdenes.
Actualización de estados: Se necesita un manejo dinámico del estado para actualizar con facilidad las órdenes en el carrito y en 'My Orders'.

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

Ubicación en la interfaz: Debe estar accesible en el Checkout Side Menu.
Función de evento: Al hacer clic en el botón, se desencadena un evento que encapsula la orden y efectúa el pago.
Estilizado y usabilidad: El botón debe ser claramente visible y fácil de usar, optimizando la experiencia del usuario.

¿Qué pasa después del checkout?

Una vez se realiza el checkout, es importante el flujo de acciones que limpian y actualizan la interfaz:

Limpieza del carrito: Los productos seleccionados se eliminan del carrito de compras, y el contador se resetea a cero.
Actualización de 'My Orders': La orden se añade al historial de compra en 'My Orders'.
Preparación para nuevas compras: Se restablece el estado para que el usuario pueda empezar un nuevo proceso de compra sin complicaciones.

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!

Rubén Ernesto Aragón Gil

Hace 3 años

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

Hace 3 años

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 = () => {
&#x20; setImageError(*true*);
}

// En nuestro return del componente
return (
&#x9;// ...
&#x9;\<img
&#x20; *src*={!imageError
&#x20;   ? product.images\[0]
&#x20;   : 'https://picsum.photos/seed/picsum/200/300'
&#x20; }
&#x20; *alt*={product.title}
&#x20; *referrerPolicy*="no-referrer"
&#x20; *className*='w-full h-full object-cover rounded-lg'
&#x20; *onError*={handleImageError}
/>
)

Abraham Gonzalez

Hace 3 años

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

Comentarios (17)17 comentarios

Miguel Angel Reyes Moreno

Annderson Rey Sánchez

Diego Eduardo Téllez Contreras

Jean Bustamante

Julio Peña

Jose Ever Muñoz Muñoz

Hace 2 años

Gilbert Ardila

Gerson David Barboza Alvarez

Leopoldo Martinez

Erik David Medina Lopez

Cristian Acalo

Andrés Julian Caro Restrepo

David Esteban Giraldo Duque

Nicolás Felipe Pinto Vega

Ulqernesh Karvenae

Alfonso Ricaurte Riveros

Ezequiel Freire

Andres Prieto

Mauricio Combariza

Moises Navarro

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

Flujo para crear una nueva orden