Plan de implementación de Carrito de Compras (React + TypeScript + Tailwind) #11
Description
Plan de implementación de Carrito de Compras (React + TypeScript + Tailwind)
Este documento describe el plan para implementar un carrito de compras en la aplicación, siguiendo el diseño de la imagen adjunta.
Estructura de archivos
A crear:
src/components/Cart/CartPanel.tsx— Panel principal del carrito.src/components/Cart/CartItem.tsx— Componente para cada producto en el carrito.src/context/CartContext.tsx— Estado global del carrito con Context + useReducer.src/utils/cartCalculations.ts— Lógica pura para cálculos (subtotal, descuento, envío, total).
A modificar:
src/components/entity/product/Products.tsx— Agregar botón “Agregar al carrito”.src/components/Navigation.tsx— Añadir enlace/ruta al carrito.src/App.tsx— Añadir rutas para la vista del carrito.
Funcionalidades
- Vista de productos con botón “Agregar al carrito”.
- Panel del carrito con listado de productos (imagen, nombre, precio, cantidad, total, eliminar).
- Resumen de orden: subtotal, descuento, envío, total.
- Acciones: aumentar/disminuir cantidad, eliminar ítem, vaciar carrito, aplicar cupón.
- Accesibilidad y diseño responsivo con Tailwind.
Estado global
- Usar React Context + useReducer para manejar el estado del carrito.
- Separar la lógica de cálculos en un módulo puro (
cartCalculations.ts).
Navegación
- Añadir enlace al carrito en la barra de navegación.
- Permitir navegar entre productos y carrito.
Consideraciones
- Componentes accesibles y responsivos.
- Código modular y fácil de mantener.
- Lógica de descuentos y envío parametrizable.
Referencia visual
Imagen adjunta al documento o issue.
Este archivo puede usarse como base para crear un issue automáticamente usando la API de GitHub.