Como exibir itens reservados na página da conta do usuário
Crie uma coluna para armazenar o ID do usuário
A consulta personalizada que será configurada posteriormente exigirá o ID do usuário que enviou a reserva. Por padrão, esses dados não são armazenados nas colunas JetBooking , portanto é necessário criar uma coluna dedicada.
Navegue até o Painel do WordPress > Reservas > Configurações > guia Ferramentas. Adicione uma nova coluna pressionando o botão “ Nova coluna do banco de dados ”. Dê um nome à coluna – “user_id”.
Depois disso, clique no botão “ Atualizar Tabelas de Reservas ”. Agora, uma nova coluna no banco de dados é criada. Ele armazenará o ID do usuário após o envio do formulário de reserva.
Adicione um campo de formulário para buscar o ID do usuário
Nos passos seguintes, adicionaremos um campo de formulário para buscar o ID do usuário que fez a reserva e mapeá-lo com a coluna “user_id” criada anteriormente.
Ajustando o formulário de reserva criado com o plugin JetFormBuilder
Se o formulário de reserva foi configurado com o plugin JetFormBuilder , encontre o formulário no Painel do WordPress > JetFormBuilder > guia Formulários e edite-o.
Adicione um novo bloco de campo oculto . Selecione a opção “ID do usuário atual” como VALOR DO CAMPO . O campo irá buscar o ID do usuário logado no momento.
Vá para a seção Ações pós-envio da guia JetForm e clique no botão em forma de lápis para editar a ação “Reserva de apartamento”.
Na seção DB COLUMNS MAP , mapeie a coluna “user_id” criada anteriormente com o novo campo Oculto inserindo o nome do campo Oculto no campo de entrada correspondente.
” alt=”mapeando coluna de ID do usuário com campo oculto no jetformbuilder” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/mapping-user-id-column-with-hidden-field-in-jetformbuilder-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Clique no botão “ Atualizar ” para salvar as configurações da ação e atualizar o formulário.
Como resultado, o ID do usuário que enviou o formulário será salvo na coluna “user_id” do banco de dados de reservas.
Construindo o formulário de reserva criado com o plugin JetEngine
Se o formulário de reserva foi configurado com o módulo Formulários (Legado) do JetEngine , encontre o formulário no WordPress Dashboard > JetEngine > guia Formulários e prossiga para editá-lo.
Adicione um novo campo do tipo “Oculto” . Selecione a opção “ID do usuário atual” como valor do campo . O campo irá buscar o ID do usuário logado no momento.
Clique no botão “ Aplicar alterações ” para salvar o resultado.
” alt=”adicionando campo oculto com ID de usuário ao formulário jetengine” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/adding_hidden_field_with_user_id_to_jetengine_form_2x.png” />Vá para a seção Configurações de ações/notificações pós-envio da tela de edição do formulário e clique no botão em forma de lápis para editar a ação “Reserva de apartamento”.
Na seção Mapa de colunas do banco de dados , mapeie a coluna “user_id” criada anteriormente com o novo campo Oculto inserindo o nome do campo Oculto no campo de entrada específico.
Clique no botão “ Aplicar alterações ” para salvar as configurações da ação e atualizar o formulário.
Como resultado, o ID do usuário que enviou o formulário será salvo na coluna “user_id” do banco de dados de reservas.
Testando o formulário
Vamos testar o formulário fazendo um exemplo de reserva.
Navegue até a visualização frontal do site e encontre a página onde o formulário está localizado. Preencha o formulário e envie-o.
Após fazer uma reserva de teste, retorne ao Painel do WordPress e prossiga para Reservas > Reservas . Encontre a reserva criada e clique no botão “ Editar ” ou no ícone de informações .
Verifique a coluna “user_id”: ela deve conter o ID do usuário que fez a reserva.
Configure uma consulta personalizada para exibir itens reservados
A consulta personalizada filtrará as reservas feitas pelo usuário atual e permitirá exibir os resultados como uma listagem.
Vá para WordPress Dashboard> JetEngine> Query Builder e clique no botão “ Adicionar novo ” para criar uma nova consulta.
Dê um nome à consulta e selecione o tipo de consulta “Consulta JetBooking” .
Este tipo de consulta retorna todas as reservas criadas no site. Usando diferentes configurações de consulta, você pode restringir o resultado. Para saber mais sobre essas configurações, vá para o tipo de consulta JetBooking na visão geral do Query Builder .
Para exibir apenas a lista de reservas criadas pelo usuário atual, vá até o corpo da consulta e, na seção Consulta de Colunas , clique no botão “ Adicionar Novo ” para adicionar uma nova cláusula de consulta. Agora, vamos comparar a coluna “user_id” criada anteriormente com o ID do usuário conectado no momento.
Nas configurações da cláusula, selecione a coluna “user_id” . Em seguida, escolha o operador de comparação “Igual (=)” no menu suspenso Comparar . No lado direito do campo de entrada Valor , clique no ícone da pilha de moedas e selecione a macro “ID do usuário atual”.
Você pode ativar a alternância Visualizar resultados para verificar como a consulta restringe os resultados.
” alt=”cláusula de consulta de coluna para a consulta de jetbooking” width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/04/column-query-clause-for-the-jetbooking-query-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />Agora, a consulta recupera apenas as reservas criadas pelo usuário atual. Defina outras configurações de consulta personalizada e pressione o botão de consulta “ Adicionar/Atualizar ”.
Crie um anúncio para exibir reservas
A próxima etapa é criar e estilizar o modelo de listagem para as reservas na conta do usuário. O modelo de listagem pode ser feito com o editor de blocos Elementor ou WordPress.
Construindo um modelo de listagem no editor Elementor
Navegue até o Painel do WordPress> JetEngine> guia Listagens e pressione o botão “ Adicionar Novo ” para adicionar um novo modelo.
Na janela Configurar item de listagem , selecione “Query Builder” como fonte da listagem ; em seguida, selecione a consulta personalizada criada na etapa anterior e dê um nome à listagem.
Por fim, selecione “Elementor” para a visualização da listagem se você construir o site com Elementor e clique no botão “ Criar item de listagem ”.
Agora é hora de personalizar o modelo de listagem para os itens reservados. Você pode exibir qualquer coluna recuperada pela consulta personalizada. Em nosso exemplo, exibiremos o ID e o status da reserva, o título vinculado da instância reservada, as datas, o número de hóspedes e as informações do usuário. Todos esses dados serão exibidos com o widget Campo Dinâmico .
Primeiro, arraste e solte um widget de Campo Dinâmico na área de edição. Selecione “Dados pós-prazo/usuário/objeto” como fonte . No menu suspenso Campo de objeto , role até ver a seção JetBooking e escolha a opção “ID de reserva”.
Para incluir texto adicional a esse valor, ative a alternância Personalizar saída do campo e personalize a área de formato. Por exemplo, digitamos “ID da reserva: %s” no formato Campo .
Agora, a listagem exibe o ID da reserva. Da mesma forma, adicione o status da reserva.
Adicione um novo widget de Campo Dinâmico ou duplique o existente. Repita as etapas acima para exibir a opção “Status” e formatá-la.
Para exibir o nome da propriedade reservada (título do post), adicione outro widget de Campo Dinâmico e selecione a opção “ID da Instância Reservada” como Campo do Objeto . O valor desta opção é o ID da postagem.
Para transformá-lo em um título vinculado, ative a alternância de saída do campo Filtro e selecione o retorno de chamada “Obter link de postagem/página” . Este retorno de chamada formata o valor e gera o nome da postagem em vez de seu ID. Além disso, você pode exibir apenas o título da postagem sem link, URL da postagem e miniatura da postagem com retornos de chamada. Saiba mais no capítulo Exibir títulos de postagens e termos, links e URLs da Visão geral do widget de campo dinâmico .
Agora é hora de exibir as datas reservadas. Adicione dois widgets de campo dinâmico : um mostrando a opção “Data de check-in” e outro exibindo a opção “Data de check-out”. Essas opções contêm as datas de check-in e check-out no formato de carimbo de data/hora.
Para converter o carimbo de data/hora em uma data legível por humanos, ative a alternância de saída do campo Filtro e escolha o retorno de chamada “ Formatar Data ”. Não se esqueça de definir o formato da data de acordo com a documentação Personalizando o formato de hora e data .
Você também pode exibir valores das colunas adicionais da tabela JetBookings adicionadas na guia Reservas > Configurações > Ferramentas . Para isso, adicione outro Campo Dinâmico e selecione a opção “Coluna adicional:…”. Por exemplo, em nosso caso, escolhemos o campo de objeto “Coluna adicional: convidado” .
A coluna “user_id” contém o ID do usuário que pode ser transformado nas informações padrão do usuário.
Adicione um Campo Dinâmico , selecione a opção “Coluna adicional: user_id” para o Campo de Objeto , ative a alternância de saída do campo Filtrar e defina o retorno de chamada “Obter dados do usuário por ID” . Este retorno de chamada recupera campos de usuário padrão pelo ID do usuário. Escolha qualquer opção desejada no menu suspenso Dados do usuário para obter .
É isso para as configurações principais. Experimente o estilo para obter o melhor design para a listagem. Quando terminar, não se esqueça de atualizar as alterações.
Criando um modelo de listagem no editor de blocos do WordPress (Gutenberg)
Navegue até o Painel do WordPress> JetEngine> guia Listagens e pressione o botão “ Adicionar Novo ” para adicionar um novo modelo.
Para a origem da listagem , selecione “Query Builder”. Em seguida, escolha a consulta personalizada criada na etapa anterior e dê um nome à listagem. Por último, escolha “Blocos (Gutenberg)” para a visualização de listagem se você construir o site com o editor de blocos WordPress e clique no botão “ Criar item de listagem ”.
Agora, personalize o modelo de listagem para exibir os itens reservados. Você pode exibir qualquer coluna recuperada pela consulta personalizada. Em nosso exemplo, mostraremos o ID e o status da reserva, o título vinculado da instância reservada, as datas, o número de hóspedes e as informações do usuário usando o bloco Campo Dinâmico .
Primeiro, arraste e solte um bloco de Campo Dinâmico na área de edição. Escolha “Dados de postagem/prazo/usuário/objeto” no campo FONTE . No menu suspenso POST OBJECT , role para baixo até a seção JetBooking e escolha a opção “Booking ID”.
Para adicionar texto a esse valor, ative a alternância Personalizar saída do campo e personalize a área de formato. Por exemplo, digitamos “ID da reserva: %s” no formato Campo .
Agora, a listagem exibe o ID da reserva. A seguir, vamos adicionar o status da reserva.
Adicione um novo bloco de campo dinâmico ou duplique o existente. Repita as etapas acima para exibir a opção “Status” e formatá-la.
Para exibir o nome da propriedade reservada (título do post), adicione outro bloco Dynamic Field e selecione a opção “Booked Instance ID” como POST OBJECT . O valor desta opção é o ID da postagem.
Para transformá-lo em um título vinculado, ative a alternância de saída do campo Filtro e selecione o retorno de chamada “Obter link de postagem/página” . Este retorno de chamada formata o valor e gera o nome da postagem em vez de seu ID. Além disso, você pode exibir apenas o título da postagem sem link, URL da postagem e miniatura da postagem com retornos de chamada. Saiba mais sobre isso em Exibir títulos, links e URLs de postagens e termos .
Agora é hora de exibir as datas reservadas. Adicione dois blocos de campo dinâmico : um mostrando a opção “Data de check-in” e outro exibindo a opção “Data de check-out”. Essas opções contêm as datas de check-in e check-out em formato de carimbo de data/hora.
Para formatar o carimbo de data/hora como uma data legível por humanos, ative a alternância de saída do campo Filtro e escolha o retorno de chamada “ Formatar data ” . Não se esqueça de definir o formato da data de acordo com a documentação Personalizando o formato de hora e data .
Você também pode exibir valores das colunas adicionais da tabela JetBookings adicionadas na guia Reservas > Configurações > Ferramentas . Para isso, adicione outro Campo Dinâmico e selecione a opção “Coluna adicional:…”. Por exemplo, no nosso caso, escolhemos a “Coluna adicional: convidado” POST OBJECT .
A coluna “user_id” contém o ID do usuário que pode ser transformado nas informações padrão do usuário.
Adicione um campo dinâmico , selecione a opção “Coluna adicional: user_id” para o POST OBJECT , ative a alternância de saída do campo Filtrar e defina o retorno de chamada “Obter dados do usuário por ID” . Este retorno de chamada recupera campos de usuário padrão pelo ID do usuário. Escolha qualquer opção desejada no menu suspenso Dados do usuário para obter .
É isso para as configurações principais. Para estilizar os blocos, use o plugin gratuito JetStyleManager . Quando terminar, não se esqueça de atualizar as alterações.
Exibir a listagem de itens reservados na página da conta
A última parte do nosso trabalho é exibir a listagem criada na página da conta do usuário definida com o recurso JetEngine Profile Builder . Criaremos um novo modelo de subpágina e colocaremos o widget ou bloco Listing Grid dentro dele.
Mostrando a listagem no Elementor
Em primeiro lugar, crie um novo modelo de “Página” no Painel do WordPress > Modelos > Adicionar nova guia no Elementor .
Este template será responsável por exibir a subpágina da conta com a lista de itens reservados.
No editor Elementor, encontre o widget Listing Grid e coloque-o no modelo. Escolha a opção Listagem criada anteriormente.
Estas configurações são suficientes para exibir as reservas do usuário atual como um anúncio. Para ajustar o restante das configurações, verifique Visão geral do widget Grid de listagem .
Feito o estilo, clique no botão “ Publicar/Atualizar ” para salvar as alterações e retornar ao Painel do WordPress.
Agora, aplique o modelo criado no Profile Builder . Navegue até JetEngine > Profile Builder > guia Página da conta e clique no botão “ Adicionar nova subpágina ” para adicionar uma nova subpágina para reservas dos usuários.
Dê um título a esta subpágina e anexe o modelo criado anteriormente. Clique no botão “ Salvar ” .
Finalmente, é hora de verificar o resultado. Abra a página Conta no front end, vá para a subpágina “Minhas Reservas” e verifique se ela exibe suas reservas.
Construindo a listagem no Block Editor (Gutenberg)
Colocaremos o bloco Listing Grid dentro do modelo Listing para usuários e anexaremos o novo modelo Listing a uma subpágina Account do Profile Builder .
Navegue até a guia JetEngine> Listagens e clique no botão “ Adicionar novo ”.
No pop-up Configurar item de listagem , escolha “Usuários” como fonte da listagem , dê um nome à listagem e selecione “Blocos (Gutenberg)” na lista suspensa da visualização da listagem . Pressione o botão “ Criar item de listagem ” .
Este template será responsável por exibir a subpágina da conta com a lista de itens reservados.
Assim que o editor for aberto, encontre o bloco Listing Grid e coloque-o no modelo. Escolha a opção de Listagem criada previamente.
Estas configurações são suficientes para exibir as reservas do usuário atual como um anúncio. Para ajustar o restante das configurações, verifique Visão geral do bloco de grade de listagem .
Feito isso, clique no botão “ Publicar/Atualizar ” para salvar as alterações e retornar ao Painel do WordPress.
Agora é hora de aplicar o modelo criado no Profile Builder . Navegue até JetEngine > Profile Builder > guia Página da conta e clique no botão “ Adicionar nova subpágina ” para adicionar uma nova subpágina para reservas dos usuários.
Dê um título a esta subpágina e anexe o modelo de listagem de usuários criado anteriormente. Clique no botão “ Salvar ” .
Em última análise, é hora de verificar o resultado. Confira a página Conta para ver as reservas criadas.
É isso; agora você sabe como exibir itens reservados na página da conta de usuário com a ajuda do plugin JetBooking em seu site WordPress.