Cómo crear una web de pedidos de comida: menú, carrito, horarios de recogida y pantalla de cocina

Una web de pedidos de comida permite a los clientes elegir platos de tu menú, personalizarlos, elegir una hora de recogida o de entrega, pagar y recibir una confirmación, mientras la cocina ve cada pedido aparecer en una pantalla y lo marca como listo. Para crearla necesitas un menú con opciones (tamaños, extras, «sin cebolla»), un carrito que calcule bien los totales, franjas horarias con límites para que la cocina no se sature, pagos con tarjeta y un tablero sencillo de pedidos para el personal. Un creador de apps con IA puede generar todo esto a partir de una descripción clara. El trabajo está en los detalles: el horario de apertura, los productos agotados, los límites de pedidos y qué pasa cuando un pago se realiza pero el pedido no se guarda.

Lo que necesita la web

Páginas

• Cliente: menú por categorías, ficha de cada producto con sus opciones, carrito, pedido (nombre, teléfono, recogida o entrega, hora), pago y una página de confirmación con el número de pedido y su estado.
• Cocina: una lista en directo de pedidos nuevos, en preparación y listos, con los productos, opciones, notas y la hora de recogida de cada uno.
• Propietario: editor del menú (productos, precios, fotos, opciones, agotados), horario de apertura, límites por franja y un resumen de ventas.

Datos

Guarda el nombre y el precio del producto en cada línea del pedido en el momento de hacerlo. Si después cambias el menú, los pedidos antiguos deben seguir mostrando lo que el cliente pagó realmente.

Permisos

Los clientes solo ven su propio pedido a través del enlace de confirmación. El personal de cocina ve y actualiza los pedidos, pero no puede cambiar precios. El propietario edita el menú y los ajustes. Es habitual compartir un acceso de cocina en una tablet, pero el propietario debería tener el suyo propio.

Decisiones y compromisos

Recogida, reparto o ambos

Solo recogida es mucho más sencillo y es por donde deberían empezar la mayoría de locales pequeños. El reparto añade zonas, tarifas, pedidos mínimos, validación de direcciones, asignación de repartidores y una lista más larga de cosas que pueden fallar.

Lo antes posible o con hora programada

«Lo antes posible» es fácil de ofrecer, pero difícil de cumplir en una noche con mucho trabajo. Las franjas programadas con límite —por ejemplo, no más de ocho pedidos por ventana de 15 minutos— protegen a la cocina y fijan expectativas. Aun así puedes mostrar «primera hora disponible: 18:45».

Pago por adelantado o al recoger

Pagar en línea reduce las ausencias y agiliza la recogida. Cobrar al recoger es más sencillo de programar, pero invita a los pedidos falsos. La mayoría de locales cobran con tarjeta por adelantado mediante un checkout alojado, como Stripe Checkout; nuestra guía de pagos explica la configuración. Las propinas, los impuestos y las normas de tickets varían según el país: consulta la normativa local.

Cómo llegan los pedidos a la cocina

Opciones: una pestaña del navegador en una tablet que se actualiza sola (lo más sencillo), un correo o mensaje por pedido como copia de seguridad, o enviar los pedidos a una impresora de tickets (requiere hardware adicional y configuración). Un aviso sonoro al llegar un pedido nuevo importa más de lo que parece.

Un primer prompt que funciona

Crea una web de pedidos online para Casa Verde, una taquería de Austin, Texas, solo para recogida. Categorías del menú: Tacos, Bowls, Acompañamientos y Bebidas. Los productos tienen opciones: los tacos eligen una proteína (pollo, carnitas, champiñones +$1), una tortilla (de maíz o de harina) y extras opcionales (guacamole +$1.50, queso +$0.75); los bowls eligen una base y una proteína. Los clientes añaden productos al carrito, eligen una franja de recogida de 15 minutos dentro del horario de apertura (de martes a domingo, de 11:00 a 21:00, hora central) e introducen su nombre y teléfono, y ven el total con un impuesto de ventas del 8.25%. Limita cada franja a 8 pedidos y oculta las franjas llenas. Guarda los pedidos en una base de datos con los estados nuevo, en preparación, listo y recogido. Una página para la cocina (con inicio de sesión) muestra los pedidos del día ordenados por hora de recogida, reproduce un sonido con cada pedido nuevo y permite al personal avanzarlos. Una página para el propietario para editar el menú, marcar productos como agotados y pausar los pedidos. El pago con tarjeta llegará después; por ahora los pedidos son «pagar al recoger». Diseño atrevido, colorido y pensado para móvil, con botones grandes.

Empezar con «pagar al recoger» te permite probar todo el flujo de pedidos con el personal antes de añadir los pagos.

Pasos de construcción

1. Menú y opciones. Configura bien el menú, los grupos de opciones y los cálculos de precio. Prueba un producto con todas las combinaciones de opciones.
2. Carrito y pedido. Cantidades, notas, totales, impuestos y un selector de franjas que respete el horario de apertura.
3. Guardado del pedido y confirmación. Cálculo del total en el servidor —nunca te fíes del precio que envía el navegador— y una página de confirmación con el número de pedido.
4. Tablero de cocina. Lista en directo, sonido para pedidos nuevos, botones de estado y texto grande que se lea desde un metro de distancia.
5. Controles del propietario. Agotados, pausa de pedidos, límites por franja y horario.
6. Pagos en modo de prueba. Marca un pedido como pagado solo cuando el proveedor de pagos lo confirme, y gestiona el caso en que el pago se realiza pero el pedido no se guarda.
7. Notificaciones. Una confirmación por correo o SMS y un mensaje de «listo para recoger» a través de tu propio proveedor. Consulta cómo añadir notificaciones.
8. Un lanzamiento suave. Ponlo en marcha durante unos días con el personal y amigos, y vigila tanto la cocina como la experiencia del cliente.

Errores comunes

• Calcular los precios solo en el navegador. Cualquiera puede cambiarlos. Recalcula en el servidor.
• No tener un interruptor de agotado. Acabarás vendiendo cinco veces la última porción.
• No tener límites por franja. Un viernes con mucha gente se convierte en 40 pedidos para las 19:00.
• Información de alérgenos que falta o está desactualizada. Muestra los alérgenos de cada producto y mantenlos al día; la normativa es estricta en muchos países.
• Confusión de zonas horarias. Guarda las horas en UTC, muéstralas en la hora local del restaurante y prueba cerca de la medianoche y en los cambios de horario de verano.
• La tablet de la cocina se apaga. Mantén la pantalla encendida y comprueba que los pedidos nuevos aparecen sin recargar.

Cuándo es mejor un producto ya hecho

Si quieres que te encuentren clientes nuevos en tu zona, las plataformas de reparto traen demanda que no puedes generar fácilmente por tu cuenta, a cambio de una comisión. Si ya usas un sistema de punto de venta, comprueba si incluye pedidos online: los pedidos que llegan directamente a la caja y a la impresora de cocina son muy difíciles de superar.

Crea la tuya cuando quieras pedidos directos sin comisión de clientes habituales, un flujo de pedidos adaptado a tu forma de trabajar (pedidos anticipados para una panadería, bandejas para catering, un menú semanal de comidas preparadas) o pedidos vinculados a un programa de fidelización o a tu propia web. La guía de web para restaurantes cubre el resto del sitio alrededor de ella.

Crearla con Mythex

En Mythex describes el flujo de pedidos en el chat y aparece en una vista previa en directo que puedes revisar en un marco del tamaño de un móvil. Los pedidos y el menú viven en una base de datos Postgres que el agente añade cuando le pides que los guarde. Los pagos con tarjeta usan tu propia cuenta de Stripe, con las claves guardadas como secretos del proyecto; la receta de Stripe muestra el prompt. Los SMS o correos pasan por tu propio proveedor, ya que Mythex no tiene un producto integrado de pagos, correo ni SMS. Los webhooks de pago necesitan que la app esté publicada en una URL pública. Antes del lanzamiento, /test hace que el agente pruebe el pedido en la vista previa y te informe de lo que falla.

Para empezar con un prompt, prueba las plantillas de página de pedidos de panadería o página de pedidos de cafetería, o el creador de tiendas online para restaurantes.

Preguntas