Pedido en Línea

Pedido en Línea PE-001

Catálogo interactivo público donde el cliente entra desde su celular o computadora con un link único, ve los productos con imágenes, agrega al carrito, ajusta cantidades y confirma el pedido. No requiere login. El pedido llega al sistema FactuPOS de la empresa para que un agente lo facture o procese.

Cómo se genera el link

Ya no hay que generarlo: con solo abrir el cliente para editarlo, si todavía no tiene link, el sistema se lo crea solo. Usted entra y lo manda.

1. Abrir el cliente en CL-001 Catálogo de Clientes (botón Editar) o desde el modal de cliente en cualquier módulo de ventas.
2. En la primera pestaña, Esencial, aparece el recuadro «Enviarle al cliente su link para hacer pedidos» con el celular y el correo del cliente ya escritos.
3. Tocar Enviar link por WhatsApp o Enviar link por correo.
4. Si quiere mandarlo a otro número u otro correo, lo escribe ahí mismo antes de tocar el botón. Eso no cambia la ficha del cliente.

En la pestaña Contacto sigue estando el link completo, para copiarlo o para volverlo a generar si necesita anular el anterior. El link es la dirección de la Tienda en Línea con acceso automático: https://soportereal.com/ecommerce/<empresa>?t=<token>

Qué ve el cliente

• Encabezado en una sola línea: logo de la empresa (o su nombre, si no tiene logo), buscador, cuenta y carrito. En el celular el botón de la cuenta queda solo con el ícono y el nombre del cliente se ve al tocarlo, arriba de «Cambiar mi clave» y «Cerrar sesión»
• Barra de resultados en un renglón: Categorías, Con existencia, la cantidad de resultados y cuántos productos por página. Solo se parte en dos renglones cuando de verdad no cabe (catálogos de miles de productos en pantallas muy angostas)
• Sidebar de categorías con conteo de productos por categoría
• Búsqueda por nombre, código o detalle interno (debounce 400ms)
• Cuadrícula de productos con imagen, nombre, categoría, precio y stock
• Botón "Agregar" en cada producto que mete 1 unidad al carrito
• Modal detalle al tocar el producto: carrusel con todas las imágenes, descripción, cantidad ajustable, agregar
• Carrito flotante con badge de cantidad total
• Confirmación con notas: el cliente puede dejar instrucciones (horario de entrega, etc.) antes de enviar
• Pie con los datos de la empresa: nombre comercial, razón social, dirección, teléfono, correo y cédula, en una banda azul oscuro igual que el encabezado. La dirección se muestra solo con los nombres de provincia, cantón, distrito y barrio (sin los códigos de Hacienda). En el celular el pie va compacto para no robarle pantalla a los productos y se queda pegado abajo: aunque la búsqueda traiga pocos productos, el pie no sube a media pantalla.

Listas de precios y descuentos

El precio que ve el cliente respeta su configuración fiscal en CL-001:

• Tipo de Precio (1-10) del cliente → se aplica la lista correspondiente (parámetro 275 decide si usa la versión 1 o 2 de las vistas de precios)
• Descuento del cliente → se aplica automáticamente sobre el precio, mostrando el original tachado

Modal detalle (carrusel)

• Galería: imagen principal grande + flechas + miniaturas + contador 1 / 3
• Navegación con teclado: ← → entre imágenes, Esc para cerrar
• Cantidad: − / input / + (respeta Fraccionamiento del artículo: si está activo permite decimales tipo 1.5 kg)
• Descripción: muestra el campo DetalleInterno del artículo en una card destacada
• Badge "+N imágenes" en la card de la cuadrícula si el producto tiene varias imágenes

Imágenes

Las imágenes se cargan desde la tabla ArticuloImagenes (campo ImagenNombre ordenado por Orden). Solo aparecen las que tienen archivo físico real en /img/<empresa>/articulos/: si la imagen está registrada en BD pero el archivo no existe, se muestra el placeholder de caja () en lugar de un 404.

Filtro de productos visibles

Solo se muestran al cliente los artículos con:

• MostrarEnWeb = 1 — checkbox "Mostrar en web" en IN-002
• ArticuloEstadoCodigo = 1 — Estado activo

Vista móvil compactada

En pantallas ≤ 600px el grid pasa a 3 columnas con cards muy compactas (categoría y stock ocultos en la card; visibles al abrir el modal detalle). En pantallas ≤ 360px se reduce aún más la tipografía. El botón "Agregar" en mobile muestra solo el ícono .

Estilo visual

El catálogo usa estilo SLDS (Salesforce Lightning Design System): header blanco con borde inferior, brand azul #0176d3, tipografía Salesforce Sans, radius conservador (4-8px), sombras planas, lozenges (badges pill) con borde fuerte para stock. Todos los tokens están en --slds-* dentro de /pedido/css/pedido.css.

Base de datos

• ClienteTokenPedido en cada empresa: Token (64 hex), ClienteCodigo, Estado, FechaCreacion, FechaExpiracion, UltimoAcceso
• token_lookup en dbcontrol: índice cross-empresa con ServerIP, ServerDB, ClienteCodigo para que la URL pública resuelva a la BD correcta sin saber a priori a qué empresa pertenece

APIs públicas (sin auth)