1. Introducción y acceso al sistema
Interelectricos de Colombia es una plataforma web de comercio electrónico para la venta de materiales eléctricos en Tunja, Boyacá. Permite a los visitantes explorar productos, realizar pedidos y contactar asesores; y a los usuarios internos gestionar todo el catálogo, pedidos y clientes.
Acceso a la plataforma
La plataforma está disponible en https://interelectricosdecolombia.com. No requiere instalación: funciona en cualquier navegador web moderno (Chrome, Firefox, Safari, Edge) y en dispositivos móviles.
Instalación como App (PWA)
📲
Agregar a pantalla de inicio
›
En Android/Chrome: aparece automáticamente un banner en la parte inferior de la pantalla luego de 8 segundos. Toca "Instalar ahora" y confirma. La app se agrega como ícono ⚡ en tu pantalla de inicio.
En iPhone/Safari: aparece un panel con instrucciones paso a paso: toca el botón Compartir → selecciona "Agregar a pantalla de inicio" → toca "Agregar".
La app funciona sin conexión a internet para consultar el catálogo, y carga instantáneamente en visitas posteriores.
Inicio de sesión (usuarios internos)
🔑
Cómo iniciar sesión
›
1
En la barra superior derecha, haz clic en el botón "Ingresar".
2
Se abre el modal de autenticación. Ingresa tu usuario y contraseña y presiona "Iniciar sesión".
3
Si las credenciales son correctas, tu nombre aparece en la esquina superior derecha con un ícono ▾.
Se genera un token JWT con vigencia de sesión. No es necesario iniciar sesión nuevamente mientras el token sea válido.
Si introduces credenciales incorrectas, el sistema muestra un mensaje de error. Tras varios intentos fallidos, contacta al administrador para restablecer tu contraseña.
Cerrar sesión
Haz clic en tu nombre (esquina superior derecha) → selecciona "🚪 Cerrar sesión". El token se elimina y la sesión queda cerrada inmediatamente.
2. Roles y permisos
| Función | Visitante | Vendedor | Administrador |
|---|
| Ver catálogo de productos | ✅ | ✅ | ✅ |
| Buscar productos | ✅ | ✅ | ✅ |
| Agregar al carrito | ✅ | ✅ | ✅ |
| Realizar pedidos | ✅ | ✅ | ✅ |
| Rastrear pedido como invitado | ✅ | ✅ | ✅ |
| Contactar por email / WhatsApp | ✅ | ✅ | ✅ |
| Ver Nuestros Asesores | ✅ | ✅ | ✅ |
| Panel de vendedor | ❌ | ✅ | ✅ |
| Editar productos | ❌ | ✅ | ✅ |
| Crear / eliminar productos | ❌ | ❌ | ✅ |
| Panel de administrador completo | ❌ | ❌ | ✅ |
| Gestionar asesores | ❌ | ❌ | ✅ |
| Gestionar usuarios | ❌ | ❌ | ✅ |
| Ver mensajes de contacto | ❌ | ❌ | ✅ |
| Ver estadísticas | ❌ | Resumen | Completo |
| Subir imágenes al servidor | ❌ | ✅ | ✅ |
| Cargue masivo de productos | ❌ | ✅ | ✅ |
Explorar el catálogo
🏠
Navegar por categorías
›
En la barra de categorías debajo del encabezado encontrarás: 🏠 Inicio · 💡 LED · 🔦 Lámparas · 🏗️ Industrial · 🔌 Accesorios · 🌳 Exterior · 🎛️ Automatización.
1
Haz clic (o desliza en móvil) sobre cualquier categoría.
2
El catálogo se filtra instantáneamente mostrando solo los productos de esa categoría.
La página no se recarga — el filtro es dinámico. La categoría activa queda resaltada en rojo.
🔍
Buscar productos
›
1
Escribe en la barra de búsqueda (nombre, marca, categoría o descripción).
2
Presiona Enter o el botón 🔍.
El sistema consulta la base de datos y muestra los productos que coincidan. Si no hay resultados, aparece el mensaje "No se encontraron productos".
Carrito y pedidos
🛒
Agregar producto al carrito
›
1
En cualquier tarjeta de producto, haz clic en "Agregar" o en el ícono del carrito.
2
El ícono del carrito (parte superior derecha) muestra el número de productos agregados.
3
Haz clic en el carrito para ver el resumen, cambiar cantidades o eliminar productos.
El carrito se guarda en tu sesión de navegador. Si cierras la pestaña y vuelves, el carrito se mantiene.
📦
Realizar un pedido
›
1
Con productos en el carrito, haz clic en "Realizar pedido".
2
Completa el formulario: nombre, teléfono, dirección y método de pago.
3
Haz clic en "Confirmar pedido".
El pedido queda registrado en la base de datos con estado "Pendiente". Recibes el número de pedido para hacer seguimiento. El administrador recibe la notificación en su panel.
Puedes pedir como invitado sin crear cuenta. Guarda el número de pedido para rastrear tu compra.
🔎
Rastrear mi pedido (📦 Mi Pedido)
›
1
Haz clic en "📦 Mi Pedido" en la barra superior.
2
Se abre una ventana modal. Ingresa el número de pedido y el teléfono con el que realizaste el pedido.
3
Haz clic en "Consultar estado".
El sistema muestra el estado actual: Pendiente, En proceso, Enviado, Entregado o Cancelado, junto con los productos del pedido.
El número de pedido y el teléfono deben coincidir exactamente con los ingresados al realizar el pedido.
Contacto y asesores
✉️
Enviar mensaje vía Email
›
1
Ve a la sección Contáctanos y completa todos los campos requeridos (Nombre, Teléfono, Tipo de proyecto, Mensaje).
2
Haz clic en "✉️ Enviar mensaje vía Email".
Se guarda la solicitud en la base de datos (tabla contactos) y se abre tu cliente de correo con el mensaje pre-rellenado listo para enviar a interelectricosdecolombia@gmail.com. El botón cambia a "✅ Mensaje enviado" y el formulario desaparece.
📱
Enviar mensaje por WhatsApp
›
1
Completa el formulario de contacto.
2
Haz clic en "📱 Enviar por WhatsApp".
Se guarda la solicitud en la base de datos y se abre WhatsApp Web o la app con el mensaje pre-rellenado (nombre, teléfono, proyecto y mensaje). Solo debes presionar enviar.
🧑💼
Contactar a un asesor por WhatsApp
›
En la sección Nuestros Asesores, cada tarjeta muestra el nombre, cargo, especialidad y un botón "📱 WhatsApp".
1
Haz clic en "📱 WhatsApp" del asesor que deseas contactar.
Se abre WhatsApp con un mensaje de saludo pre-rellenado dirigido a ese asesor específico. La tarjeta con insignia ⭐ VENDEDOR DEL MES indica el asesor con mejor desempeño.
Otras funciones públicas
📍
Cómo llegar
›
Haz clic en "📍 Cómo llegar" en la barra superior. Se abre un modal con el mapa de ubicación, la dirección exacta y un enlace para abrir Google Maps.
🕐
Estado del negocio (abierto / cerrado)
›
En la barra superior y en el footer aparece automáticamente una etiqueta de color:
- 🟢 Abierto — dentro del horario de atención
- 🟡 Cierra pronto — a 30 minutos de cerrar
- 🔴 Cerrado — fuera del horario
Horario: Lun–Vie 8am–6pm | Sáb 8am–4pm. La hora se calcula siempre en hora Colombia (UTC-5).
El panel del vendedor es accesible haciendo clic en tu nombre (esquina superior derecha) → "🧑💼 Panel de Vendedor". Contiene 4 pestañas: 📊 Resumen, 🛍️ Pedidos, 📦 Productos y ✉️ Mensajes.
📊 Resumen
📊
Ver estadísticas del negocio
›
Muestra métricas en tiempo real consultadas desde la base de datos: total de pedidos, productos activos, mensajes recibidos y ventas del período.
Los números se actualizan cada vez que se abre la pestaña. No requiere recargar la página.
🛍️ Pedidos
🛍️
Ver y gestionar pedidos
›
Lista todos los pedidos ordenados del más reciente al más antiguo con: número de pedido, cliente, teléfono, productos, total y estado.
Cambiar estado de un pedido
1
Haz clic en el botón de estado del pedido (Pendiente / En proceso / Enviado / Entregado / Cancelado).
2
Selecciona el nuevo estado en el menú desplegable.
El estado se actualiza en la base de datos inmediatamente. El cliente puede verlo al rastrear su pedido con el botón "📦 Mi Pedido".
Contactar al cliente por WhatsApp
Cada pedido tiene un botón 📱 WhatsApp que abre una conversación directa con el cliente con el número de pedido pre-rellenado en el mensaje.
📦 Productos
✏️
Editar un producto existente
›
1
En la pestaña Productos, haz clic en "✏️ Editar" junto al producto deseado.
2
Se abre el modal de edición con todos los campos pre-rellenados.
3
Modifica los campos necesarios (nombre, precio, descripción, badge, stock, imagen).
4
Para cambiar la imagen: haz clic en el área de foto y selecciona el archivo. Espera a que aparezca el mensaje "✅ Lista · ahora haz clic en Guardar".
5
Haz clic en "💾 Guardar cambios".
El producto se actualiza en la base de datos y el catálogo refleja los cambios inmediatamente sin recargar la página.
No hagas clic en Guardar mientras la imagen esté subiendo (⏳). Espera siempre el mensaje ✅ antes de guardar para que la ruta de la imagen se registre correctamente.
📤
Cargue masivo de productos (Excel/CSV)
›
1
Haz clic en "📥 Descargar plantilla" para obtener el archivo Excel de ejemplo.
2
Completa la plantilla con los datos de tus productos respetando los encabezados y valores permitidos.
3
Haz clic en "📤 Cargar archivo", selecciona tu Excel y revisa la vista previa.
4
Confirma el cargue masivo.
Todos los productos del archivo se importan a la base de datos de una sola vez. El catálogo se actualiza automáticamente.
El panel administrativo es accesible desde tu nombre → "🛠️ Panel de Administrador". Incluye todas las funciones del vendedor más las pestañas exclusivas: 🧑💼 Asesores, 👥 Usuarios y métricas ampliadas.
📊 Estadísticas
📈
Dashboard de estadísticas completo
›
El administrador ve métricas completas: ventas por período, productos más vendidos, mensajes pendientes, usuarios activos y estado general del negocio.
Todos los datos se consultan en tiempo real desde la base de datos cada vez que se accede a la pestaña.
📦 Productos — Funciones exclusivas de Admin
➕
Crear un nuevo producto
›
1
En la pestaña Productos, haz clic en "➕ Agregar producto".
2
Completa el formulario: Nombre, Categoría, Precio, Marca, Descripción, Badge (OFERTA/NUEVO) y Stock.
3
Opcionalmente sube una imagen: haz clic en el área de foto, selecciona el archivo y espera el mensaje "✅ Lista".
4
Haz clic en "➕ Crear producto".
El producto se inserta en la base de datos con stock = 1 y aparece inmediatamente en el catálogo público.
🗑️
Eliminar un producto
›
1
Abre el modal de edición del producto (botón ✏️ Editar).
2
Haz clic en el botón "🗑️ Eliminar" (visible solo para admin).
3
Confirma la eliminación en el diálogo de confirmación.
El producto se elimina de la base de datos y la imagen asociada se borra del servidor. Esta acción es irreversible.
Esta acción no se puede deshacer. Asegúrate de que el producto no tenga pedidos pendientes antes de eliminarlo.
🧑💼 Asesores
➕
Crear un nuevo asesor
›
1
En la pestaña 🧑💼 Asesores, haz clic en "➕ Nuevo asesor".
2
Completa: Nombre, Cargo, Bio, Teléfono, Color de acento y Orden (posición en el listado).
3
Para subir la foto: haz clic en el círculo 📷 o en el botón "📁 Archivo", selecciona la imagen y espera "✅ Foto lista · ahora haz clic en Guardar".
4
Activa ✅ Asesor activo para que aparezca en la web pública.
5
Haz clic en "💾 Guardar asesor".
El asesor se registra en la base de datos y aparece inmediatamente en la sección pública Nuestros Asesores.
✏️
Editar un asesor
›
1
En la pestaña Asesores, localiza la tarjeta del asesor y haz clic en "✏️ Editar".
2
Se abre el modal con todos los datos actuales del asesor.
3
Modifica los campos necesarios. Para cambiar la foto sigue el mismo proceso que en creación.
4
Haz clic en "💾 Guardar asesor".
Los cambios se guardan en la base de datos y la tarjeta pública del asesor se actualiza automáticamente.
Al subir una nueva foto, espera siempre el mensaje ✅ antes de hacer clic en Guardar. Si guardas antes de que termine la subida, la foto no se registrará.
⭐
Asignar / quitar Vendedor del Mes
›
Cada tarjeta de asesor tiene un botón "☆ Vendedor del mes".
1
Haz clic en "☆ Vendedor del mes" para asignar la insignia al asesor.
La tarjeta muestra inmediatamente la insignia dorada ⭐ VENDEDOR DEL MES tanto en el panel como en la sección pública. El botón cambia a "⭐ Quitar insignia" para removerla.
Puedes tener varios asesores marcados como Vendedor del Mes simultáneamente.
🗑️
Eliminar un asesor
›
1
En la tarjeta del asesor, haz clic en el botón 🗑️.
2
Confirma la eliminación en el diálogo.
El asesor se elimina de la base de datos y su foto se borra del servidor. Desaparece de la sección pública inmediatamente.
✉️ Mensajes de contacto
✉️
Gestionar mensajes recibidos
›
La pestaña ✉️ Mensajes lista todos los formularios de contacto recibidos (enviados por email o WhatsApp) con nombre, teléfono, tipo de proyecto y mensaje.
Cambiar el estado del mensaje
Cada mensaje puede marcarse como: Nuevo → Leído → Respondido.
Responder por WhatsApp
Cada mensaje tiene el teléfono del remitente como enlace directo a WhatsApp con un saludo pre-rellenado.
Al cambiar el estado, se actualiza en la base de datos. Los mensajes con estado "nuevo" aparecen destacados.
👥 Usuarios
👥
Gestionar usuarios del sistema
›
La pestaña 👥 Usuarios lista todas las cuentas del sistema (administradores y vendedores).
Crear usuario
1
Haz clic en "➕ Nuevo usuario".
2
Completa: Nombre, Usuario (login), Contraseña y Rol (admin o vendedor).
3
Haz clic en "💾 Guardar".
El usuario puede iniciar sesión inmediatamente con las credenciales asignadas.
Editar / desactivar usuario
Haz clic en "✏️ Editar" junto al usuario para modificar su nombre, contraseña o rol. También puedes desactivarlo sin eliminarlo.
Solo el administrador puede crear, editar o eliminar usuarios. No puedes eliminar tu propia cuenta mientras estás activo.
6. Preguntas frecuentes
❓
Subí la imagen pero no aparece en el producto
›
Este es el error más común. Asegúrate de esperar el mensaje "✅ Lista · ahora haz clic en Guardar" debajo de la imagen antes de hacer clic en Guardar. Si guardas mientras la imagen aún se está subiendo (⏳), la ruta no se registra en la base de datos.
❓
El panel no muestra datos / sale "JSON malformado"
›
Generalmente indica un problema temporal de conexión al servidor. Intenta:
- Recargar la página (F5)
- Cerrar sesión y volver a iniciar
- Verificar la conexión a internet
Si persiste, contacta al administrador del sistema.
❓
El botón Guardar dice "Espera a que termine de subir la foto"
›
La imagen aún está siendo cargada al servidor. Espera unos segundos hasta que el texto bajo la foto cambie de "⏳ Subiendo..." a "✅ Lista · ahora haz clic en Guardar" y entonces presiona Guardar.
❓
¿Cómo cambio mi contraseña?
›
El administrador debe acceder al panel → pestaña 👥 Usuarios → ✏️ Editar junto a tu nombre → ingresar la nueva contraseña en el campo correspondiente → 💾 Guardar.
❓
¿Los cambios que hago se ven en tiempo real para los clientes?
›
Sí. Todos los cambios en productos, precios, asesores y estados de pedidos se reflejan inmediatamente en el sitio público. No es necesario esperar ni publicar manualmente.
❓
¿Puedo usar la plataforma desde el celular?
›
Sí. El sitio es totalmente responsivo. El menú de categorías es un slider deslizable en móvil. El panel de administración funciona correctamente en pantallas pequeñas. Se recomienda instalarla como PWA para mejor experiencia (ver sección 1).
⚡
Interelectricos de Colombia
Manual de Usuario · Versión 1.0 · Mayo 2025
Desarrollado por
Virtual Bit
📧 interelectricosdecolombia@gmail.com · 📱 314 381 0422