Ayuda: Catálogo de Productos

Catálogo de Productos CL-002Permiso 053

Vista visual del catálogo de productos para que el agente se lo muestre al cliente. Tarjetas con imagen, nombre, detalle interno, stock y precio opcional. Se puede compartir por WhatsApp o Email mediante un enlace público con token.

Para qué sirve

Agente visita al cliente y le muestra el catálogo con imágenes en tablet/celular
Enviar link al cliente para que revise la oferta antes de una visita
Catálogo digital actualizado (no se imprime, siempre refleja stock y precios actuales)

Filtros en la cabecera

Buscar — por nombre, código o código de barras (debounce 350ms; al buscar se deselecciona automáticamente la categoría para ver todas)
Lista de Precios — P1 a P10
Ordenar por — Nombre A→Z, Código, Precio ↑, Precio ↓
☑ Solo con stock — oculta productos sin existencias
☑ Mostrar precio — toggle para ocultar/mostrar precios en las tarjetas

Sidebar de categorías

Muestra todas las categorías activas con conteo de productos
Al hacer click en una categoría con subcategorías, se despliega como acordeón
Las subcategorías vienen recogidas por default — solo se abren al tocar la categoría padre
El conteo es en web / total activos (ej. 64/267)
En el celular no hay columna lateral: las categorías son una fila de botones (ver En el celular)

En catálogo / Fuera / Todos

En catálogo (por defecto) — solo los artículos marcados para mostrarse en el enlace público
Fuera — artículos activos que no están marcados
Todos — todos los artículos activos
Cada tarjeta tiene un botón con un ojo: En web / Fuera. Al tocarlo se marca o desmarca el artículo para el catálogo que se comparte, sin abrir el detalle

Tarjeta de producto

Imagen cuadrada con fallback a placeholder si no hay foto
Chip de stock verde/rojo (solo en admin; oculto en el catálogo público)
Código en mono, Nombre, y Precio con IVA incluido + % entre paréntesis. Ej: ₡1,234.56 (13% IVA)

Modal detalle de producto

Al hacer click en una tarjeta se abre un modal con:

Carrusel de imágenes — hasta varias imágenes por artículo (de la tabla ArticuloImagenes). Navegación con flechas ← → o thumbnails
Agregar imagen (en el celular, con la cámara o la galería) y la × de cada miniatura para eliminarla
Nombre y Detalle interno editables: al cambiarlos se encienden Guardar cambios y Deshacer
Código, Categoría/Subcategoría, Stock chip
Precio grande con IVA incluido y porcentaje

Compartir catálogo — Link público

Botón verde "Compartir" en la cabecera abre un modal con 2 pasos:

Configuración del token:
- Título (opcional, lo verá el cliente)
- Duración (7 / 30 / 90 / 365 días o sin expiración)
- Lista de Precios a congelar
- ☑ Mostrar precio al cliente (si se desmarca, el cliente no puede activarlo)
- ☑ Solo productos con stock
- Mensaje opcional para acompañar el envío
Enlace generado:
- Input con URL única (formato ?t=serverdb.token)
- Botón WhatsApp — abre wa.me con texto precompilado
- Botón Email — abre el cliente de correo (mailto)
- Invitar por Email directo — escribir email del cliente y el sistema envía correo HTML con botón "Ver Catálogo"
- Botón Copiar el enlace al portapapeles

Banner de enlace activo

Tras generar un enlace, aparece un banner verde en la parte superior con la URL + botones rápidos (Copiar / WhatsApp / Email / Descartar). Se guarda en el navegador y queda visible al recargar la página hasta que se descarta.

Vista del cliente (pública)

URL: /modules/clientes/catalogo_productos/catalogo_publico.php?t=<serverdb>.<token>

Sin login — acceso solo por token
Los ajustes del token quedan congelados: el cliente no puede activar precios si el agente los ocultó
Sin indicadores de stock — el cliente no ve si hay o no existencias (evita desmotivar la compra)
Responsive: desktop con sidebar, tablet/móvil con sidebar colapsable y grid de 2+ columnas
Cada carga incrementa el contador Vistas y actualiza UltimaVista
Meta noindex, nofollow — no aparece en buscadores

Seguridad del token Token de 32 caracteres hex aleatorios (random_bytes). Si el cliente ve una URL con ?t=empresa.xxxxx y la expiración ha pasado, el sistema muestra "El enlace ha expirado o ya no está disponible". El agente puede generar otro nuevo en cualquier momento.

Tip Si el cliente es mayorista y debe ver Precio 2, el agente selecciona Lista P2 al generar el token. El cliente verá los precios del nivel 2 sin saber que existen otras listas.

En el celular

La pantalla tiene dos versiones y usted no elige ninguna: el sistema muestra la que corresponde al ancho de lo que tenga en la mano. Se entra por el mismo lugar del menú de siempre.

Pantalla ancha (más de 900 puntos): la vista de computadora, con las categorías en una columna a la izquierda.
Celular (900 o menos): la vista de teléfono. Si gira el aparato y la pantalla se ensancha, cambia sola.

Arriba va el encabezado de siempre, en dos filas; el único botón es Regresar.

Buscar queda fijo arriba al bajar por la lista.
Categorías: una fila de botones que se desliza con el dedo; al elegir una aparece debajo la fila de sus subcategorías.
Filtros (botón ): lista de precios, orden, solo con stock y mostrar precio. El numerito dice cuántos tiene cambiados.
Compartir (botón verde): los mismos dos pasos de la computadora, y además el botón Compartir…, que abre el menú del teléfono (WhatsApp, Telegram, Messenger…).
Las tarjetas van de dos en dos y se cargan más solas al llegar al final.
Al tocar una tarjeta, el detalle ocupa toda la pantalla. Las fotos se pasan deslizando el dedo.
El botón atrás del teléfono cierra el detalle o Compartir y lo deja en el catálogo; la flecha de arriba (Regresar) sale del módulo.

Base de datos

Tabla CatalogoProductosToken en cada empresa (migración #20260420234033): guarda Token, ServerDB implícito, FechaExpira, MostrarPrecio, ListaPrecio, SoloStock, Categoría, Titulo, Mensaje, Vistas, UltimaVista, Activo.

Enviarle este manual a un usuario