Construir un Checkout Side Menu en React te permite mostrar los productos que un usuario agrega al carrito dentro de un panel lateral, sin abandonar la vista principal del e-commerce. Aquí aprendes cómo crearlo reutilizando la estructura de un componente existente, manejar su estado con Context API y resolver el cruce de eventos de clic que suele aparecer al combinar varios handlers.

Por qué reutilizar el componente Product Detail como base

Cuando ya tienes un Product Detail funcional, conviene copiar su estructura para acelerar el desarrollo del nuevo panel lateral. Ambos componentes comparten lógica: un aside que se abre y cierra, un ícono de cerrar y un título superior.

En la práctica, creas dentro de components una carpeta llamada CheckoutSideMenu con dos archivos: index.jsx y styles.css [01:38]. Copias el contenido de Product Detail, renombras el componente y ajustas la clase CSS para mantener consistencia visual. El título cambia a My Order porque ahora representa la orden de compra activa, no el detalle de un producto.

¿Qué es un Checkout Side Menu? Es un panel lateral que muestra los productos agregados al carrito en tiempo real, permitiendo al usuario revisar su orden sin salir de la página actual.

Qué partes del Product Detail debes conservar

Al reutilizar código, identifica qué piezas siguen siendo útiles y cuáles sobran:

• El import de useContext para leer el estado global.
• El ícono X para cerrar el panel.
• La estructura del aside con apertura y cierre condicional.
• El título superior, que renombras a My Order.

Eliminas la imagen del producto y los detalles individuales, porque el panel mostrará una lista de items, no un solo producto.

Cómo manejar el estado del Checkout Side Menu con Context

El panel necesita su propio estado de apertura, independiente del Product Detail. En el archivo context/index.jsx duplicas la lógica de isProductDetailOpen y la renombras a isCheckoutSideMenuOpen, junto con sus funciones openCheckoutSideMenu y closeCheckoutSideMenu [04:30].

Luego provees estos tres valores dentro del Provider para que cualquier componente de la aplicación pueda consumirlos. Dentro del componente CheckoutSideMenu lees context.isCheckoutSideMenuOpen para controlar la visibilidad y context.closeCheckoutSideMenu para el botón de cerrar.

¿Por qué usar Context API en lugar de props? Porque el carrito debe abrirse desde múltiples lugares (navbar, cards, botones de detalle) y pasar props por cada nivel sería repetitivo y frágil.

Dónde montar el componente en la aplicación

Un detalle clave: no importes el CheckoutSideMenu dentro de Home. En su lugar, móntalo en App.jsx para que viva en toda la aplicación. Esto te permite invocarlo desde cualquier ruta o componente sin volver a renderizarlo.

jsx import CheckoutSideMenu from './components/CheckoutSideMenu'

// dentro del return <CheckoutSideMenu />

Cómo resolver el cruce de eventos al hacer clic

Aquí viene lo interesante. Cuando el usuario da clic en el ícono + dentro de una card, se disparan dos eventos al mismo tiempo: el de la card completa (que abre el Product Detail) y el del ícono (que debería abrir el Checkout Side Menu) [07:45]. El resultado es que ambos paneles compiten y solo uno se muestra.

La solución es detener la propagación del evento en el ícono +. Modificas la función addProductToCart para recibir el evento como primer parámetro:

jsx const addProductToCart = (event, productData) => { event.stopPropagation() setCount(count + 1) context.openCheckoutSideMenu() context.closeProductDetail() }

El método stopPropagation evita que el clic burbujee hacia el contenedor padre. Ojo con la escritura: es stopPropagation, no stopProgration, un typo común que rompe la ejecución [09:12].

Qué hace exactamente stopPropagation

Cuando un elemento hijo recibe un clic, el evento normalmente sube por el árbol del DOM activando los listeners de sus padres. Llamar a stopPropagation corta ese viaje y deja que solo el elemento original procese la acción.

En el JSX del ícono pasas el evento explícitamente:

jsx <XMarkIcon onClick={(event) => addProductToCart(event, data)} />

De esta forma, al dar clic en + se abre el Checkout Side Menu y al dar clic en el cuerpo de la card se abre el Product Detail. Dos comportamientos coexistiendo sin conflicto.

Habilidades, conceptos y datos clave de la clase

Algunos elementos que vale la pena tener presentes para aplicar lo aprendido:

• useContext: hook que permite leer valores del Provider sin pasar props manualmente [00:55].
• stopPropagation: método del objeto evento que detiene la propagación hacia elementos padres [09:00].
• preventDefault: evita el comportamiento por defecto del navegador en eventos como submits o links [08:50].
• Reutilización de componentes: copiar estructura existente acelera el desarrollo cuando dos UI comparten patrón [01:20].
• Montaje global en App.jsx: ubicar componentes compartidos en el nivel más alto de la app facilita su acceso desde cualquier ruta [10:30].
• Cierre cruzado de paneles: al abrir el Checkout Side Menu conviene cerrar el Product Detail para evitar que ambos se muestren simultáneamente [11:15].

Con el panel ya funcionando, el siguiente paso es crear una card pequeña por cada producto agregado, para que el usuario vea su orden en detalle. ¿Qué otros componentes reutilizarías de tu proyecto para ahorrar tiempo? Cuéntalo en los comentarios.