Como criar uma única página para o item da API REST
Habilite o módulo de tipos de conteúdo personalizados
Antes de seguir as outras etapas, vá para JetEngine > Dashboard > Modules e ative o módulo Custom Content Types . Mesmo que você não use o endpoint CCT, ele precisa ser iniciado para consultar os endpoints de terceiros por ID. O ponto final deste artigo com os itens do CCT será utilizado como exemplo.
Não se esqueça de pressionar o botão “ Salvar ”.
Verifique uma conexão de endpoint
Vá para JetEngine > guia REST API Endpoints e conecte um endpoint . Assim que o endpoint estiver conectado, o rótulo verde “Conectado” aparecerá na frente do campo Status .
Criando páginas WordPress
Vá para Painel do WordPress> guia Páginas e crie duas páginas estáticas. A primeira página exibe o widget Listing Grid que lista todos os itens do endpoint. A segunda página mostra os dados relacionados ao item em que você clicou. Nesta etapa, deixe as páginas vazias e copie o link para a segunda página, pois será necessário para a próxima etapa.
Adicionando uma página de opções
Para criar uma página de opções, abra o painel do WordPress > JetEngine > páginas de opções. Adicione um novo tipo de metacampo Texto à página na guia Campos. Salve as alterações e prossiga para a página de opções recém-criada no painel do WordPress. Siga a visão geral da página de opções para saber como configurá-lo.
Abra a página de opções que você acabou de editar. O campo de texto deverá ser preenchido com o link da segunda página, conforme sugerido no passo anterior.
” alt=”campo de texto preenchido na página de opções” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_5.png” />
Construindo um modelo de listagem para o endpoint da API REST
O modelo de listagem para o item de endpoint da API REST será usado na primeira página. Para criar o modelo de listagem, vá para JetEngine > Listagens e clique no botão “ Adicionar Novo” . Selecione “REST API Endpoint” como fonte da listagem e escolha o endpoint necessário.
Preencha o campo Nome do item da listagem e selecione a visualização da listagem desejada .
Pressione o botão “ Criar item de listagem ”.
Escolha o editor do construtor de páginas preferido. Neste caso, é o Elementor. Assim que a página abrir, adicione um widget de Campo Dinâmico para gerar os dados desejados do endpoint.
Escolha “Post/Term/User/Object Data” como a fonte e, em seguida, no Object Field, selecione todos os campos necessários a serem exibidos no endpoint.
Em seguida, arraste e solte o widget Dynamic Link na página. Selecione “Opções” como Fonte e o campo de texto da página Opções contendo o link para a página a ser redirecionada no menu suspenso Opções .
Ative a alternância Adicionar argumentos de consulta e insira ‘item_id=%current_id%’ no campo exibido.
Criando outro modelo de listagem para o mesmo endpoint da API REST
Comece a construir mais um modelo de listagem que será usado na segunda página.
O modelo de listagem deve ter a mesma fonte que você criou – o endpoint da API REST. Este modelo é a aparência de um item em sua ‘página única’.
Portanto, adicione mais widgets de Campo Dinâmico para criar um layout de item mais detalhado.
Construindo uma consulta de API REST personalizada no Query Builder
Acesse JetEngine > Query Builder para criar uma consulta personalizada da API REST que permite exibir o item em uma única página da API REST de acordo com o item em que você clicou na primeira página.
Continue adicionando a consulta e selecione o endpoint. Pressione o botão de tag dinâmica próximo ao campo Valor e escolha a opção “Variável de consulta”.
A chave pode ser encontrada na visualização do endpoint.
O nome da variável nas configurações é o mesmo que você escreveu no widget Dynamic Link .
Aqui está um pequeno lembrete do que foi escrito no campo Argumentos de consulta de link dinâmico .
Exibindo modelos de listagem nos widgets de grade de listagem
Finalmente chegou a hora de adicionar os modelos de listagem aos widgets Listing Grid .
Vá para a primeira e a segunda página. Arraste e solte o widget Grade de listagem em cada página e selecione os modelos de listagem para a primeira e segunda páginas de acordo.
Aqui está um exemplo de como o modelo de listagem pode ser adicionado à primeira página:
E é assim que aparece na segunda página:
Habilitando consulta personalizada no widget Grade de listagem
Assim que a consulta personalizada da API REST estiver pronta, você deverá selecioná-la no widget Listing Grid na segunda página. Pode ser realizada na aba Consulta Personalizada.
Ative a alternância Usar consulta personalizada e selecione o item necessário no menu suspenso Consulta personalizada .
Verifique o resultado. Lembre-se de que o link na grade de listagem principal contém um argumento de consulta.
O argumento de consulta permite exibir os dados do item que você acabou de clicar, o que cria uma ‘página única’ para o item da API REST.
O resultado é alcançado; agora você sabe como criar uma única página para o item REST API em seu site WordPress com a ajuda do plugin JetEngine .