Como criar um site de agendamento dinâmico com OceanWP e Crocoblock

Você está procurando criar um site dinâmico de agendamento de consultas? Para aqueles que acham difícil implantar, há boas notícias – não é. Hoje em dia, você não precisa de desenvolvedores, codificadores e designers. Você só precisa das ferramentas certas.

Neste artigo, você descobrirá o que faz um bom site de compromissos. Vamos guiá-lo por toda a rotina de criação do site e distribuir as ferramentas que usamos. No final, você descobrirá como criar um sistema de reservas usando apenas o OceanWP e vários plugins Crocoblock.

O que torna o OceanWP e o Crocoblock ótimos juntos

• Construção visual do site . Como o Gutenberg é um editor de blocos visuais, os desenvolvedores de sites podem economizar tempo alternando entre o painel de administração e o front-end. Será suficiente criar uma estrutura de página no editor e garantir que a versão do front-end tenha a mesma aparência.
• Menos plugins externos . Esqueça os plugins separados para tipos de postagem personalizados, formulários, gerenciamento de reservas, campos personalizados, etc. Para colocar a funcionalidade de agendamento em funcionamento, você precisará apenas de dois plugins Crocoblock.
• Sem intermediários . Isso significa que os desenvolvedores não precisam depender de designers. Você pode pegar um modelo de demonstração do OceanWP, retrabalhar seu layout como quiser e adicionar a funcionalidade dinâmica do Crocoblock a ele.

Site de nomeação 101

O que é um site de agendamento de consultas?

Os sites de agendamento são plataformas de prestação de serviços onde é possível reservar um horário específico. Muitas vezes, esses sites oferecem serviços de pagamento por hora.

Como são os sites de agendamento?

Eles podem ser sites de cartões de visita de uma página, onde é possível reservar um determinado serviço de um único provedor. Por outro lado, os sites de agendamento podem abrigar vários provedores. Nesse caso, o site tem páginas únicas e catálogos dedicados de Provedor e Serviço.

É difícil criar um site de agendamento?

Não mais. Atualmente, você pode criar um site dinâmico do zero usando as ferramentas certas – um construtor de páginas de sua preferência, um provedor de temas, algum plug-in de conteúdo dinâmico e o núcleo de agendamento de consultas.

Quais são os principais elementos do site de agendamento?

Estes seriam um tema, tipos de postagem personalizados, um mecanismo de reserva de compromissos, formulários de reserva, páginas de provedor, páginas de serviço, páginas de catálogo e listagens.

Posso adicionar vários provedores ao mesmo site?

Por que não? Vários profissionais podem prestar um serviço. Certifique-se de atribuir um provedor ao serviço para evitar confusão na fase de preenchimento do formulário de reserva.

Site de agendamento: preparativos básicos

Decidimos omitir as preparações iniciais, como obter um nome de domínio e escolher um provedor de hospedagem. Em vez disso, vamos nos concentrar na essência. Para quem quiser se aprofundar em detalhes, tem um vídeo super informativo do Ferdy Korpershoek.

Obtenha os plug-ins do Crocoblock

A Crocoblock apresentou seus preços atualizados há seis meses. O que o torna legal? É o plano de assinatura personalizado . Agora, para criar um site de compromissos viável, você não precisará gastar muito. Vá para a página de preços do Crocoblock, abra a guia JetPlugins e adicione os plugins necessários ao carrinho.

Você vai precisar do JetEngine – um plugin de conteúdo dinâmico que permite criar tipos de postagem personalizados – e JetAppointment – um plugin WordPress de reserva de serviço.

Esse pacote personalizado custará US$ 45/ano para um site e US$ 93/ano para sites ilimitados. Além disso, você receberá atualizações de plugins e suporte de qualidade por um ano inteiro. Carregue esses plugins no painel do WordPress e prepare-os para mais trabalho.

Instale o tema OceanWP e escolha um modelo de site

Existem duas maneiras de instalar o tema principal – a tradicional e a maneira Crocoblock.

Instalando o tema OceanWP da maneira tradicional

Vá para Aparência > Temas no painel de administração do WordPress e pressione “ Adicionar novo ”. Você pode usar a barra de pesquisa para localizar o tema. Uma vez encontrado, instale o OceanWP e ative-o.

Instalando o tema OceanWP do jeito Crocoblock

Use o Assistente de instalação do Crocoblock. Ele pode ser baixado da conta Crocoblock e usado para instalar o OceanWP.

Para escolher um modelo de demonstração, vá para Painel de temas > Instalar demonstrações e escolha o que você precisa. Usaremos o modelo de demonstração do Ginásio hoje. Lembre-se de que uma demonstração não pode funcionar como pretendido se algumas das extensões premium estiverem ausentes. Você pode querer obtê-los primeiro.

Assim que a instalação do modelo de demonstração estiver concluída, você estará pronto para criar um site de agendamento dinâmico.

Criando um site de agendamento personalizado

Dentro de cada site de agendamento de compromissos e eventos, existem tipos de postagem personalizados para provedores e serviços , núcleo automatizado de agendamento de compromissos, integração de calendário e um formulário de agendamento. Estes são elementos essenciais, mas você tem a liberdade de estender a lista como quiser.

Agora, vamos colocar os plugins JetEngine e JetAppointment em bom uso.

Criação de tipos de postagem personalizados

Por que você precisa criar um CPT? Eles o ajudarão a organizar as postagens do site – serviços para serviços, provedores para provedores. Posteriormente, essas postagens podem ser facilmente inter-relacionadas para permitir que os usuários do site reservem um serviço específico de quem o fornece.

Siga JetEngine > Tipos de postagem > Adicionar novo caminho no painel de administração do WordPress para criar um CPT. Lembre-se de que você precisa de dois tipos de postagem – um para Provedores e outro para Serviços. Como estamos construindo um site de academia, os tipos de postagem serão nomeados como Treinadores e Exercícios de acordo.

Adicione os metacampos necessários a ambos os tipos de postagem. Para o CPT de Formadores , podem ser:

• foto;
• perfil curto;
• experiência de trabalho;
• realizações;
• galeria;
• Contatos.

Para o Workouts CPT , os metacampos podem ser os seguintes:

• galeria;
• Descrição;
• capacidade máxima;
• equipamento;
• benefícios para a saúde.

Dica rápida : JetEngine tem um recurso útil de Glossário . Ele permite que você crie um conjunto de metacampos e use-os como opções para tipos de postagem personalizados.

Em seguida, adicione quantas postagens forem necessárias aos Tipos de postagem recém-criados. Para fazer isso, passe o mouse sobre o nome do CPT no painel de administração do WordPress e pressione “ Adicionar novo ”.

Uma vez feito, você pode continuar a configurar o plug-in JetAppointment.

Configuração do JetAppointment

Não é tão difícil definir o plug-in de reserva de compromissos do Crocoblock. Tudo o que você precisa fazer é executar o Assistente de Configuração e concluir quatro etapas de instalação.

Vá para Compromissos > Configurar no painel de administração. Você será levado para a página de configurações do JetPlugins , ou seja, para a guia Configuração do JetAppointment. Clique no botão de nome semelhante para executar o Assistente.

• Etapa 1 . Você precisa escolher os tipos de postagem de Serviços e Provedores nas seleções suspensas correspondentes. Não se esqueça de ativar a alternância Adicionar provedores ; caso contrário, o campo não aparecerá. Clique em “ Avançar ”.

• Etapa 2 . Aqui, você pode ver as colunas da tabela de banco de dados necessárias. Continue a instalação se não quiser adicionar mais colunas. Adicionaremos Telefone e Comentários.

• Etapa 3 . Esta etapa é dedicada à configuração do serviço e detalhes específicos do provedor, como duração, tempo de buffer, dias de folga, horário de trabalho etc. Para obter uma visão geral detalhada da etapa, confira este tutorial em vídeo.

• Etapa 4 . Por fim, você pode integrar o WooCommerce e criar dois formulários de agendamento. As opções disponíveis incluem “JetEngine Forms” e “JetFormBuilder”. O primeiro é destinado a Elementor e o segundo é para Gutenberg.

Pressione o botão “Finish” para finalizar a configuração.

Antes de editar os formulários de agendamento de consultas, você precisa interrelacionar as postagens de Provedores e Serviços. Abra a postagem de um provedor e encontre a guia Serviços relacionados na barra lateral esquerda. Digite três caracteres nessa área de texto e escolha o serviço necessário assim que o sistema o sugerir.

Repita o procedimento quantas vezes houver postos de Provedor dedicados. Uma vez feito, você está pronto para brincar com os formulários.

JetFormBuilder e adição de formulários às páginas

O que é excelente nos produtos Crocoblock é que alguns são realmente gratuitos. Pegue o JetFormBuilder. É um plug-in de criação de formulários do WordPress que permite que os desenvolvedores de sites criem formulários dinâmicos no editor de páginas do Gutenberg. Você pode baixar o plugin, ativá-lo e usá-lo imediatamente.

Vá para JetFormBuilder > Formulários . Os dois formulários gerados estarão lá. Teremos que editá-los, pois adicionamos duas colunas à tabela DB durante a configuração do compromisso. Agora, precisamos adicionar os metacampos necessários ao formulário e às ações pós-envio.

Clique para editar o formulário de reserva de página estática e adicione os metacampos ausentes arrastando e soltando os blocos Gutenberg correspondentes. Vamos precisar de dois – um Campo de Texto e um Campo de Área de Texto – para adicionar os campos Telefone e Comentário.

Em seguida, você precisa inserir esses campos nas ações de envio de postagem. Para fazer isso, pressione a guia JetForm , role para baixo até a seção Post Submit Actions e clique no ícone de lápis abaixo do nome da ação. Você verá uma janela de edição Post Submit Action, onde você deve selecionar os campos de formulário aos quais eles pertencem.

Além disso, você pode configurar a integração do WooCommerce aqui, desde que a tenha habilitado no Passo 4. Feito isso, clique no botão “ Atualizar ”.

Dica rápida . Sinta-se à vontade para adicionar várias ações de envio de postagem de uma só vez, mas certifique-se de que suas condições não sejam contraditórias. Nesse caso, o envio do formulário falhará.

Assim que terminar de personalizar o formulário de reserva de página estática, atualize-o e adicione-o à página do site. Criamos uma página dedicada Todos os exercícios , que mostra uma lista dinâmica do JetEngine. Um formulário de reserva ficará lindo sob a grade.

Abra a página onde você deseja colocar o formulário, encontre o bloco JetForm na barra lateral esquerda, arraste e solte-o na área desejada e, em seguida, escolha o formulário que você acabou de editar no menu suspenso Escolher formulário na barra lateral direita .

Atualize a página e veja como ela fica no front-end.

Agora, os leitores mais atentos ficam tipo, “Como é que o formulário é estilizado?”. Isso porque lançamos outro plugin na mistura. Continue lendo para descobrir qual.

Volte para o painel do WordPress e abra o caminho Compromissos > Compromissos . Aí está – todos os compromissos estão apertados. Você pode visualizar, editar, excluí-los, filtrar e alterar seu status aqui.

Como você pode ver, a funcionalidade de agendamento de consultas está funcionando. No entanto, há mais coisas que você pode fazer para tornar o site de agendamento de consultas ainda mais dinâmico.