Criando pop-up dinâmico para listagem com a fonte de consulta SQL

Antes de começar, certifique-se de concluir a configuração do JetAppointment Wizard .

Para este caso de uso, você precisa fazer vários compromissos. Prossiga para o  tutorial Como gerenciar compromissos no painel do WordPress para adicionar compromissos do back-end.

Siga o caminho JetEngine> Query Builder e clique no botão “Adicionar Novo” .

Na seção Configurações gerais , insira o nome da consulta e selecione o tipo de consulta “Consulta SQL/AI” .

Na seção Consulta SQL personalizada , escolha a opção “jet_appointments” no campo Da tabela .

Na guia Onde (cláusulas de consulta) , clique no botão “Adicionar novo” .

Selecione a coluna “user_id” e a opção “Igual (=)” no campo Comparar . No campo Valor , clique no ícone da pilha de moedas e escolha a macro ID do usuário atual . Por fim, escolha o tipo “Numérico” . Essas configurações de consulta restringirão os resultados, de modo que o usuário verá apenas os compromissos que reservou.

Na guia Order & Order By , você pode adicionar parâmetros de classificação clicando no botão “Adicionar novo parâmetro de classificação” . Pode haver vários deles para cada consulta.

Para saber mais sobre as configurações do tipo de consulta SQL, prossiga para esta visão geral .

Ao terminar de personalizar a consulta, clique no botão “Adicionar/Atualizar Consulta” .

Vá para JetPopup> guia Criar novo pop-up . 

Escolha o tipo de conteúdo “Block Editor” ou “Elementor” . Além disso, você pode inserir o nome e escolher predefinição . Depois disso, aperte o botão “Criar” .

” alt=”criar um pop-up” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/create-a-popup2.png” />O modelo de listagem que criaremos posteriormente mostrará alguns detalhes do agendamento (data e nome do serviço). Todas as outras informações serão exibidas no pop-up.

Coloque o widget ou bloco de campo dinâmico na página de edição. Escolha a fonte “Post/Term/User/Object Data” . No menu suspenso  Campo de objeto , você pode selecionar qualquer coluna da qual exibir dados.

” alt=”consultar dados exibidos com widget de campo dinâmico” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/query-data-displayed-with-dynamic-field-widget2.png” />Use a opção Personalizar saída do campo para adicionar texto antes e depois do valor.

” alt=”Personalize a saída do campo” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/Customize-field-output2.png” />Para exibir alguns valores de coluna corretamente, você precisa habilitar a opção Filtrar saída do campo . Por exemplo, para exibir a data e a hora, você precisa escolher o retorno de chamada “Formatar data” . Sem esse retorno de chamada, o widget mostrará a data e a hora no formato de carimbo de data/hora.

Para exibir o título da postagem do serviço ou provedor, habilite a opção Filtrar saída do campo e escolha o retorno de chamada “Obter títulos das postagens dos IDs” . Sem isso, o Campo Dinâmico mostrará o ID do post.

Para saber mais sobre a opção Filtrar saída de campo , navegue até Visão geral do widget de campo dinâmico . 

No editor Gutenberg, as configurações do bloco Dynamic Field são as mesmas.

Ao criar o layout pop-up no editor Elementor, clique no ícone Configurações no canto inferior esquerdo. 

Aqui, você precisa ativar os botões Carregando conteúdo com Ajax e Forçar carregamento .

” alt=”configurações do jetpopup” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/07/jetpopup-settings.png” />Para abrir as configurações do JetPopup no editor Gutenberg, clique no ícone JetPopup no canto superior direito. Ative os botões Carregando conteúdo com Ajax e Forçar carregamento .

Para saber mais sobre o processo de criação de pop-up, prossiga para os tutoriais Como criar um novo modelo de pop-up no Elementor ou Como criar um pop-up no Gutenberg .

Você também pode verificar a Visão geral das configurações de estilo pop-up no Elementor ou Visão geral das configurações de estilo pop-up em Gutenberg .

Ao terminar de personalizar o pop-up, clique no botão “Atualizar” .

Vá para a guia JetEngine> Listagem e clique no botão “Adicionar novo” .

No pop-up Configurar item de listagem , selecione a fonte de listagem “Query Builder”, escolha a consulta recentemente criada , insira o nome do item de listagem e escolha a visualização de listagem “Elementor” ou “Blocks (Gutenberg)” . Em seguida, clique no botão “Criar item de listagem” .

A maioria dos detalhes do compromisso são exibidos no pop-up. Agora, coloquei dois widgets de Campo Dinâmico para exibir os dados do agendamento e o nome do serviço. Além disso, usei a saída Personalizar campo para adicionar o texto ao valor. Com a opção Filtrar campo de saída e retornos de chamada “Formatar data” e “Obter títulos de postagem de IDs” , exibi a data e o título da postagem de serviço.

O mesmo processo está no editor Gutenberg.

Arraste e solte qualquer widget de botão ou bloco na página de edição. Pode ser o botão padrão do WordPress ou o botão do plugin JetElements (apenas para Elementor). Personalize e estilize-o de acordo com suas necessidades.

Visualização do elemento:

Visão de Gutenberg:

Em seguida, no editor Elementor, abra a guia Configurações avançadas e desdobre a guia JetPopup .

Defina o pop-up recentemente criado no campo Popup anexado , escolha o tipo de gatilho “Clique no botão” e ative a opção pop-up Jet Engine Listing .

No editor Gutenberg, desdobre a guia Configurações avançadas , defina o pop-up recentemente criado no campo Pop-up anexado , escolha o tipo de gatilho “Clique” e ative a alternância do pop-up JetEngine Listing .

Por fim, pressione o botão “Atualizar” .

Descubra as configurações do painel do Profile Builder na Visão geral do Profile Builder .

Navegue até a guia JetEngine > Profile Builder e certifique-se de ativar a alternância da página de usuário único e definir a página de usuário único .

Após alterar as configurações, clique no botão “Salvar” .

Abra a guia Página no painel do WordPress e clique para editar a página de perfil no editor Elementor ou Gutenberg.

No editor Elementor, arraste e solte o widget Listing Grid e selecione o Listing criado recentemente .

No editor Gutenberg, coloque o bloco Listing Grid e escolha o Listing necessário . 

Após terminar de personalizar a página do Perfil, clique no botão “Atualizar” .

Abra a página Perfil no front-end.

Quando clico no botão, ele aciona um pop-up dinâmico com outros detalhes do compromisso.

Quando clico no botão do segundo item da listagem, o pop-up dinâmico mostra os detalhes do compromisso correspondente.