• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto

Tutorial Bettaso: 5. Sistema de Reservas (Appointments) (parte 3)

El 12 de febrero de 2019 por dani Deja un comentario

Aviso: Esta entrada tiene 2 o más años, es posible que el método difiera ligeramente, las capturas de pantalla no se correspondan con la versión actual o que la herramienta/complemento ya no esté disponible.

Personalizar la página de Reservas

Si recordamos al inicio del curso creamos una página interna llamada Reservas, hasta ahora esta página estaba en blanco y es el momento de editarla adentrándonos un poco en el Constructor Visual que nos ofrece Bettaso, el Power Builder.

Nos dirigimos a la sección de páginas internas en WordPress y editamos la página de Reservas. Dentro hacemos clic en Use Power Builder para abrir el Constructor Visual:

La idea es mostrar unas ilustraciones con el tipo de mesas que cuenta nuestro restaurante para que el usuario decida cual reservar y llevarlo a una segunda página donde podrá elegir qué fecha y hora reservar.

Para que podáis seguir el mismo ejemplo, os voy a dejar las ilustraciones de las mesas por aquí para descargarlas:

Vamos a comenzar añadiendo una nueva columna:

Y elegimos la distribución que tendrá la nueva columna. Para el ejemplo vamos a seleccionar la distribución 1/4 – 1/2 – 1/4:

Necesitamos añadir un módulo de imagen en cada sección, vamos a empezar por la izquierda añadiendo un nuevo módulo:

Y seleccionamos el módulo de Image.

Cargamos la primera ilustración correspondiente a la mesa para 2 personas haciendo clic en Upload an Image:

Y rellenamos algunos datos sobre la imagen, como el Texto Alternativo (texto que se muestra si ocurre un error en la carga de la imagen).

Y muy importante especificar el link de la página a la que nos llevará la ilustración. Esta página aún no la hemos creado, podemos volver luego y pegar la URL de la página cuando la sepamos, pero para adelantar trabajo vamos a poner la URL manualmente (luego nos acordaremos de poner el mismo slug al crear la página).

En la sección central que es la más ancha, la aprovechamos para cargar la ilustración de la mesa para 6 personas.

A esta le pondremos de link manual: http://localhost/bettaso/reservas/mesa-para-6-personas/…

Y finalmente cargamos la ilustración para la mesa de 4 personas,

A la que pondremos como link manual: http://localhost/bettaso/reservas/mesa-para-4-personas/

Adicionalmente vamos a añadir un pequeño módulo de texto, para indicar al cliente que seleccione el tipo de mesa que desea reservar:

Redactamos el texto…

Podemos aplicar algunos estilos, como por ejemplo, dejar un poco de margen superior e inferior, desde la pestaña Advanced Design Settings.

Guardamos los cambios y este es el aspecto que debería tener ahora nuestra página de Reservas:

Crear las páginas individuales para los tipos de mesas

Ya solo nos falta crear una página por cada tipo de mesa que tengamos y asociarle su calendario personalizado.

Para ello añadimos una nueva página y empezamos por la de mesa para 2 personas. En la parte derecha «Atributos de página» vamos a seleccionar como Superior la página de Reservas. Así generaremos una URL amigable del tipo /bettaso/reservas/mesa-para-2-personas/ y de paso tendremos mejor ordenadas nuestras páginas internas.

A través del Power Builder vamos a añadir un módulo de Calendario de Reservas.

Insertamos una columna de una sola sección:

Y le asignamos un módulo de Booked Calendar:

Especificamos el ID del calendario (recordemos que tenemos los IDs en Appointments – Settings – Shortcodes. Si dejamos en blanco el campo Year y Month, el calendario mostrará el año y mes en curso, que es lo que nos interesa. En otro tipo de web de reserva puede ser interesante marcar como fijo un mes o año específico, por ejemplo para reservar entradas a un evento… Activar el Switcher permite moverse en el calendario a través de los meses.

Guardamos la página y este es el aspecto que debería presentar cuando el usuario seleccione una mesa para 2 personas.

Si hemos rellenado bien los slots de tiempo para reservar, al hacer clic en cualquier día veremos el listado de turnos disponibles para reservar:

Cuando el cliente seleccione uno de los turnos, abrirá una ventana donde se le permitirá registrarse para finalizar la reserva:

Una vez enviada la solicitud, aparecerá la ventana de agradecimiento que configuramos en los ajustes iniciales:

En este momento, tanto el cliente como el administrador recibirán una notificación por correo electrónico de la nueva solicitud de reserva. Si acudimos al panel de control, veremos la notificación como Pendiente:

Ya solo nos queda aprobarla:

En ese momento se descontará 1 slot de tiempo para la franja de 08:00pm – 11:00pm del día 20 de enero.

Comprar plantilla Bettaso

Mi enlace de afiliado: http://bit.ly/2GtEMcj (La compañía me regala una pequeña comisión por la venta, sin que a ti te cueste un céntimo más, y de este modo me ayudarás a mantener la web y seguir añadiendo nuevos contenidos). Además, si me envías un correo electrónico a daniel@gestionatuweb.net, te enviaré las traducciones, tanto de la plantilla como de los plugins que la acompañan.

Enlace normal: https://www.templatemonster.com/es/temas-wordpress-tipo-58667.html

Siguiente…

Tutorial Bettaso: 6. Habilitar la venta online (e-Commerce) (parte 1)

Archivado en: Bettaso Web Restaurantes, Cursos Etiquetado como: bettaso

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad

Hosting recomendado

Raiola Networks

Barra lateral principal

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies