Como adicionar filtros à tabela

Para adicionar um filtro de pesquisa , você precisa criar um filtro com base no qual o widget funcionará. Para construí-lo, navegue até a guia Filtros Inteligentes no painel do WordPress e clique em “ Adicionar Novo ”.

Preencha o Título , Rótulos de Filtro e escolha a opção Pesquisar no menu suspenso Tipo de Filtro .

Você também pode alterar o valor do espaço reservado e escolher uma fonte para a pesquisa como uma opção Pesquisar por . Você pode escolher “Pesquisa padrão do WordPress” ou “Por campo personalizado”, o que permitirá que os usuários pesquisem dados de acordo com as configurações de consulta que você aplicou. Agora vamos selecionar a primeira variante para nosso Filtro de Pesquisa .

Quando todas as personalizações estiverem prontas, clique no botão “ Publicar ” .

Abra o Editor de páginas . Se você ainda não criou uma tabela, confira um tutorial de personalização de tabelas . 

Você pode encontrar o widget necessário digitando “Filtro de pesquisa” na barra de pesquisa. 

A próxima etapa é a edição de conteúdo. É essencial porque faz com que o filtro funcione conforme pretendido. Primeiramente, selecione o filtro que você acabou de criar.

Um dos campos mais importantes é Este filtro para , onde destacamos a opção JetEngine Dynamic Table . 

Além disso, você pode personalizar outras opções como Aplicar tipo (onde você pode escolher entre “AJAX”, “AJAX ao digitar”, “Recarregar página” e “Misto”), o texto do botão de pesquisa e seu ícone. Também existe a oportunidade de ocultar ou mostrar o rótulo do filtro , definir o ID de consulta exclusivo e ativar provedores adicionais, se necessário.

Faltam apenas algumas personalizações para colocar um filtro de pesquisa em funcionamento – Estilo e Configurações avançadas . Quando terminar, o filtro de pesquisa Elementor estará pronto.

Agora podemos anexar um Filtro Selecionado ao nosso Filtro de Pesquisa recém-criado .

O método é praticamente o mesmo. A primeira ação é adicionar um novo filtro. Então, vamos repetir os passos dados anteriormente. Vá para Filtros Inteligentes > Adicionar Novo e preencha todos os rótulos de filtro.

Precisamos escolher Select Filter Type . Lá você pode ativar o botão É hierárquico , onde você pode adicionar um novo nível de hierarquia de filtro, se habilitado.

No entanto, se esta opção estiver desativada, você verá algumas outras opções extras. O primeiro é Data Source , onde você pode escolher entre as opções padrão. Para nossa tabela, podemos escolher “Taxonomias” como Fonte de Dados e trabalhar com a taxonomia de cores do Produto .

Outras configurações oferecem a opção de Mostrar termos vazios e Mostrar apenas filhos do termo atual .

Você também pode escolher um novo espaço reservado em vez do padrão, decidir se precisa filtrar dados do tipo de metacampos Checkbox e excluir/incluir os itens desejados.

Todas as cores serão extraídas dos Atributos dos produtos , que podem ser adicionados na edição das postagens dos produtos. 

Se você quiser saber mais sobre como criar atributos , considere ler este guia .

Não se esqueça de apertar o botão “ Publicar ” para salvar todas as alterações e retornar ao editor de páginas.

Anexe o Filtro de Seleção ; ele pode ser encontrado digitando o título homônimo na barra de pesquisa.

Algumas configurações de conteúdo são semelhantes ao Filtro de pesquisa. Aqui também é vital selecionar um filtro; desta vez, será Filtrar por “Cor do produto”. A próxima coisa a mencionar é este filtro para o menu suspenso. Como você lembra, trabalhamos com a tabela criada com a ajuda do plugin JetEngine , então clicamos em JetEngine Dynamic Table . 

Defina as configurações de filtro de forma idêntica às configurações de filtro de pesquisa, inclua o menu suspenso Aplicar tipo , onde você escolhe entre as opções “AJAX”, “Recarregar página” e “Misto”. Junto com isso, há uma barra Aplicar na com duas alternativas – “Alteração de valor” e “Clique no botão Aplicar”.

Existem também dois botões de alternância que permitem mostrar ou ocultar o botão Aplicar e o rótulo do filtro. 

Além disso, você pode definir o ID da consulta e ativar provedores adicionais com o botão de alternância.

De longe, restam apenas as configurações de estilo e avançadas . 

Depois de personalizá-los, o trabalho com o Filtro de seleção de cores estará totalmente concluído. Agora prosseguimos para o próximo widget – Range Filter .

Primeiramente, devemos criar um novo filtro mais uma vez. 

Vamos adicionar rótulos de filtro e prosseguir para as configurações de filtro. No menu suspenso Tipo de filtro , precisamos selecionar “Intervalo”.

Todas as outras configurações permitem que você defina um filtro adequado. Se quiser ajustar todos eles, você pode conferir nosso tutorial de visão geral do filtro de intervalo .

Abra o editor de páginas e encontre o widget Filtro de intervalo digitando este título na caixa de pesquisa.

Selecione o filtro recém-adicionado e indique que esse filtro deve estar relacionado à JetEngine Dynamic Table . Continue a personalização das configurações de Conteúdo que são idênticas à configuração Selecionar Filtro .

Algumas personalizações de estilo e nosso filtro de alcance também está pronto.

O seguinte widget para visão geral é Active Tags . Descobriremos para que serve e como aplicá-lo à mesa.

Este widget foi criado para simplificar o trabalho com filtros. O seu objetivo principal é gerenciá-los, ou seja, exibir os filtros escolhidos e desabilitar alguns sem remover todos os dados inseridos. Funciona caso o usuário queira remover apenas um item filtrado sem excluir outros resultados filtrados.

No nosso caso continuaremos trabalhando com a página onde colocamos a mesa.

Você pode encontrar o widget Active Tags digitando seu título na caixa de pesquisa.

Preste atenção ao fato de que sua página já deve incluir pelo menos um filtro para exibir corretamente o widget Active Tags.

Escolha a tabela a ser usada com o widget Active Tags e selecione o tipo AJAX ou Page Reload Apply para ela. 

Se você ativou a opção Limpar Item , adicione o Rótulo principal e o Rótulo Limpar Item . Como em qualquer outro filtro descrito neste tutorial, você pode definir um ID de consulta exclusivo e ativar Provedores adicionais .

Após gerenciar o estilo e as configurações avançadas , vá para o front end e confira o resultado.

Usamos o filtro Faixa de preço para ver como funciona o widget Tags ativas. Ele permite que os usuários selecionem quais dados de filtro desejam remover de seus critérios de pesquisa. 

No entanto, existe outro widget que ajuda no gerenciamento dos filtros – Remover Filtros . Sua principal característica é a possibilidade de zerar todos os filtros aplicados.

Se você deseja adicionar a capacidade de remover filtragem desnecessária, este tutorial explica como usar o widget Remover filtros .

Observe que escolhemos JetEngine Dynamic Table como uma opção na lista suspensa Este filtro para . Todas as outras personalizações ficam a seu critério.

Como resultado, obtemos um botão que limpará todos os filtros aplicados.

Outro widget que você pode adicionar à sua tabela Elementor para torná-la mais conveniente para os usuários é o Pagination . Seu objetivo é simplificar a navegação nas tabelas.  

Se você quiser saber mais sobre este widget, consulte nosso guia sobre como adicionar Paginação à tabela criada com a ajuda do plugin JetEngine .