Niveau 6 - Boutons filtre
C'est maintenant le temps de passer aux choses sérieuses, on s'attaque au JavaScript. Mais avant un peu d'explications sur le fonctionnement de la page. Les livres sont disponibles à l'achats par lot. Chaque lot à un prix minimum. Plus le montant qu'on donne est élevé, plus on achète de livres.
Les lots
| Lot | Prix minimum | livres | Nb livres total |
|---|---|---|---|
| #1 | 1,35 $ | 1 à 5 | 5 |
| #2 | 13,54 $ | 6 à 10 plus tous les livres du lot #1 | 10 |
| #3 | 24,37$ | Tous les livres | 14 |
Boutons de filtre
Dans le haut de la section livre, il y a trois boutons pour faire une sélection rapide d'un lot. Il y a aussi un texte qui indique "Payez au moins [Prix minimum] pour ces [Nb livres total] articles".
Par défaut au chargement de la page le bouton sélectionné est "Lot complet de 14 articles" et le texte est "Payez au moins 24,37 $CA pour ces 14 articles".
Quand on clique sur un des boutons, les images des livres qui ne seront pas acheté sont masquées. (ex. si on sélection le bouton "Lot de 5 articles" seulement les 5 premiers livres seront affichés.). Le texte est aussi ajusté en conséquence. Le bouton sur lequel on a cliqué changera aussi de couleur pour indiquer que c'est ce filtre qu'on a sélectionné.
Astuces
- J'ai utilisé des attributs personnalisés (data-montant, data-lot et data-nb) pour me permettre de sélectionner plus facilement le bon lot. Voir les notes de cours sur ces attributs.
- Pour modifier la couleur de fond du bouton sélectionné et masquer des livres, j'ai utilisé des classes css que j'ajoute ou enlève aux besoins.