Tienda Virtual Batan

Manual de Uso y Guía de Administración

1. Introducción

Este manual describe cómo utilizar y administrar el sitio web Tienda Virtual Batan (https://tiendavirtualbatan.com). La plataforma está dividida en dos secciones: Frontend (para clientes) y Admin (para administradores).

2. Frontend - Guía para Clientes

2.1 Acceso al Sitio

• URL: Accede a la tienda en https://tiendavirtualbatan.com
• Navegación: Usa el menú superior para explorar productos, categorías, carrito y perfil de usuario (si estás registrado)
• Compatibilidad: El sitio es responsivo y funciona en dispositivos móviles, tablets y computadoras

2.2 Búsqueda de Productos

1. En la página principal o en la sección de productos, usa la barra de búsqueda en la parte superior
2. Ingresa palabras clave (ej. "camiseta", "electrónica") y presiona Enter
3. Los resultados se muestran en tarjetas con imagen, nombre, precio y descuentos (si aplica)
4. Haz clic en una tarjeta para ver detalles del producto

2.3 Visualización de Detalles de Producto

En la página de detalles (detalles.php?id=X):

• Verás la imagen principal, descripción, precio normal/rebajado y calificación
• Puedes agregar el producto al carrito haciendo clic en Comprar (ícono de carrito)
• Comparte el enlace del producto con el botón Copiar enlace
• Si estás registrado, puedes dejar una reseña con comentario y calificación (0-5 estrellas)

2.4 Gestión del Carrito

1. Agrega productos al carrito desde la página de productos o detalles
2. Accede al carrito en carrito.php desde el ícono en la barra superior
3. En el carrito:
   • Revisa los productos, cantidades y precios
   • Ajusta cantidades o elimina productos
   • Calcula el total con IVA (13%)
   • Haz clic en Enviar por WhatsApp para enviar el pedido a +50689495337 con un mensaje que incluye los detalles
   • Usa Vaciar Carrito para eliminar todos los productos
   • Regresa a productos con Volver

2.5 Registro e Inicio de Sesión

2.6 Visualización de Visitas

• En visitas.php, se muestra el total de visitas al sitio y un listado de países con banderas, ordenados por número de visitas
• Usa el desplazamiento horizontal para ver todos los países (en móviles, desliza con el dedo)

3. Admin - Guía de Administración

3.1 Acceso al Panel

• URL: Accede al panel administrativo desde admin/index.php
• Requisitos: Debes tener un usuario con rol super_admin o admin. Los usuarios con rol usuario no tienen acceso
• Inicio de Sesión: Usa las mismas credenciales que en el frontend o autenticación con Google

3.2 Gestión de Categorías

1. Ve a la sección de categorías desde el menú lateral
2. Crear Categoría:
   • Haz clic en Nuevo para abrir el formulario modal
   • Ingresa el nombre de la categoría y guarda
3. Eliminar Categoría (solo super_admin):
   • En la tabla de categorías, selecciona Eliminar junto a la categoría deseada
   • Confirma la acción

3.3 Gestión de Subcategorías

1. Ve a la sección de subcategorías desde el menú lateral
2. Crear Subcategoría:
   • Haz clic en Nuevo para abrir el formulario modal
   • Ingresa el nombre y selecciona una categoría padre
   • Guarda los cambios
3. Eliminar Subcategoría (solo super_admin):
   • En la tabla de subcategorías, selecciona Eliminar
   • Confirma la acción

3.4 Gestión de Productos

1. Ve a la sección de productos desde el menú lateral
2. Crear Producto:
   • Completa el formulario con nombre, descripción, precio normal, precio rebajado, cantidad, categoría y subcategoría (opcional)
   • Sube una imagen principal (JPEG) y hasta 8 imágenes adicionales
   • Guarda para agregar el producto y enviar una notificación push vía Firebase Cloud Messaging (FCM)
3. Editar Producto:
   • En la tabla de productos, selecciona Editar
   • Actualiza los campos necesarios y sube una nueva imagen si es necesario
   • Guarda los cambios (se actualiza en la base de datos)
4. Eliminar Producto (solo super_admin):
   • Selecciona Eliminar en la tabla y confirma

3.5 Gestión de Perfiles

1. Ve a la sección de perfil desde el menú lateral
2. Editar Perfil:
   • Actualiza datos personales (nombre, email, cédula, dirección, etc.)
   • Cambia la contraseña (opcional) o sube una nueva foto de perfil (JPEG/PNG, máx. 5MB)
   • Si eres super_admin, puedes cambiar el rol del usuario (super_admin, admin, usuario)
3. Eliminar Cuenta (opcional, solo super_admin):
   • Usa el botón Eliminar Cuenta y confirma (acción irreversible)

3.6 Gestión de Productos por Admin (solo super_admin)

1. Ve a la sección de gestión de productos desde el menú lateral
2. Selecciona un administrador desde el desplegable
3. Ver Productos:
   • La tabla muestra los productos asignados al administrador seleccionado, con paginación (10 productos por página)
4. Editar Producto:
   • Haz clic en Editar para actualizar detalles o imagen
   • Usa el formulario en dispositivos móviles o la edición en línea en escritorio
5. Eliminar Producto:
   • Selecciona Eliminar y confirma

3.7 Notificaciones

• Al crear un producto, se envía automáticamente una notificación push a los suscriptores mediante Firebase Cloud Messaging (FCM)
• Las notificaciones incluyen título, descripción y enlace al producto
• Los logs de notificaciones se guardan en logs/notificaciones.log

3.8 Seguridad y Restricciones

4. Recomendaciones

Clientes:

• Usa un navegador actualizado (Chrome, Firefox, Safari) para mejor experiencia
• Revisa el carrito antes de enviar el pedido por WhatsApp
• Regístrate para dejar reseñas y personalizar tu experiencia

Administradores:

• Mantén actualizada la información de productos (precios, imágenes, stock)
• Revisa los logs (logs/debug.log y logs/notificaciones.log) para diagnosticar problemas
• Usa contraseñas seguras y cambia la foto de perfil para personalizar la cuenta

5. Soporte

Información Técnica del Sitio Web

Frontend

Tecnologías:

• HTML5: Estructura de páginas web
• CSS: Estilizado con Bootstrap 5.3.3, Font Awesome 6.0.0, Google Fonts (Nunito, Monoton), y estilos personalizados para diseño responsivo
• JavaScript/jQuery: jQuery 3.6.0 para interacciones dinámicas (agregar al carrito, búsqueda en tiempo real, notificaciones toast)
• Interfaz: Diseño responsivo con tarjetas de productos, navegación por categorías/subcategorías, carrito de compras, y sistema de reseñas

Funcionalidades:

• Búsqueda de productos con resultados en tarjetas (imágenes, precios, descuentos)
• Carrito de compras con almacenamiento en localStorage y envío de pedidos por WhatsApp
• Visualización de visitas por país con banderas (usando API de flagcdn.com)
• Protección contra acciones como copiar o abrir herramientas de desarrollo

Admin

Tecnologías:

• HTML5: Estructura de páginas del panel
• CSS: SB Admin 2 (basado en Bootstrap) para diseño, con estilos personalizados para tablas y formularios
• JavaScript/jQuery: jQuery 3.6.0 para validaciones en tiempo real (correo, usuario, cédula) y manejo de formularios dinámicos
• PHP: Gestión de sesiones, consultas a la base de datos MySQL, y manejo de archivos (imágenes)

Funcionalidades:

• Gestión de categorías y subcategorías con formularios modales
• Creación, edición y eliminación de productos con soporte para imágenes (JPEG/PNG)
• Gestión de perfiles de usuarios (super_admin, admin, usuario) con validación de datos
• Paginación para listas de productos (10-20 ítems por página)
• Notificaciones push vía Firebase Cloud Messaging (FCM) para productos nuevos
• Registro y login con autenticación por Google y validaciones de usuario/cédula

Base de Datos

Integraciones

Seguridad

• Roles de Usuario: Sistema de permisos con 3 niveles (super_admin, admin, usuario)
• Validación de Datos: Validación en tiempo real de formularios (email, usuario, cédula)
• Prevención SQL Injection: Uso de mysqli_real_escape_string en todas las consultas
• Restricción de Archivos: Límites de tamaño y formato para imágenes subidas
• Protección de Contenido: Deshabilitación de clic derecho y herramientas de desarrollo en frontend
• Gestión de Sesiones: Control de acceso mediante sesiones PHP

Diseño Responsivo

Monitoreo y Logs

• Logs de Debug: logs/debug.log - Registro de errores y eventos del sistema
• Logs de Notificaciones: logs/notificaciones.log - Historial de notificaciones push enviadas
• Estadísticas de Visitas: Seguimiento de visitas por país con visualización gráfica

Rendimiento