Les systèmes de notation entre zéro et cinq étoiles sont monnaie courante sur internet, tout particulièrement sur les places de marché et les boutiques en ligne pour noter les produits. Les moteurs de recherchent relaient parfois même cette information dans les SERP si elle est issue d’un tiers de confiance.

Je vous propose ci-après une méthode simple et basée sur Javascript et jQuery pour afficher un curseur étoilé à l’écran, et permettre à l’utilisateur de choisir sa note. Nous n’irons pas au-delà et ne traiteront pas l’action AJAX résultant du clic d’une étoile, qui entraînera pas exemple la mémorisation en base de données etc. Attention, cet article s’adresse en priorité aux développeurs qui pourront peut-être trouver des idées pour leurs projets, et seront en mesure de comprendre et d’adapter le code à leurs besoins.

J’ai choisi d’utiliser Font Awesome pour avoir le choix parmi différents visuels, mais j’aurai pu tout autant utiliser le caractère Unicode U+2605 pour l’étoile ★.

La librairie jQuery est ici utilisée car c’est souvent une dépendance dans mes projets web. Ici elle n’est utilisée que pour le sélecteur $(this) ainsi que les sélecteurs CSS. Tout autre librairie JS comme Sizzle fera l’affaire également (code à adapter).

Démonstration :

Règle de notation par sélection d'étoiles

Dans la page web, voici comment initialiser la classe Javascript en ajoutant un curseur étoilé après chaque balise <li> .

 

Ma classe Javascript rate.class.js, ou plutôt mon ensemble de prototypes, se présente comme ceci.

On remarque la présence de variables propres à la classe. L’entier counter sert à comptabiliser le nombre de curseurs étoilés sur la page, et l’entier maxRate détermine la note maximale possible en nombre d’étoiles.

Concernant les fonctions :

  • hoverHandler : la fonction handler dans le trigger d’évènement $('.fa-star-o, .fa-star').on('mouseenter mouseleave', objRate.hoverHandler);
  • clickHandler : la fonction handler dans le trigger d’évènement $('.fa-star-o, .fa-star').on('click', objRate.clickHandler);

Les deux micro-astuces de ce système sont :

  1. Pour conserver le statut du curseur après clic, on désactive le trigger « mouseenter mouseleave » plutôt que de rajouter un trigger de modification et figeage de l’état.
  2. Lors d’un clic, on traite les étoiles inférieures ou égales à celle cliquée, puis ensuite on traite les autres pour s’assurer que leur visuel est cohérent.

La page web qui va avec cet exemple est la suivante :

Envie d’incorporer ce système de notation dans un menu déroulant et contextuel ? Suivez la méthode illustrée dans mon article.