Como exibir compromissos do usuário com o widget Listing Grid

Começando

Para garantir que tudo funcione corretamente no front-end, preste atenção aos preparativos do back-end. Você precisa ter compromissos marcados; se você ainda não fez isso, confira este tutorial . E certifique-se de ter alguns compromissos agendados, algo assim:

Assim que terminar esses preparativos, você estará pronto para criar listas para os compromissos.

Construindo uma listagem com Elementor

Crie uma nova listagem

Vá para JetEngine > Listagens .

Clique no botão Adicionar novo .

Você verá uma janela Configurar item de listagem . 

Certifique-se de escolher Compromissos do usuário como fonte, insira o nome do item de listagem de sua escolha, escolha a visualização de listagem (vamos trabalhar no Elementor, mas você também pode optar por blocos de Gutenberg) e clique no botão Criar Botão Item de listagem .

Logo em seguida, você será redirecionado para Elementor.

Construa a listagem no Elementor

Agora, procure o widget Campo Dinâmico .

Arraste e solte na área de trabalho e construa sua listagem duplicando este campo quantas vezes precisar.

Em seguida, vá para a barra de ferramentas do lado esquerdo e escolha os dados relacionados ao compromisso a serem exibidos no Object Field .

” alt=”ID do compromisso” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/field-id.png” />

Para criar uma listagem, precisaremos de ID, serviço, provedor, data, slot , slot_end, order_id e user_id , onde:

• ID é o ID de um compromisso agendado na sua lista de Compromissos;
• serviço é o tipo de serviço que foi reservado;
• prestador é a pessoa que vai prestar o serviço solicitado;
• data é a data preferencial para a prestação do serviço;
• slot é o horário efetivo da prestação do serviço;
• slot_end é o horário de término do serviço prestado;
• order_id é o ID de um pedido WooCommerce, que será exibido caso a integração WooCommerce esteja habilitada;
• user_id é o ID de um usuário que reservou seu serviço.

Configurar a saída da listagem

Agora, vamos configurar todos os nossos campos dinâmicos.

Escolha ID no campo do objeto , ative Personalizar saída do campo e especifique o formato de campo desejado .

Para o segundo campo, escolha Provider no Object Field , ative Filter field output e, na seleção de retorno de chamada recém-aparecida , escolha Get post/page link (linked title) .

Depois, ative Personalizar saída do campo e especifique o formato de campo desejado .

Para o terceiro campo, que será um serviço, escolha Service no Object Field , ative Filter field output e, na seleção de retorno de chamada recém-aparecida , escolha Get post/page link (linked title) . Assim como anteriormente, você deve ativar Personalizar saída do campo e especificar o formato de campo desejado .

” alt=”campo dinâmico” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/get-link.png” />

O quarto campo mostrará a data. Então, escolha Date no Object Field , em seguida, ative Filter field output , e na seleção de retorno de chamada recém-aparecida , escolha Format date .

Como você pode ver, o formato será ajustado automaticamente. Depois disso, ative Personalizar saída do campo e especifique o formato de campo desejado .

Por último, mas não menos importante, precisamos indicar a hora, e este campo requer toda a sua atenção. No Object Field , escolha Slot , em seguida, ative Filter field output , e na seleção de retorno de chamada recém-aparecida , escolha Format date . 

No campo Formato, certifique-se de inserir o código de formato adequado. Por exemplo, “g:ia” nos dá uma indicação de horas, minutos e am/pm.

Depois disso, habilite Personalizar saída do campo e especifique o formato de campo desejado , como faria normalmente.

Com um pouco de magia de estilo, você pode conseguir algo assim:

Quando estiver satisfeito com o item da sua listagem, clique em Publicar .

Exibindo a listagem no front-end

Agora é hora de publicar a listagem na página inicial de sua escolha.

Escolha a página única

Clique em Editar com Elementor para realmente editá-lo.

Na guia Elementor recém-aberta, procure o widget Listing Grid .

Em seguida, arraste e solte-o na seção desejada da página.

Configurar a saída da listagem

A próxima etapa é selecionar a listagem real que você deseja exibir nesta página.

Escolha Listagem de Compromissos (é aquela que você criou anteriormente) no campo de seleção Listagem .

E aí está, pessoal, essa é a listagem que construímos!

Você pode ajustar o número de colunas para deixar sua listagem mais sofisticada.

Consulta de Consulta de Agendamentos

Para garantir o bom desempenho de sua Listagem de Compromissos no front-end, certifique-se de aplicar as configurações necessárias de Consulta de Compromissos .

Como você pode ver, existem três campos suspensos – Usuário , Status e Data .

Você pode escolher qualquer valor de campo aqui, dependendo das informações que deseja exibir no front end.

Por exemplo, escolhemos o seguinte:

Como você pode ver, este compromisso específico foi agendado, mas ainda não foi pago.

Depois de configurar a listagem no Elementor, clique em Publicar. É isso!

Esperamos que você tenha achado este tutorial útil e se tornado um guru na criação de listagens para compromissos.