Sistema de Componentes
En CapyGaming, los componentes manejan la estructura visual y funcionalidad clave del sistema. El enfoque modular basado en Vue.js permite una separación clara de responsabilidades, facilita la reutilización y mejora la experiencia de desarrollo.
Cada componente cumple propósitos específicos, como mostrar productos, realizar pagos, manejar formularios de autenticación o navegar por las categorías. A continuación, se presenta un desglose de los componentes más importantes.
frontend/src/components/
├── CarritoModal.vue # Modal para ver y gestionar productos en el carrito.
├── CarritoModalPreview.vue # Vista previa del carrito para ítems seleccionados.
├── CheckoutForm.vue # Formulario final de compra.
├── Home.vue # Página principal de la tienda.
├── NavBar.vue # Barra de navegación superior.
├── Productos.vue # Vista de catálogo de productos.
├── ExploradorCategorias.vue # Menú lateral para explorar categorías.
├── FooterPag.vue # Footer con enlaces e información extra.
├── Registro.vue # Formulario de registro de usuarios.
├── InicioSesion.vue # Formulario de login.
├── TerminosYCondiciones.vue # Modal para políticas legales.
Nota: Los componentes están diseñados para ser reutilizables y están encapsulados para funcionar de manera independiente.
1. NavBar.vue
El Header/Barra de Navegación permite al usuario moverse fácilmente por las páginas y buscar productos.
🔧 Características:
- Simple y accesible.
- Incluye un cuadro de búsqueda.
- Botones de login, registro, carrito, y enlaces directos a secciones claves como "Ofertas" y "Productos".
2. Home.vue
La página principal muestra secciones destacadas como categorías populares, ofertas limitadas y promociones.
Elementos que contiene:
- Productos destacados.
- Categorías con acceso directo.
- Sección promocional rotativa (carousel).
3. Productos.vue
Es el catálogo central donde se muestran los productos de la tienda. Este componente es dinámico y funcional.
🔧 Características:
- Visualización limpia en formato grid.
- Botones para agregar productos al carrito.
- Stock disponible y precio con detalle claro.
Productos.vue
├── producto-card (rendereo por producto)
│ ├── nombre
│ ├── precio
│ ├── imagen
│ ├── stock
│ ├── botón Agregar al Carrito
4. CarritoModalPreview.vue
El modal del carrito es una ventana emergente que permite gestionar todos los productos seleccionados antes de proceder al pago.
🔧 Características:
- Lista dinámica de productos agregados.
- Posibilidad de agregar/eliminar cantidades por producto.
- Botón directo para proceder al checkout.
5. ExploradorCategorias.vue
El menú lateral de categorías permite a los usuarios filtrar los productos según tipos como Notebooks, Procesadores, Memorias, y más.
🔧 Características:
Jerarquía con opciones principales y subcategorías. Selección dinámica para organizar los resultados.
6. CheckoutForm.vue
El formulario de finalización de compra recopila información clave para validar el pedido y realizar el pago.
🔧 Características:
Recopila nombre, apellido, dirección y medios de pago. Integración de pago con MercadoPago. Valida y guarda la orden en el sistema.
Los componentes han sido diseñados para funcionar en conjunto y de manera optimizada. Aquí tienes un diagrama simplificado de cómo interactúan:
App.vue
├── NavBar.vue # Barra de navegación superior
├── RouterView # Carga las vistas principales (Home, Productos)
│ ├── Home.vue # Carga el inicio con secciones dinámicas
│ ├── productos.vue # Renderiza catálogo en ruta /productos
│ ├── CarritoModal.vue # Gestiona productos seleccionados
├── Footer.vue # Enlace informativo de toda la página
Reutilización: Componentes como producto-card.vue se pueden usar en diferentes vistas sin duplicar lógica.
Mantenimiento sencillo: Si un componente necesita ajustes, sus cambios se reflejan automáticamente en todo el sistema.
Escalabilidad: Con esta estructura, añadir nuevas funciones o vistas es fácil y organizado.
Todos estos componentes trabajan juntos para ofrecer una experiencia fluida y amigable, asegurando que CapyGaming sea un ecommerce eficiente y atractivo:
