Cómo crear un sitio web de citas dinámicas con OceanWP y Crocoblock

¿Está buscando construir un sitio web dinámico de reserva de citas? Para aquellos que piensan que es difícil de implementar, hay buenas noticias: no lo es. Hoy en día, no necesita desarrolladores, codificadores y diseñadores. Solo necesitas las herramientas adecuadas.

En este artículo, descubrirá qué hace que un sitio web de citas sea bueno. Lo guiaremos a través de toda la rutina de creación del sitio y le entregaremos las herramientas que hemos usado. Al final, descubrirá cómo crear un sistema de reservas utilizando solo OceanWP y varios complementos de Crocoblock.

Lo que hace que OceanWP y Crocoblock sean geniales juntos

• Construcción visual del sitio . Dado que Gutenberg es un editor de bloques visual, los desarrolladores de sitios web pueden ahorrar tiempo cambiando entre el panel de administración y el front-end. Bastará con crear una estructura de página en el editor y asegurarse de que la versión frontal tenga el mismo aspecto.
• Menos complementos externos . Olvídese de complementos separados para tipos de publicaciones personalizadas, formularios, gestión de reservas, campos personalizados, etc. Para poner en marcha la funcionalidad de citas, necesitará solo dos complementos de Crocoblock.
• Sin intermediarios . Significa que los desarrolladores no tienen que depender de los diseñadores. Puede tomar una plantilla de demostración de OceanWP, modificar su diseño como desee y agregarle la funcionalidad dinámica de Crocoblock.

Sitio web de citas 101

¿Qué es un sitio web de reserva de citas?

Los sitios web de citas son plataformas proveedoras de servicios en las que es posible reservar un horario determinado. A menudo, estos sitios web ofrecen servicios de pago por hora.

¿Cómo son los sitios web de citas?

Pueden ser sitios web de tarjetas de presentación de una página, donde es posible reservar un servicio particular de un solo proveedor. Por otro lado, los sitios web de citas pueden albergar múltiples proveedores. En ese caso, el sitio web tiene páginas individuales y catálogos dedicados al Proveedor y al Servicio.

¿Es difícil crear un sitio web de citas?

Ya no. En estos días, puede crear un sitio web dinámico desde cero utilizando las herramientas adecuadas: el creador de páginas que prefiera, un proveedor de temas, algún complemento de contenido dinámico y el núcleo de reserva de citas.

¿Cuáles son los principales elementos del sitio web de citas?

Estos serían un tema, tipos de publicaciones personalizadas, un motor de reserva de citas, formularios de reserva, páginas de proveedores, páginas de servicios, páginas de catálogo y listados.

¿Puedo agregar múltiples proveedores al mismo sitio web?

¿Por qué no? Varios profesionales pueden prestar un servicio. Asegúrese de asignar un proveedor al servicio para evitar confusiones en la etapa de llenado del formulario de reserva.

Sitio web de citas: Preparativos básicos

Decidimos omitir los preparativos iniciales, como obtener un nombre de dominio y elegir un proveedor de alojamiento. En su lugar, nos centraremos en la esencia. Para aquellos que quieran profundizar en los detalles, hay un video súper informativo de Ferdy Korpershoek.

Obtener complementos de Crocoblock

Crocoblock presentó su precio actualizado hace seis meses. ¿Qué lo hace genial? Es el plan de suscripción personalizado . Ahora, para crear un sitio web de citas viable, no tendrá que gastar mucho. Vaya a la página de precios de Crocoblock, despliegue la pestaña JetPlugins y agregue los complementos necesarios al carrito.

Necesitarás JetEngine – un complemento de contenido dinámico que permite crear tipos de publicaciones personalizadas – y JetAppointment – un plugin de reserva de servicios de WordPress.

Tal paquete personalizado le costará $45/año para un sitio web y $93/año para sitios web ilimitados. Además, recibirá actualizaciones de complementos y soporte de calidad durante todo un año. Cargue estos complementos en el panel de control de WordPress y prepárelos para seguir trabajando.

Instale el tema OceanWP y elija una plantilla de sitio web

Hay dos formas de instalar el tema principal: la tradicional y la forma de Crocoblock.

Instalar el tema OceanWP de la manera tradicional

Ve a Apariencia > Temas en el panel de administración de WordPress y presiona " Agregar nuevo ". Puede utilizar la barra de búsqueda para localizar el tema. Una vez encontrado, instale OceanWP y actívelo.

Instalar el tema OceanWP al estilo Crocoblock

Utilice el asistente de instalación de Crocoblock. Puede descargarse de la cuenta de Crocoblock y luego usarse para instalar OceanWP.

Para elegir una plantilla de demostración, vaya a Panel de temas > Instalar demostraciones y elija la que necesita. Usaremos la plantilla de demostración Gym hoy. Recuerde que una demostración no puede funcionar según lo previsto si faltan algunas de las extensiones premium. Es posible que desee obtenerlos primero.

Tan pronto como se complete la instalación de la plantilla de demostración, estará listo para crear un sitio web de citas dinámico.

Creación de un sitio web de citas personalizado

Dentro de cada sitio web de programación de citas y eventos, hay tipos de publicaciones personalizadas para proveedores y servicios , núcleo de reserva de citas automatizado, integración de calendario y un formulario de reserva. Estos son elementos esenciales, pero tiene la libertad de ampliar la lista como desee.

Ahora, démosle un buen uso a los complementos JetEngine y JetAppointment.

Creación de tipos de publicaciones personalizadas

¿Por qué necesitas crear un CPT? Lo ayudarán a organizar las publicaciones del sitio web: servicios a servicios, proveedores a proveedores. Posteriormente, estas publicaciones pueden interrelacionarse fácilmente para permitir que los usuarios del sitio web reserven un servicio en particular de quienes lo brindan.

Siga JetEngine > Tipos de publicaciones > Agregar nueva ruta en el panel de administración de WordPress para crear un CPT. Recuerde que necesita dos tipos de publicaciones: una para proveedores y otra para servicios. Dado que estamos creando un sitio web de Gimnasio, los tipos de publicaciones se denominarán Entrenadores y Entrenamientos en consecuencia.

Agregue los metacampos necesarios a ambos tipos de publicaciones. Para el CPT de Entrenadores , estos podrían ser:

• foto;
• breve biografía;
• experiencia laboral;
• logros;
• galería;
• contactos.

Para los entrenamientos CPT , los metacampos pueden ser los siguientes:

• galería;
• descripción;
• maxima capacidad;
• equipo;
• beneficios de la salud.

Consejo rápido : JetEngine tiene una característica útil de Glosario . Le permite crear un conjunto de metacampos y usarlos como opciones para tipos de publicaciones personalizadas.

A continuación, agregue tantas publicaciones a los Tipos de publicación recién creados como sea necesario. Para hacerlo, pase el mouse sobre el nombre de CPT en el panel de administración de WordPress y luego presione " Agregar nuevo ".

Una vez hecho esto, puede proceder a configurar el complemento JetAppointment.

Configuración de JetAppointment

No es tan difícil configurar el complemento de reserva de citas de Crocoblock. Todo lo que tiene que hacer es ejecutar el asistente de configuración y completar cuatro pasos de instalación.

Vaya a Citas > Configurar en el panel de administración. Accederá a la página Configuración de JetPlugins , es decir, a la pestaña Configuración de JetAppointment. Haga clic en el botón de nombre similar para ejecutar el Asistente.

• Paso 1 Debe elegir los tipos de publicación de Servicios y Proveedores en las selecciones desplegables correspondientes. No olvide habilitar la opción Agregar proveedores ; de lo contrario, el campo no aparecerá. Haga clic en " Siguiente ".

• Paso 2 Aquí puede ver las columnas de la tabla de base de datos requeridas. Continúe con la instalación si no tiene ganas de agregar más columnas. Añadiremos Teléfono y Comentarios.

• Paso 3 Este paso está dedicado a configurar el servicio y los detalles específicos del proveedor, como la duración, el tiempo de búfer, los días libres, las horas de trabajo, etc. Para obtener una descripción detallada de los pasos, consulte este tutorial en video.

• Paso 4 Por último, puede integrar WooCommerce y crear dos formularios de reserva de citas. Las opciones disponibles incluyen "JetEngine Forms" y "JetFormBuilder". El primero está destinado a Elementor y el segundo a Gutenberg.

Presione el botón "Finalizar" para finalizar la configuración.

Antes de editar los formularios de reserva de citas, debe interrelacionar las publicaciones de Proveedores y Servicios. Abra la publicación de un proveedor y busque la pestaña Servicios relacionados en la barra lateral izquierda. Escriba tres caracteres en esa área de texto y elija el servicio necesario una vez que el sistema lo sugiera.

Repita el procedimiento tantas veces como puestos de Proveedor dedicados. Una vez hecho esto, está listo para jugar con los formularios.

JetFormBuilder y adición de formularios a las páginas

Lo excelente de los productos Crocoblock es que algunos son gratuitos. Tome JetFormBuilder. Es un complemento de creación de formularios de WordPress que permite a los desarrolladores de sitios crear formularios dinámicos en el editor de páginas de Gutenberg. Puede descargar el complemento, activarlo y usarlo de inmediato.

Vaya a JetFormBuilder > Formularios . Los dos formularios generados estarán allí. Tendremos que editarlos ya que agregamos dos columnas a la tabla DB durante la configuración de la cita. Ahora, debemos agregar los metacampos necesarios al formulario y las acciones posteriores al envío.

Haga clic para editar el formulario de reserva de página estática y agregue los metacampos que faltan arrastrando y soltando los bloques de Gutenberg correspondientes. Necesitaremos dos, un campo de texto y un campo de área de texto, para agregar los campos Teléfono y Comentario.

A continuación, debe ingresar estos campos en Acciones de envío posterior. Para hacerlo, presione la pestaña JetForm , desplácese hacia abajo hasta la sección Acciones posteriores al envío y haga clic en el ícono de lápiz debajo del nombre de la acción. Verá una ventana de edición de Acción de envío posterior, donde se supone que debe seleccionar los campos de formulario a los que pertenecen.

Además de eso, puede configurar la integración de WooCommerce aquí, siempre que la haya habilitado en el Paso 4. Una vez hecho esto, haga clic en el botón " Actualizar ".

Consejo rápido . Siéntase libre de agregar varias Acciones Publicar Enviar a la vez, pero asegúrese de que sus condiciones no se contradigan entre sí. En ese caso, el envío del formulario fallará.

Una vez que termine de personalizar el formulario de reserva de página estática, actualícelo y agréguelo a la página del sitio web. Hemos creado una página dedicada a Todos los entrenamientos , que muestra una lista dinámica de JetEngine. Un formulario de reserva se verá encantador debajo de la cuadrícula.

Abra la página donde desea colocar el formulario, busque el bloque JetForm en la barra lateral izquierda, arrástrelo y suéltelo en el área deseada y luego elija el formulario que acaba de editar en el menú desplegable Elegir formulario en la barra lateral derecha .

Actualice la página y vea cómo se ve en la parte delantera.

Ahora, los lectores más atentos dicen: "¿Cómo es que el formulario tiene estilo?". Eso es porque hemos agregado otro complemento a la mezcla. Sigue leyendo para saber cuál.

Vuelva al panel de control de WordPress y abra la ruta Citas > Citas . Ahí lo tiene: todas las citas están bien ajustadas. Puede verlos, editarlos, eliminarlos, filtrarlos y cambiar su estado aquí.

Como puede ver, la funcionalidad de reserva de citas está en funcionamiento. Sin embargo, hay más cosas que puede hacer para que el sitio web de programación de citas sea aún más dinámico.