FacetWP – Flyout menu

Création d’un Menu Flyout Optimisé pour Mobile avec FacetWP

Dans le monde d’aujourd’hui, où les utilisateurs accèdent de plus en plus aux sites web via des appareils mobiles, disposer d’une interface claire et facile à utiliser est un impératif. Le FacetWP Flyout menu est une solution parfaite pour ajouter une barre de filtres mobile-friendly qui améliore l’expérience utilisateur. Dans cet article, nous allons explorer en profondeur ce menu flyout, sa mise en œuvre et ses avantages.

Qu’est-ce que le FacetWP Flyout menu ?

Le FacetWP Flyout menu est une extension de FacetWP qui génère un panneau latéral flyout, très utile pour optimiser les sites pour les appareils mobiles. Lorsque vous accédez à une démonstration du produit, il devient évident à l’usage : en réduisant la taille de votre navigateur, vous verrez apparaître un bouton violet indiquant “Afficher les filtres”. Autrement dit, ce menu se doit d’être pratique et attrayant, tout en permettant à vos visiteurs de filtrer facilement les contenus.

Fonctionnalités Clés

Le FacetWP Flyout menu intègre plusieurs facettes qui sont affichées dans l’ordre où elles apparaissent sur la page, à l’exception des facettes de pagination et des éléments de sélection d’utilisateur. Ce design flexible vous permet d’utiliser plusieurs instances de la même facette si besoin.

Pour adapter les facettes apparaissant dans le flyout ou pour les réorganiser, vous pouvez personnaliser le modèle du flyout, en y intégrant également des éléments supplémentaires tels que des sélections d’utilisateur.

Mise en place du FacetWP Flyout menu

Installation de l’extension

Premièrement, téléchargez et installez l’extension d’add-on de FacetWP, puis activez-la. Une fois cela fait, vous devrez ajouter un bouton ou un lien sur votre page avec la classe CSS facetwp-flyout-open pour déclencher l’ouverture du flyout. Voici un exemple pour un bouton :

html
<button class="facetwp-flyout-open">Afficher les filtres</button>

Traduction du Texte du Bouton

Si vous avez besoin de traduire le texte du bouton, cela nécessite d’ajouter un bout de code PHP dans le fichier functions.php de votre thème :

php
echo ''. facetwp_i18n( __('Afficher les filtres', 'fwp-front') ) . '';

Cela rendra le texte traduisible dans des systèmes comme WPML ou d’autres plugins de traduction.

Masquage du Bouton sur Desktop

Pour ne pas afficher le bouton de flyout aux utilisateurs de desktop, vous pouvez ajouter le code CSS suivant dans votre fichier style.css :

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

Cela masquera donc le bouton lorsque la largeur de l’écran est de 780 pixels ou plus, ce qui peut être ajusté selon vos besoins.

Personnalisation des comportements du Flyout

Ouverture Automatique à la Chargement

Pour garantir que le flyout s’ouvre automatiquement à la première visite lorsque des sélections de facettes sont présentes dans l’URL, un code peut être intégré dans le fichier functions.php :

php
add_action('facetwp_scripts', function() {
// Code permettant l'ouverture automatique
});

Cette fonctionnalité est utile quand les facettes sont disponibles uniquement dans le flyout.

Fermeture Automatique du Flyout

Vous pouvez également configurer le flyout pour qu’il se ferme automatiquement après avoir effectué une sélection. Cela peut être fait en ajoutant un code avec l’événement facetwp-refresh qui fermera le menu immédiatement après qu’une facette ait été sélectionnée.

Fermeture du Flyout par Facette Spécifique

Si vous désirez fermer le flyout après qu’une facette spécifique ait été manipulée, utilisez le code ci-dessous, en remplaçant my_facet_name par le nom de votre facette :

php
add_action('facetwp_scripts', function() {
// Code de fermeture avec vérification de la facette
});

Cela permet d’augmenter encore plus la réactivité et la convivialité de votre interface.

Ajout de boutons de soumission dans le Flyout

En ajoutant des boutons d’application ou de filtrage supplémentaires dans le flyout, vous pouvez offrir aux utilisateurs plus de contrôle sur leurs sélections. Cela implique d’adapter le modèle du flyout dans votre code HTML :

“`html

“`

Ajout de Contenu Supplémentaire

Une équipe de développement peut également enrichir le flyout en y ajoutant d’autres contenus. Grâce à la section dédiée à l’ajout de contenu personnalisé aux facettes, vous pourrez insérer des informations supplémentaires, images ou autres éléments pertinents.

Avantages du FacetWP Flyout menu

Le FacetWP Flyout menu présente plusieurs avantages :

1. Optimisation Mobile : S’adapte parfaitement aux exigences des utilisateurs sur mobile en rendant le filtrage des contenus simple et accessible.

2. Flexibilité : Permet d’ajouter des facettes multiples et de personnaliser la façon dont celles-ci s’affichent.

3. Expérience Utilisateur Améliorée : Contribue à une navigation fluide, que ce soit sur mobile ou desktop, en rendant le processus de filtrage intuitif.

4. Personnalisation : Avec la capacité d’ajouter des boutons d’action, de traduire les textes, et d’ajuster le design à votre convenance, vous pourrez adapter le flyout à la marque et au style de votre site.

5. Réduire le Désordre Visuel : En masquant les facettes non essentielles sur mobile, le flyout permet de maintenir une présentation claire et ordonnée.

Le FacetWP Flyout menu est donc bien plus qu’une simple fonctionnalité ; c’est un atout majeur pour quiconque souhaite améliorer l’ergonomie et la navigabilité de son site web mobile. En déployant cette extension, vous offrez à vos utilisateurs une plateforme dynamique et intuitive pour explorer les options de filtrage, tout en préservant un design épuré. C’est un partenariat gagnant-gagnant qui bénéficie tant aux propriétaires de sites qu’à leur audience. En somme, maîtriser le dispositif du FacetWP Flyout menu ouvre la voie vers une meilleure expérience de consultation des contenus sur n’importe quel appareil.