Mostrar e ocultar conteúdo com base em URL com base em compromissos
Ajuste a visibilidade dinâmica no Elementor
O plugin JetEngine permite definir condições específicas para mostrar ou ocultar o conteúdo. O módulo Visibilidade Dinâmica pode ajudá-lo a mostrar ou ocultar conteúdo pelo parâmetro URL. Este tutorial vai te ensinar como implementar esse recurso no site WordPress.
Ative a visibilidade dinâmica
Primeiro de tudo, precisamos habilitar o módulo. Para isso, navegue até JetEngine> JetEngine e ative a alternância Dynamic Visibility for Widgets and Sections . Após, clique no botão “Salvar” .
Agora veremos a opção Dynamic Visibility durante a edição no Elementor ou Gutenberg Page Builder.
Mostrar conteúdo
Adicione um formulário para reserva de serviço criado com os plugins JetFormBuilder e JetAppointment à página com Elementor Editor. O tipo de envio deve ser definido como “Recarregar página”.
Vamos verificar como o URL muda quando o formulário é enviado e quando não é.
Foi assim que ficou quando o formulário foi enviado com sucesso.
Se algo der errado, por exemplo, não preenchemos todos os campos obrigatórios, a página ficará assim.
Agora vamos verificar como podemos usar esses parâmetros de URL com Visibilidade Dinâmica.
Adicione uma nova seção à página que deseja exibir somente quando o formulário for enviado. Navegue até a guia Avançado da seção, encontre Visibilidade dinâmica e ative-a.
No tipo de condição Visibilidade, selecione a opção “Mostrar elemento se a condição for atendida” e defina a Condição como “Igual”.
No Campo, selecione a opção “Macros”.
A macro que procuramos é “Variável de consulta”. O Nome da Variável será “ status” que já vimos na URL. Preencha um campo Valor com “ sucesso ”.
Agora vamos adicionar outra Seção com o conteúdo que precisaremos exibir caso o formulário não tenha sido enviado. As configurações serão as mesmas que definimos acima; a única diferença é que o Valor em nossa condição será “ falhou ” agora.
Ocultar conteúdo
Como não queremos mais mostrar o formulário após o envio, podemos ocultá-lo com Visibilidade Dinâmica. Clique no widget JetForm , vá para Configurações avançadas e habilite Visibilidade dinâmica. Agora o tipo de condição de visibilidade será definido como “Ocultar elemento se a condição for atendida”.
Aqui precisamos de duas condições com o tipo de relação “OR”.
A condição será a mesma que adicionamos para ambas as seções.
O primeiro é para o sucesso.
E o segundo é para status de falha.
Verifique o resultado
Vejamos como o recurso funciona no front-end.
Isso é o que os usuários verão se enviarem o formulário com sucesso.
E é isso que pode ser visto se não conseguirmos enviar o formulário.
Definir visibilidade dinâmica em Gutenberg
Vejamos outro exemplo. Para isso, precisamos criar um modelo Search Archive com a ajuda do plugin JetThemeCore .
Navegue até Crocoblock > Theme Builder e clique em “ Criar novo modelo de página ”. No pop-up exibido, selecione as seguintes condições: “Incluir”, “Arquivar” e “Resultados da pesquisa”.
Selecione a opção “Criar modelo” na seção do corpo do modelo de página recém-criado.
No pop-up, selecione “Block Editor” e dê um nome para o novo modelo.
Mostrar conteúdo
Agora vamos adicionar esse conteúdo que será exibido no front end somente se o usuário digitar a palavra, por exemplo, “ foto ”.
Adicione um bloco de imagem à página e, na barra de ferramentas, clique no ícone em forma de olho.
Agora podemos ativar a opção Visibilidade dinâmica , selecionar o tipo de condição de visibilidade “Mostrar elemento se a condição for atendida” e definir a condição como “Igual”.
No Campo , clique no botão Tag Dinâmica e defina a Fonte como “Dados Personalizados”. Em seguida, selecione os dados “Variável de consulta” a serem exibidos e preencha o campo Nome da variável com o valor “ s ”. Não se esqueça de clicar no botão “ Aplicar ” .
Como dito anteriormente, o valor no nosso caso será “ foto ”.
Depois disso, basta fechar o pop-up e salvar as alterações no template.
Ocultar conteúdo
Agora, vamos adicionar uma coluna com as informações necessárias que queremos ocultar para solicitações de pesquisa específicas e adicionar o tipo de condição de visibilidade “Ocultar elemento se a condição for atendida” .
O Campo será configurado como anteriormente. A fonte será “Dados personalizados”, selecione dados para mostrar – “variável de consulta” e nome da variável – “ s ”.
O Valor será outro neste caso; que seja um “ casamento ” porque nosso Provedor não faz esse tipo de ensaio fotográfico.
Agora salve as alterações e verifique os resultados na página ao vivo.
Verifique o resultado
Esta é a aparência da página de resultados com a palavra de pesquisa “ foto ” agora.
E para outra solicitação, “ filho ”, em nossa pesquisa, não veremos nenhum conteúdo onde a visibilidade dinâmica foi aplicada.
É isso; agora você sabe como exibir ou ocultar uma seção dependendo da URL com a ajuda do plugin JetEngine .