FacetWP – Star Rating

Comprendre le système de notation par étoiles de FacetWP

Dans le monde numérique actuel, où les avis et les retours d’expérience des utilisateurs jouent un rôle crucial dans le processus de décision d’achat, la fonctionnalité de notation par étoiles devient un outil incontournable pour les entreprises. Le système de notation par étoiles de FacetWP permet aux utilisateurs de filtrer des posts ou produits en fonction des notes (moyennes) attribuées, facilitant ainsi la recherche de contenu de qualité. Ce système est particulièrement adapté pour les sites de commerce électronique, où la confiance est primordiale.

Les options de personnalisation

Le FacetWP Star Rating comporte plusieurs options qui permettent de le personnaliser selon les besoins de votre site.

Source de données

Vous devez désigner un champ personnalisé qui stocke la valeur de la note (moyenne). Ce champ doit contenir un entier compris entre 1 et 5, ce qui permet d’utiliser des évaluations standardisées. Pour WooCommerce, il est possible de filtrer les produits selon leur évaluation moyenne en choisissant le champ “Average Rating”.

Icône de notation

Les utilisateurs peuvent choisir l’icône qui représentera les notes. En plus des options par défaut, vous avez la liberté d’utiliser des icônes Unicode, des SVG personnalisés ou même des icônes provenant de polices web. Par exemple, vous pourriez afficher des étoiles pleines pour les notes et des étoiles ouvertes pour les notes sans correspondance.

Afficher les notes fantômes

Une caractéristique pratique est la possibilité d’afficher des “notes fantômes”, c’est-à-dire des icônes qui apparaissent même si aucune note ne correspond à une sélection particulière. Cela permet de garder un visuel cohérent et encourage l’utilisateur à explorer d’autres options. Ces icônes fantômes peuvent avoir leur propre couleur ou iconographie, renforçant ainsi la différenciation visuelle.

Couleurs des étoiles

Les utilisateurs peuvent choisir différentes couleurs pour les icônes en fonction de l’état : normal, survolé ou sélectionné. Cela permet de créer un contraste fort qui attire l’attention. En jouant avec les couleurs, il est possible de présenter un système de notation visuellement attrayant qui reste également intuitif.

Intégration de FacetWP Star Rating

Pour intégrer efficacement le système de notation par étoiles à votre thème, vous devrez manipuler le fichier functions.php de votre thème enfant, ce qui vous permettra d’adapter plus finement le comportement des icônes. Voici comment procéder :

Utiliser des icônes personnalisées avec PHP

Vous pouvez remplacer les icônes par défaut en utilisant le hook facetwp_ratings_icon. Voici un exemple :

php
add_filter( 'facetwp_ratings_icon', function( $icon, $is_disabled, $facet ) {
if ( $facet['name'] === 'my_star_rating_facet' ) {
$icon = '✪'; // Icône étoile circlet.
}
return $icon;
}, 10, 3 );

Cette modification vous permet d’afficher un symbole spécifique à la place des icônes standards, ce qui peut aligner davantage l’apparence avec votre identité visuelle.

Gérer les icônes fantômes

Si vous optez pour l’affichage d’icônes fantômes, vous pouvez les personnaliser afin qu’elles diffèrent visuellement des icônes de notation. Cela renforce la lisibilité pour l’utilisateur :

php
add_filter( 'facetwp_ratings_icon', function( $icon, $is_disabled, $facet ) {
if ( $facet['name'] === 'my_star_rating_facet' && $is_disabled ) {
$icon = '☆'; // Icône étoile ouverte pour les notes fantômes.
}
return $icon;
}, 10, 3 );

Cette flexibilité permet non seulement d’adapter l’apparence mais aussi d’améliorer l’expérience utilisateur en rendant les interactions plus claires.

Personnalisation du style des étoiles

L’ensemble des icônes de notation peut être stylisé avec du CSS pour ajuster l’espacement et la taille. Par exemple, pour ajouter de l’espace entre les icônes, vous pourriez écrire :

css
.facetwp-rating {
margin: 0 6px;
font-size: 22px;
}

Il est essentiel de s’assurer que les icônes sont non seulement belles mais aussi fonctionnelles et faciles à utiliser sur n’importe quel appareil.

Couleur de survol

Pour inciter les utilisateurs à interagir avec la notation, il peut être intéressant de changer la couleur des icônes lorsque la souris passe dessus. Cela créé une interaction dynamique :

css
.facetwp-rating:hover {
color: #f3ca1e; // Jaune pour les icônes au survol.
}

Gestion des textes et des traductions

Si votre site vise un public multilingue, il est impératif de gérer les textes affichés de manière proactive. Vous pouvez modifier les textes par défaut tels que “et plus” ou “annuler” en utilisant le filtre gettext :

php
add_filter( 'gettext', function( $translated_text, $untranslated_text, $domain ) {
if ( 'fwp-front' === $domain ) {
if ( $translated_text === '& up' ) {
$translated_text = 'Et plus';
}
if ( $translated_text === 'Undo' ) {
$translated_text = 'Réinitialiser';
}
}
return $translated_text;
}, 10, 3 );

Cette approche garantit que les utilisateurs reçoivent des informations claires et compréhensibles dans leur langue maternelle.

Conclusion

Le système de notation par étoiles proposé par FacetWP est un outil puissant qui offre une multitude d’options de personnalisation. Que vous passiez par la sélection d’icônes, la gestion des couleurs ou le choix de la source de données, chaque aspect peut être peaufiné pour s’adapter à votre vision et améliorer l’expérience utilisateur.

En utilisant judicieusement ces fonctionnalités, vous pouvez non seulement améliorer l’esthétique de votre site, mais aussi renforcer l’engagement des utilisateurs en facilitant la recherche de contenu de qualité. Le FacetWP Star Rating permet ainsi de transformer votre site en une plateforme conviviale, fiable et attrayante pour tous vos visiteurs.