FacetWP – Elementor

Addicionando Facetas aos Listings do Elementor com FacetWP

Se você está buscando uma forma de otimizar seu site e melhorar a experiência do usuário, a combinação de FacetWP com Elementor é uma solução poderosa. Este complemento possibilita a adição de facetas, que são filtros interativos, em listagens de posts e produtos, tornando a navegação mais intuitiva e dinâmica. Neste artigo, vamos explorar como integrar o FacetWP ao Elementor de maneira eficaz, destacando funcionalidades, widgets e dicas práticas que podem elevar o seu projeto a um novo nível.

Desenvolvendo uma Integração Fluída

Uma vez que o FacetWP está instalado e ativado, ele permite que você utilize uma variedade de widgets do Elementor para criar listagens que suportem facetas. Assim, você pode refinar a apresentação do conteúdo de forma a atender às necessidades dos visitantes de sua página. Os widgets compatíveis incluem, entre outros:

• Elementor Pro: Loop Grid, Loop Carousel, Archive Posts, entre outros.
• Plugin Ultimate Addons para Elementor: Posts e Produtos Woo.
• Premium Addons e PowerPack: com ferramentas que melhoram a layout de blog e produtos.
• JetEngine: para usuários que buscam uma personalização mais detalhada com a Listing Grid.

Essencialmente, a integração é muito simples: uma vez que você ativa o add-on do FacetWP, ele adicionará widgets personalizados que facilitam a inclusão de facetas e listagens diretamente nas páginas criadas com o Elementor.

Usabilidade e Funcionalidade dos Widgets

Assim que você instala o plugin, não precisará de configurações complexas. Com o FacetWP ativo, os widgets do Elementor compatíveis apresentarão uma nova configuração chamada “Ativar FacetWP”. Ao ativar essa opção, o FacetWP automaticamente aplicará filtros dinâmicos às suas listagens.

O FacetWP adiciona três widgets principais que ampliam suas funcionalidades:

• FacetWP Facet: Permite que você adicione facetas já criadas à sua página Elementor. Com isso, torna-se um método conveniente por não exigir o uso de shortcodes.

• FacetWP Listing: Facilita a inclusão de templates de listagens criadas por meio do Listing Builder, apresentando seu layout na própria interface do Elementor, o que otimiza o design da página.

• FacetWP Button: Você pode adicionar diferentes tipos de botões, como o de ‘Aplicar’, que desabilita a atualização automática das facetas, proporcionando um controle maior na interação do usuário.

Personalizando Facetas

Com a adição do widget FacetWP Facet, você pode selecionar facetas existentes e personalizar a exibição de acordo com suas necessidades. Existe a opção de adicionar um título à faceta, selecionar a tag HTML correspondente e ocultar facetas vazias na interface do usuário.

O widget FacetWP Listing por sua vez, é ainda mais flexível, permitindo a adição de listagens específicas que não reagem aos filtros de facetas, o que pode ser útil em situações onde você deseja manter a integridade de determinadas informações.

Integrando Botões Interativos

Os botões criados com o widget FacetWP Button são fundamentais para a eficácia do sistema de facetas. Você tem opções como:

• Botão Aplicar: Ideal para garantir que as seleções de facetas sejam aplicadas apenas após o clique, evitando atualizações automáticas que podem confundir os usuários.

• Botão Flyout: Ao incorporar o add-on de Mobile Flyout, você pode abrir um painel interativo que fornece opções adicionais aos usuários em dispositivos móveis.

• Botão de Submissão: Permite redirecionar os usuários para uma página de resultados específica quando selecionar as facetas.

Estruturando Templates de Arquivo

Uma das grandes vantagens do FacetWP com Elementor é que você pode utilizá-lo em templates de arquivo do WordPress criados com o Elementor Theme Builder. Widget como Archive Posts e Archive Products podem ser facilmente configurados para trabalhar em conjunto com o FacetWP, automaticamente utilizando a query de arquivo para exibir os resultados apropriados.

Habilitando a Paginação do Elementor

Quando você utiliza a Pagination do Elementor, o FacetWP automaticamente detecta e integra isso ao seu sistema de filtragem, desde que essa paginação ofereça opções numeradas. No entanto, a integração não funcionará com opções como “Carregar ao Clicar” ou “Scroll Infinito”, que atualmente são incompatíveis.

Para maximizar a eficiência, é recomendado escolher “Recarregar Página” para a opção de Load Type nos widgets Loop Grid. Assim, o FacetWP poderá utilizar interações de paginação e executar o carrega-mento via AJAX de forma fluida.

Customização de Queries

Se você precisa ajustar a query de um widget de Posts ou Loop Grid, o Elementor oferece o Custom Query Filter hook. Isso permite que você personalize sua apresentação de postagens, modificando parâmetros como posts por página e ordem das postagens. Por exemplo, se você deseja adequar a apresentação a uma categoria específica ou atualizar a ordem, um código simplesmente implementado no arquivo functions.php do seu tema pode atender essa necessidade.

php
add_action('elementor/query/my_query_id', function($query) {
if ($query->is_category() && $query->is_main_query()) {
$query->set('posts_per_page', 12);
$query->set('orderby', [
'date' => 'DESC',
'title' => 'ASC'
]);
}
});

Mensagem de “Sem Resultados”

Em situações em que suas consultas não retornam resultados, é importante dar um feedback adequado ao usuário. Utilizando um breve código, você pode adicionar uma mensagem personalizada que avisa quando não há postagens a serem exibidas.

php
add_action('elementor/query/query_results', function($query) {
$total = $query->found_posts;
if ($total === 0) {
echo 'Nenhum resultado encontrado.';
}
});

Dicas Adicionais

Ao usar o filtro motion effects do Elementor, você deve evitar a opção “Sticky”. Isso ocorre porque essa funcionalidade pode causar duplicação de elementos, resultando em falhas na exibição de facetas ou listagens. Se a “Sticky” for necessária, considere usar CSS com position: sticky.

Conclusão

Integrar o FacetWP com o Elementor não apenas transforma a maneira como seus usuários interagem com o conteúdo, mas também melhora a usabilidade das suas páginas. Com uma configuração simples, e utilizando os widgets e opções disponíveis, você pode criar uma experiência robusta e dinâmica que se ajusta perfeitamente às necessidades do seu público. Com a capacidade de customizar queries, criar botões intuitivos e adicionar feedback visual, o potencial de personalização é quase ilimitado. Se você deseja um site mais atraente e fácil de navegar, a união de FacetWP e Elementor é, sem dúvida, o caminho mais eficiente.