FacetWP – Flyout menu

FacetWP Flyout Menu: Um Guia Completo

Se você está em busca de uma solução eficaz para implementar filtros em sua página de forma amigável para dispositivos móveis, o FacetWP Flyout menu é exatamente o que você precisa. Este recurso oferece uma barra de filtro que surge como um sidebar em formato de flyout, facilitando o acesso e a interação dos usuários, especialmente em telas menores. Neste artigo, vamos explorar as diversas funcionalidades do FacetWP Flyout menu, assim como suas configurações e personalizações para melhorar a experiência do usuário.

O Que é o FacetWP Flyout Menu?

Em resumo, o FacetWP Flyout menu permite que você adicione filtros dinâmicos de forma prática e intuitiva em sites, principalmente focando no uso em dispositivos móveis. Quando um visitante acessa sua página com uma viewport menor, o flyout exibe opções de filtro que podem ser utilizadas para refinar as escolhas, tornando a navegação muito mais tranquila.

Por exemplo, imagine que você tenha um site de vendas de carros. Com o flyout, quando o usuário clica no botão “Mostrar filtros”, ele pode selecionar características como marca, preço, ano, dentre outros, tudo isso sem sair da página inicial. É uma maneira eficiente de segmentar e facilitar a busca por produtos ou informações específicas.

Como Configurar o FacetWP Flyout Menu

A configuração do FacetWP Flyout menu é bastante simplificada. Primeiro, você precisará instalar o plugin específico e ativá-lo no seu WordPress. Após isso, é necessário adicionar um botão ou link que acione a exibição do flyout, utilizando a classe CSS facetwp-flyout-open. Por exemplo:

html
<button class="facetwp-flyout-open">Mostrar filtros</button>

Isso garante que, ao clicar no botão, o menu lateral dispare e mostre as opções de filtro configuradas na sua página. Se precisar personalizar o texto do botão para que ele suporte idiomas diferentes, você deve implementar PHP no arquivo functions.php do tema. Veja como você pode fazer isso:

php
echo ''. facetwp_i18n( __('Mostrar filtros', 'fwp-front') ) . '';

Essa abordagem permite que o texto seja traduzido por plugins como o WPML, garantindo que todos os usuários tenham acesso ao conteúdo em seu idioma nativo.

Personalizando o Flyout Menu

Ocultando o Botão em Widths de Desktop

Caso você queira que o botão de “Mostrar filtros” apareça apenas em dispositivos móveis, você pode escondê-lo no desktop ajustando o arquivo CSS do seu tema. Um simples trecho de código pode fazer essa mágica:

css
@media (min-width: 780px) {
.facetwp-flyout-open {
display: none;
}
}

Com esse estilo, quando a largura da tela for maior que 780 pixels, o botão de filtro desaparece, focando a funcionalidade no usuário móvel.

Configurando a Direção do Flyout

Se por algum motivo você preferir que o menu flyout deslize da direita para a esquerda, isso pode ser feito através de CSS sem complicações. Você pode adicionar as regras diretamente no seu arquivo style.css para modificar a apresentação padrão.

Gerenciamento de Facetas Duplicadas

Um problema comum enfrentado por usuários do Elementor Pro é a duplicação de facetas no flyout. Para evitar isso, é essencial desativar quaisquer opções de “Sticky” nos widgets do Elementor que contenham facetas. Isso garantirá que cada facet seja exibida corretamente e apenas uma vez no flyout.

Abrindo o Flyout Automaticamente

Se você deseja que o flyout apareça automaticamente na inicialização da página, independentemente do usuário precisar clicar no botão, há como fazer isso. Utilizando um pequeno código PHP no seu arquivo functions.php, você pode configurar o flyout para abrir quando a URL contiver parâmetros de facetas. Essa técnica é útil para campanhas de marketing que direccionam usuários para páginas filtradas.

php
add_action('facetwp_scripts', function() {
if (isset($_GET['facet'])) {
?>
<script>
jQuery(function() {
jQuery('.facetwp-flyout-open').trigger('click');
});
</script>
<?php
}
}, 100);

Fechando o Flyout Após Ações do Usuário

A experiência do usuário pode melhorar significativamente se o flyout fechar automaticamente após uma seleção de faceta. Existem várias maneiras de implementar isso. A primeira, e mais simples, é fazer com que o flyout se feche assim que um usuário faz qualquer interação com os filtros:

php
add_action('facetwp_scripts', function() {
?>
<script>
jQuery(document).on('facetwp-refresh', function() {
jQuery('.facetwp-flyout').fadeOut();
});
</script>
<?php
});

Outra maneira é configurar o fechamento do flyout apenas quando um botão de submissão for clicado. Para isso, você deve desabilitar a funcionalidade de autoatualização do FacetWP e adicionar botões apropriados tanto na página principal quanto no flyout.

Changelog do Plugin

Ficar atento às atualizações é crucial para garantir que seu site funcione sem problemas. O FacetWP Flyout menu tem recebido várias atualizações que melhoraram o suporte e a funcionalidade. Vejamos algumas das principais mudanças:

• 0.8.3: Suporte aprimorado para múltiplas facetas do mesmo tipo.
• 0.8.0: Suporte completo para idiomas da direita para a esquerda (RTL).
• 0.7.0: Novas funcionalidades que ocultam automaticamente etiquetas de facetas vazias.
• 0.6.1: Correções feitas para garantir que todos os tipos de facetas sejam responsivos no flyout.

Considerações Finais

O FacetWP Flyout menu é uma solução prática para quem deseja otimizar a experiência de filtragem em sites, especialmente em dispositivos móveis. Com um conjunto robusto de opções de personalização e uma instalação simples, ele se posiciona como uma ferramenta indispensável para desenvolvedores que buscam oferecer uma navegação fluida e contextual aos seus usuários.

Ao implementar este addon, você não apenas melhora a usabilidade do seu site, mas também potencializa a conversão, já que facilita o acesso às informações relevantes aos seus visitantes. Portanto, ao integrar o FacetWP Flyout menu, você está investindo em uma experiência de usuário superior, que é vital nos dias de hoje.