Script de menú QR y sitio web para cafetería

Nota sobre los idiomas

La interfaz del sitio y del panel de administración viene en turco e inglés. El idioma del sitio y el del panel se eligen por separado en «Site ayarları» (Ajustes del sitio); además, puede cambiar el idioma del panel con el icono del globo, arriba a la derecha del panel.

Se pueden añadir más idiomas: copie el archivo en.php de la carpeta dil del paquete y tradúzcalo (los pasos están en dil/OKUBENI.txt). El idioma añadido aparece automáticamente en las listas de idiomas de los ajustes del sitio, y las actualizaciones no tocan sus archivos de idioma. Los textos sin traducir aparecen en inglés; si lo prefiere, pueden mostrarse en turco.

Los contenidos que publica (productos, categorías, páginas, entradas del blog, etc.) no se traducen; permanecen en el idioma en que los escribe. Los mensajes de aviso y los formatos de fecha e importe siguen el idioma elegido. Los correos de formulario que recibe se redactan en el idioma del panel.

Cuando esta página nombra una sección del panel o del sitio, el nombre se da tal como aparece en la interfaz turca, entre comillas, seguido de su traducción entre paréntesis; en la interfaz en inglés, las mismas secciones aparecen con sus nombres en inglés.

Para quién es

Creado para cafeterías, restaurantes, pastelerías y tiendas de café, y para las agencias que les hacen el sitio. Su cliente escanea con la cámara del móvil el código QR de la mesa o de la puerta, y el menú, dividido en categorías, se abre con sus precios en el teléfono. Cuando actualiza el menú y los precios en el panel de administración, el código QR impreso abre el mismo menú; solo vuelve a imprimir el código si cambia la dirección de su sitio.

Los códigos QR se crean en el panel: los códigos listos para la página de inicio, para todo el menú y para cada categoría se descargan como PNG o SVG, o se imprimen como tarjeta de mesa junto con su logotipo. Con el código viene un sitio de cafetería completo: control deslizante de bienvenida, productos populares, blog, página «Quiénes somos», horario y un formulario de contacto con casilla de consentimiento KVKK (la KVKK es la ley turca de protección de datos personales).

No necesita saber programar. El asistente del navegador se encarga de la instalación y usted introduce sus contenidos en el panel de administración.

Alcance

Este script es un sitio de menú QR y de presentación de cafetería. Los productos del menú se muestran con su precio; el sitio no tiene carrito, pago en línea, pedido en línea, llamada al camarero ni gestión de mesas. Un código QR abre una única dirección de menú: usted usa el mismo código de menú en todas las mesas y no se genera ningún código específico para cada mesa. Los códigos de categoría pueden imprimirse aparte (por ejemplo, una tarjeta distinta para las bebidas). Le recomendamos ver la demo antes de decidirse.

Funciones del sitio

Página de menú

• Un menú fácil de recorrer en el móvil: en la página de menú, las categorías se listan sección por sección, una debajo de otra. La barra de categorías de arriba permanece en la parte superior de la pantalla al desplazarse, se desliza hacia los lados y marca la categoría en la que se encuentra a medida que baja. Tocar el nombre de una categoría lleva a esa sección. En pantallas pequeñas, los productos aparecen en tarjetas de dos columnas; el número de columnas crece a medida que la pantalla se ensancha.
• Página de categoría: cada categoría tiene una dirección que muestra solo sus propios productos; el código QR de categoría abre esta página. Los productos publicados cuya categoría se eliminó o nunca se eligió aparecen bajo «Diğer» (Otros) en el menú completo.
• Tarjeta de producto: imagen, nombre del producto, descripción breve y precio. Las imágenes se cargan a medida que se desplaza la página; un producto sin imagen aparece con un icono neutro.
• Página de producto: al tocar la imagen se abre una vista ampliada. La página muestra el nombre del producto, un enlace a la categoría, la descripción breve, el precio, las etiquetas (por ejemplo, vegano, picante) y «Ürün Detayları» (Detalles del producto) con texto enriquecido; debajo se muestran hasta cuatro productos similares de la misma categoría. Un producto con el estado «Taslak» (Borrador) no aparece en el sitio.
• Precios: se introducen y se muestran en liras turcas (₺). Un producto cuyo precio se deja vacío o en 0 se muestra sin precio.
• Orden: las categorías y los productos se ordenan con el campo «Sıra» (Orden); el número menor va primero.

Página de inicio

• Orden en la página de inicio: control deslizante de bienvenida, productos populares, menú con pestañas de categorías, tarjetas de categorías y últimas entradas. Una sección sin registros no aparece.
• Control deslizante de bienvenida: usted añade diapositivas en el panel; cada una lleva título, subtítulo, texto y enlace del botón, orden e imagen. El botón aparece solo si su texto y su enlace están rellenados. Con más de una diapositiva funcionan las flechas y los puntos indicadores, y las diapositivas pasan solas. Se muestran como máximo diez diapositivas.
• Productos populares: los productos a los que da la «Popüler işareti» (Marca «Popular») aparecen en la página de inicio en un deslizador con nombre, imagen y precio. En dispositivos con el ajuste de reducir movimiento activado, el deslizador no avanza solo.
• Menú con pestañas de categorías: hay una pestaña por cada categoría que tiene productos; si ha marcado productos populares, la primera pestaña es «Öne Çıkanlar» (Destacados). En cada pestaña los productos se listan como tarjetas; los botones «Kategoriyi aç» (Abrir categoría) y «Tüm menüyü gör» (Ver todo el menú) llevan a la página de menú.
• Tarjetas de categorías: la imagen, el nombre y el número de productos de la categoría se muestran en un deslizador; tocar una tarjeta abre el menú de esa categoría.
• Últimas entradas: las tres entradas de blog más recientes se muestran con imagen, fecha, autor y descripción breve.
• Títulos de sección: usted escribe en el panel, con sus propias palabras, el título y el subtítulo de cada sección de la página de inicio. Un título que deja vacío no aparece en el sitio.

Blog, páginas y contacto

• Blog: publica entradas con título, categoría, estado, autor, etiquetas, descripción breve, imagen y texto enriquecido. La lista se filtra con chips de categoría; la columna lateral de una entrada muestra las categorías y las últimas entradas. Una entrada con el estado «Taslak» (Borrador) no aparece en el sitio.
• Páginas adicionales: añade en el panel tantas páginas como quiera (por ejemplo, información sobre alérgenos, aviso de privacidad KVKK, política de privacidad). Para cada página elige si se muestra en el menú superior (bajo «Sayfalar», Páginas) y en el pie del sitio.
• Quiénes somos: una página de presentación de su negocio formada por un título y texto enriquecido.
• Página de contacto: un formulario con los campos nombre, correo electrónico, teléfono y mensaje (todos obligatorios); a su lado, la breve presentación del negocio, la dirección, un teléfono que inicia una llamada al tocarlo, el correo, el horario y el mapa (código de inserción de Google Maps u OpenStreetMap). La información y el mapa que deja vacíos no aparecen.
• Horario: introduce un texto para cada día de la semana (por ejemplo, 08:00 - 22:00, o «Kapalı» (Cerrado) para un día de cierre). El texto se muestra al visitante tal como lo escribe; un día que deja vacío no se muestra. El horario aparece en la página de contacto y en el pie del sitio.
• Correo para usted: cuando configura «E-posta ayarları» (Ajustes de correo) y activa las notificaciones, cada mensaje del formulario de contacto le llega también por correo. Si responde al correo, la respuesta va a la dirección del visitante. Aunque no configure el correo, los mensajes se listan en el panel. Al visitante no se le envía ningún correo.
• Casilla de consentimiento KVKK: obligatoria en el formulario de contacto. El enlace al aviso de privacidad lleva a la página que elige en el panel; el mismo enlace aparece en el pie del sitio. El texto que viene con el contenido de ejemplo es solo un ejemplo; debe preparar su propio aviso de privacidad.

Aspecto y buscadores

• Tema claro y oscuro: con el botón del menú superior, el visitante elige la apariencia clara u oscura; la elección se guarda en el navegador de esa persona.
• Color principal: elige un color principal en el panel. Se aplica a los botones, al fondo del control deslizante de bienvenida, a los elementos activos o seleccionados del menú y de las barras, a los enlaces y a los precios. El color del texto sobre el color se elige automáticamente para que siga siendo legible.
• Logotipo, icono del sitio y pie: sube su logotipo y el icono de su sitio (favicon); si no sube un logotipo, el nombre del negocio aparece como texto. El pie contiene la presentación del negocio, enlaces de categorías, un menú rápido, los datos de contacto y el horario.
• Redes sociales: sus enlaces de Facebook, X (Twitter), YouTube, Instagram y WhatsApp aparecen como iconos en el pie. Un icono que no ha rellenado no se dibuja.
• Activar y desactivar secciones: activa o desactiva Quiénes somos, Blog, la página de contacto, el control deslizante de inicio, los productos populares, las tarjetas de categorías y el horario desde una sola página. Una sección desactivada desaparece del menú y de la página de inicio; la dirección de una sección que tiene página tampoco se abre.
• Firma del pie: puede cambiar o quitar el texto «TiklaWeb tarafından geliştirildi» (Desarrollado por TiklaWeb) al final del sitio.
• Adaptado al móvil: el sitio se adapta a pantallas de móvil, tableta y ordenador; en pantallas pequeñas el menú se convierte en un panel que se abre desde un lado, y al desplazarse aparece un botón «volver arriba».
• Título y descripción propios de cada página: cada página lleva su propio título («Página | Negocio»), su descripción y etiquetas para compartir en redes sociales (Open Graph). En las páginas de producto y de entrada, la imagen para compartir procede de la imagen del producto o de la entrada. El título, la descripción y las palabras clave del sitio se introducen en «Site ayarları» (Ajustes del sitio).

Panel de administración

• «QR Kod» (Código QR): una caja independiente para la página de inicio, todo el menú y cada categoría: vista previa, dirección que abre el código y botones de descarga. El código se descarga como PNG en tamaños de 512, 1024 y 2048 píxeles y como SVG. La vista de impresión para tarjetas de mesa existe en A6, A4 y cuatro tarjetas A6 en una hoja A4 (para recortar); la tarjeta muestra su logotipo (o el nombre del negocio si no hay logotipo), el código QR, una línea de texto y la dirección del sitio. El texto de la tarjeta (por defecto «Menüyü görmek için okutun», Escanee para ver el menú) se cambia en la pantalla de impresión.
• Dirección del QR: los códigos llevan la dirección de su sitio desde la que se abrió el panel. Si la dirección cambia, debe descargar e imprimir de nuevo los códigos; también puede escribir la dirección a mano y actualizar los códigos.
• «Özet» (Resumen): número de mensajes sin leer, de productos del menú publicados, de categorías y de entradas del blog, un acceso directo a la página Código QR y los últimos mensajes. El número de mensajes sin leer aparece como insignia en el menú lateral.
• «Mesajlar» (Mensajes): los mensajes del formulario de contacto se reúnen en una lista. Nombre, teléfono, correo, fecha y estado de lectura aparecen en la lista; en el detalle lee el mensaje y la hora del consentimiento KVKK, y puede eliminar el registro. La lista tiene búsqueda y ordenación.
• Gestión del menú: para los productos introduce nombre, categoría, precio, orden, estado (publicado o borrador), la «Popüler işareti» (Marca «Popular»), una descripción breve, etiquetas, una descripción detallada y una imagen. Para las categorías introduce nombre, orden e imagen. Las listas tienen búsqueda y ordenación.
• Blog y páginas: las entradas del blog, las categorías del blog y las páginas adicionales se añaden, editan y eliminan. En los campos de texto enriquecido se usa el editor Summernote.
• «Site içeriği» (Contenido del sitio): control deslizante de inicio, «Ana sayfa başlıkları» (Títulos de la página de inicio), «Hakkımızda» (Quiénes somos), «Çalışma saatleri» (Horario), enlaces de redes sociales y «Bölümleri aç/kapat» (Activar/desactivar secciones).
• Subida de imágenes: se suben archivos JPG, PNG o WebP (hasta 8 MB). Si la extensión GD está activa en el servidor, las imágenes se convierten a WebP y las que tienen el lado largo superior a 1600 píxeles se reducen; así el menú que se abre en el móvil carga más rápido.
• «E-posta ayarları» (Ajustes de correo): cuando introduce sus datos SMTP y activa la notificación, funcionan los correos de contacto. Los ajustes se prueban con el botón «Deneme e-postası gönder» (Enviar correo de prueba).
• «Site ayarları» (Ajustes del sitio): título, descripción y palabras clave del sitio, nombre del negocio, teléfono, enlace de WhatsApp, correo, dirección, breve presentación del negocio, línea de derechos de autor, color principal, página del aviso de privacidad KVKK, mapa, logotipo, icono del sitio, idioma del sitio e idioma del panel.
• Usuarios y permisos: añade cuentas de administrador y de editor. El editor gestiona los mensajes, la página Código QR y las secciones de contenido; «Site ayarları», «E-posta ayarları» y «Kullanıcılar» (Usuarios) son solo para el administrador. Los permisos se comprueban en el servidor. Cada usuario cambia su nombre y su contraseña en la página «Profil ve şifre» (Perfil y contraseña).
• Olvidé mi contraseña: la contraseña se restablece por correo con el enlace del acceso al panel (si «E-posta ayarları» está configurado). El enlace de restablecimiento es válido durante 1 hora y se puede usar una vez.
• Código personalizado: en «Site ayarları» añade su propio código (por ejemplo, un script de estadísticas) en la cabecera del sitio, al principio de su cuerpo y al final de la página. Estos campos son solo para el administrador.

Instalación y actualizaciones

• Asistente de instalación en cinco pasos: requisitos, licencia, base de datos, datos del sitio y del administrador, finalización. El asistente comprueba por sí mismo su servidor.
• Idioma de instalación: el turco o el inglés se elige arriba a la derecha del asistente. Con una instalación en inglés, el contenido inicial y de ejemplo también viene en inglés.
• Instalación con contenido de ejemplo o vacía: puede empezar con el sitio lleno como la demo y editarlo, o introducir los contenidos desde cero. La lista «Mesajlar» (Mensajes) empieza vacía en ambos casos.
• Actualización desde el panel: descarga el paquete zip de la nueva versión desde su panel de cliente de tiklaweb.net y lo sube en la página «Güncelleme ve lisans» (Actualización y licencia) del panel de administración. Antes de la operación se hace una copia de seguridad de los archivos y de la base de datos. Si se produce un error, el sitio vuelve a su estado anterior. Las imágenes que subió, sus ajustes y sus contenidos se conservan.
• Paquetes verificados: se comprueba la firma del paquete de actualización; solo se instalan paquetes descargados de tiklaweb.net.

La guía de instalación detallada viene en el paquete que descarga, como archivo KURULUM.html (escrito en turco).

Licencia

Cada licencia es para un único nombre de dominio, que usted indica al hacer el pedido. El cambio del nombre de dominio es de pago y se gestiona mediante una solicitud de soporte. La licencia no se transfiere gratis. El sitio no se abre en un nombre de dominio sin licencia, y el visitante es redirigido a una página de aviso de licencia. Para usarlo en otro nombre de dominio se necesita una licencia aparte.

Características técnicas

• PHP 8.2 o superior, MySQL o MariaDB
• Base: PHP puro, PDO y consultas preparadas. Sitio: Bootstrap 5, jQuery, Slick, Font Awesome Free 6; la fuente (Raleway) se guarda localmente en el paquete y no se llama a ningún servicio externo de fuentes. Panel: Bootstrap 4, DataTables y el editor de contenido Summernote
• Los códigos QR se generan en su servidor con la biblioteca chillerlan/php-qrcode, con licencias MIT y Apache-2.0; ninguna petición va a un servicio QR externo. El archivo PNG se escribe sin la extensión GD
• En los códigos QR solo se escriben las direcciones propias de su sitio; una dirección de sitio escrita a mano se transporta con enlaces firmados
• El correo se envía con PHPMailer 6.9; la contraseña SMTP se guarda cifrada. El registro del formulario se escribe primero en la base de datos; si el servidor lo permite, el correo se envía después de responder al visitante
• Los textos de la interfaz se guardan en los archivos de idioma del paquete (turco e inglés listos, se pueden añadir nuevos idiomas)
• Token de formulario firmado y campo trampa oculto en el formulario de contacto, verificación CSRF en las acciones del panel; límite de intentos en el acceso al panel, el restablecimiento de contraseña y el formulario de contacto
• El tipo de las imágenes subidas en el panel se verifica a partir del contenido (JPG, PNG, WebP; hasta 8 MB); en la carpeta de subidas no se ejecuta PHP
• Los campos de texto enriquecido del panel se filtran en el servidor al guardar (HTMLPurifier); el panel de administración envía una cabecera de política de seguridad de contenido (CSP); las contraseñas de los administradores se guardan con hash
• El campo de mapa solo acepta direcciones de inserción de Google Maps y OpenStreetMap
• Los datos de la base de datos y las copias de seguridad se guardan, si el alojamiento lo permite, en una carpeta fuera de la raíz web
• Cabeceras de seguridad, HSTS en HTTPS; zona horaria Europe/Istanbul
• Antes de la venta se realizó una auditoría de seguridad compuesta por una revisión del código y pruebas de ataque en vivo

Demo

Puede explorar el sitio y el panel de administración en una demo de solo lectura. La demo está instalada en turco; en el panel de administración puede cambiar el idioma del panel a inglés con el icono del globo, arriba a la derecha (esta elección solo se guarda en su navegador). El nombre del negocio, los productos, los precios, las entradas y las fotos de la demo son todos contenido de ejemplo. En el panel de la demo puede abrir la página «QR Kod» (Código QR), descargar los códigos y probar la vista de tarjetas de mesa; los códigos llevan la dirección del sitio de la demo. En la lista «Mesajlar» (Mensajes) verá algunos registros de ejemplo. WhatsApp, los enlaces de redes sociales y el mapa están vacíos en la demo; aparecen en el sitio cuando los rellena en el panel.

• Sitio: https://018.tiklaweb.net
• Panel de administración: https://018.tiklaweb.net/admin
• Correo de la demo: demo@tiklaweb.net
• Contraseña de la demo: demo1234

En la demo no se pueden guardar cambios; el formulario de contacto no registra nada y no envía correo. La demo se restablece cada noche. Las páginas sensibles, como los ajustes de correo, los usuarios y los formularios de contraseña, no se pueden ver en modo demo, y «Olvidé mi contraseña» está desactivado en la demo. Estos datos de acceso son solo para el sitio de la demo. En la instalación que compre, la cuenta de administrador la define usted.

Soporte

Si se atasca, puede abrir una solicitud de soporte desde su panel de cliente de tiklaweb.net o escribir a destek@tiklaweb.net.