El sitio web y la cuenta del asistente
Lo que hace el sitio web público: el catálogo de eventos y sus filtros, la página del evento, la selección de asientos, el pago, las entradas, pedidos, eventos guardados y perfil del asistente, el formulario de contacto, los buscadores y las etiquetas de marketing.
Para el paquete Full Stack
Páginas
Cada página existe en inglés en /en y en árabe en /ar. El sitio web no tiene datos propios: cada evento, asiento, reserva, pedido y entrada viene de la API de Ticketory.
| Página | Ruta | Qué muestra |
|---|---|---|
| Inicio | /en | Una portada con tarjetas de entrada en vivo, y luego descubrir, cómo funciona, asientos, control de acceso, organizadores, recintos, precios, preguntas frecuentes y una llamada a la acción. |
| Eventos | /en/events | El catálogo, con búsqueda y filtros guardados en la dirección, seis eventos por página. |
| Un evento | /en/events/design-talks | Pestañas About, Schedule y Venue, el panel de reserva con los tipos de entrada, una vista previa de los asientos, guardar y el organizador. |
| Selección de asientos | /en/events/design-talks/seats | El mapa de asientos en vivo de un evento con asientos reservados, con la cuenta atrás de la reserva. |
| Pago | /en/checkout | Los datos del comprador, el método de pago y las condiciones. Se abre desde una selección reservada. |
| Confirmación del pedido | /en/orders/TKT-1042/confirmation | Un pase con código QR por entrada, las entradas en PDF, un archivo de calendario y el estado del correo de entradas. Solo su comprador puede abrirlo. |
| Mis entradas, pedidos, perfil | /en/account/tickets, /en/account/orders, /en/account/profile | Las páginas propias del asistente que ha iniciado sesión. |
| Eventos guardados | /en/saved | Los eventos que el asistente marcó con una estrella. |
| Recintos, organizadores | /en/venues, /en/organisers | Directorios, cada uno con una página por recinto u organizador y sus eventos. |
| Precios, preguntas frecuentes, contacto | /en/pricing, /en/faq, /en/contact | Planes de ejemplo y la comisión de reserva, preguntas frecuentes y el formulario de contacto. |
| Iniciar sesión, crear una cuenta | /en/auth/login, /en/auth/register | Con el restablecimiento de contraseña y la verificación del correo a su lado. |
| Privacidad, condiciones, cancelaciones | /en/privacy, /en/terms, /en/cancellation-policy | Textos de plantilla en messages/legal que debes reescribir para tu negocio antes de publicar. |
"Sell tickets" y los enlaces de organizador envían a los organizadores al inicio de sesión del panel en NEXT_PUBLIC_DASHBOARD_URL.
El catálogo de eventos
- Una búsqueda sobre títulos, resúmenes, recintos, ciudades y organizadores, una ciudad, un rango de fechas y una categoría (
workshop,talk,festival), guardados en la dirección comoq,city,from,to,categoryypage, de modo que una búsqueda se puede compartir, recargar y recorrer con atrás y adelante. - Solo aparecen los eventos públicos próximos, los más cercanos primero. Los borradores, los no listados, los cancelados y los archivados nunca aparecen; un evento no listado se vende solo con su enlace.
- Unos datos de ejemplo recién creados listan 22 eventos de cuatro organizadores, tres de ellos en curso.
La página del evento y la selección de asientos
- Un evento no tiene fotografía: su título, su fecha y su color se dibujan como una entrada. La pestaña Schedule muestra la agenda en la zona horaria del propio evento, y la pestaña Venue su acceso, transporte y aforo.
- Asientos reservados: Select seats abre el mapa de asientos. Al elegir el primer asiento empieza la reserva, que guarda los asientos durante el tiempo de reserva del organizador (diez minutos en los datos de ejemplo), contado con el reloj del servidor. El mapa se vuelve a leer cada 20 segundos, funciona con el teclado y tiene una vista de lista accesible y zoom. Un pedido reserva como máximo 8 asientos.
- Entrada general: el comprador elige una cantidad en la página del evento y pulsa Continue, que reserva las plazas.
- Un evento agotado sigue abierto y aún se puede guardar; uno cancelado lo indica y no vende nada.
Pago
El pago no necesita cuenta. El comprador indica nombre, apellido y correo, elige Stripe, PayPal o Test payment (el que ofrezca la API), acepta las condiciones y pulsa Continue to payment. El pago en sí ocurre en la página del proveedor, o en la página de pago de prueba que lo sustituye; nunca hay un campo de tarjeta en el sitio web. Las entradas gratuitas no muestran método de pago, y Get tickets abre la confirmación al instante.
La reserva pertenece a la pestaña del navegador que la hizo. La confirmación muestra los pases solo cuando la API informa de que el pedido está pagado.
La cuenta del asistente
- Crear una cuenta: nombre, apellido, correo y una contraseña de 8 a 72 caracteres con al menos una letra y un dígito. La API envía por correo un código de verificación de seis dígitos, válido durante 24 horas; sin servicio de correo, el código se escribe en el registro de la API.
- Los pedidos de invitado se unen a la cuenta: una vez aceptado el código, cada pedido hecho con ese correo pasa a ser de la cuenta.
- Mis entradas: reservas próximas y pasadas con un calendario, y cada pase con su código QR, su PDF y su archivo de calendario.
- Pedidos: cada pedido con su recibo y una línea de tiempo de lo que le ocurrió.
- Eventos guardados: la estrella de un evento lo guarda en la cuenta. Un visitante que no ha iniciado sesión es enviado primero a iniciarla.
- Perfil: el nombre y el correo (un correo nuevo pide verificarse de nuevo) y dos preferencias de correo. Event reminders (activado por defecto) envía un correo un día antes de cada evento para el que el asistente tiene entradas, con la lista. News and offers solo se guarda como elección del asistente: la plantilla no envía correos de novedades. Los correos de entradas, recibos y reembolsos siempre se envían.
- Iniciar sesión: Remember me mantiene al asistente con la sesión iniciada 30 días en lugar de uno. Un correo incorrecto y una contraseña incorrecta se leen igual, y el enlace de restablecimiento de contraseña funciona durante una hora.
Los datos de ejemplo incluyen un asistente con ocho pedidos y cuatro eventos guardados; sus datos de acceso están en la guía de instalación.
El formulario de contacto
Un nombre, un correo, un asunto (una pregunta general, entradas y pedidos, vender como organizador, el plan Scale o prensa) y un mensaje de 10 a 2000 caracteres. Cada uno se convierte en una consulta en el panel, con una notificación a los miembros del equipo que pueden leer consultas.
El formulario lleva un campo oculto que atrapa a los bots, envía el mismo mensaje una sola vez y acepta cinco envíos por dirección en diez minutos. Detrás de un proxy inverso, define TRUST_PROXY=1 en el .env de la API, o todos los visitantes comparten la cuota del proxy.
Cómo llegan los cambios a las páginas
Las páginas de inicio, evento, recinto y organizador se prerrenderizan y se conservan una hora como máximo. Cuando un evento se publica, se edita, se cancela o se agota, la API le dice al sitio web que las reconstruya al instante, siempre que ambos compartan el mismo REVALIDATE_SECRET. Docker Compose lo configura solo; sin Docker, pon el mismo valor en back-end/.env y storefront/.env. La disponibilidad de asientos, las reservas, las entradas y las páginas de la cuenta se leen siempre en vivo.
Buscadores
- Cada página define su propio título, descripción, dirección canónica e idioma alternativo, construidos a partir de
NEXT_PUBLIC_SITE_URL, así que defínelo con tu dirección real antes de construir. /sitemap.xmllista cada página pública en ambos idiomas, cada evento próximo del catálogo, y cada recinto y organizador./robots.txtapunta a él y mantiene a los rastreadores fuera de las páginas de cuenta, pago, pedido e inicio de sesión.- Las páginas de cuenta, pago, confirmación, inicio de sesión, eventos guardados y selección de asientos están marcadas como
noindex.
Etiquetas de analítica y seguimiento
Hay seis redes conectadas. Activa una poniendo su id en storefront/.env (con Docker Compose, en el .env junto a docker-compose.yml) y volviendo a construir; un id en blanco no carga ningún script.
| Variable | Red |
|---|---|
NEXT_PUBLIC_GTM_ID | Google Tag Manager |
NEXT_PUBLIC_GA4_MEASUREMENT_ID | Google Analytics 4 |
NEXT_PUBLIC_META_PIXEL_ID | Facebook e Instagram |
NEXT_PUBLIC_TIKTOK_PIXEL_ID | TikTok |
NEXT_PUBLIC_SNAPCHAT_PIXEL_ID | Snapchat |
NEXT_PUBLIC_PINTEREST_TAG_ID |
| Evento | Cuándo |
|---|---|
page_view | Cada cambio de ruta |
view_event | Se muestra una página de evento |
save_event | Se guarda un evento |
begin_checkout | Se envían los datos del pago y el comprador sale hacia el pago |
purchase | Se muestra por primera vez una confirmación pagada |
contact_submit | Se recibe el formulario de contacto |
- Si GA4 funciona dentro de tu contenedor de Tag Manager, deja en blanco el id de GA4, o cada sesión se contará dos veces.
NEXT_PUBLIC_ANALYTICS_CURRENCY(USDpor defecto) se envía con un evento que no lleva moneda propia, yNEXT_PUBLIC_ANALYTICS_DEBUG=trueregistra cada evento en la consola del navegador.- Las etiquetas se cargan en cuanto carga la página. Si atiendes a visitantes de la UE o del Reino Unido, pon antes delante un banner de consentimiento.
Cómo encaja el código del sitio web
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
La estructura del código y las convenciones que debes mantener al cambiarlo.