Singulier / Pluriel sur les stats

Coucou

Bien souvent, quand on se lance dans la personnalisation complète de nos forums avec modification de template, on aime bien avoir des choses de ce type :
• pour les catégories / forums

7 messages | 7 sujets

• pour les sujets :

13 réponses

Oui mais les templates ne nous permettent pas de dire : "attention, si tu as 0 ou 1 message/sujet/réponse", tu ne mets pas le "s". Certaines personnes utilisent une astuce passe-partout en ajoutant "(s)". Eh bien ici, je te propose de nous passer de cette astuce et d'afficher soit le pluriel, soit le singulier en fonction de nos stats ^^

Dans ce tutoriel, je vais te donner une astuce utilisable sur n'importe quelle version de FA.

Pré-requis :
• avoir accès aux templates du forum ;
• comprendre les bases du html & de la CSS.


Je t'explique vite fait comment ça va se passer : par défaut, on va tout le temps afficher le pluriel, parce que c'est le cas le plus courant (bah oui, en général, on a pleins de messages dans nos forums ). Néanmoins, on va mettre le "s" du pluriel dans une balise span qu'on pourra facilement cibler pour la cacher si besoin.
On va aussi devoir isoler les "chiffres" pour pouvoir les comparer ^^

Pour résumer :
• on va créer une classe CSS qui cachera le pluriel ;
• dans le template, on va faire en sorte de pouvoir cibler les stats' et les pluriels ;
• avec du javascript, on va comparer les stats' pour vérifier si elle sont égales à 0 ou 1 => dans ce cas, on cachera le "s" du pluriel ^^.

On a donc notre trame de travail ! Commençons par le plus simple.


Ici, ça va être hyper simple : on va créer dans notre CSS une classe qui va juste cacher l'élement :

Code:

.hide{
 display: none;
}

C'est tout ^^ C'est cette classe qu'on mettra sur le span contenant le "s" du pluriel pour le cacher.


Dans ta feuille de style, c'est-à-dire : Panneau d'admin > Affichage > Images & couleurs > Couleurs > feuille de style CSS


Maintenant, on va cibler nos élements sur le template. Ici, ça va être simple : on va entourer le texte par une balise (p, div, span) à laquelle on va donner la classe "infos-stats". Par exemple :

Code:

<p class="infos-stats">
 {catrow.forumrow.POSTS} messages, {catrow.forumrow.TOPICS} sujets
</p>

Ensuite, dans ce bout de code, on va entourer les variables qui représentent les chiffres par un span avec une classe "nb" :

Code:

<p class="infos-stats">
 <span class="nb">{catrow.forumrow.POSTS}</span> messages, <span class="nb">{catrow.forumrow.TOPICS}</span> sujets
</p>

Enfin, on va mettre le "s" du pluriel dans une balise span :

Code:

<p class="infos-stats">
 <span class="nb">{catrow.forumrow.POSTS}</span> message<span>s</span>, <span class="nb">{catrow.forumrow.TOPICS}</span> sujet<span>s</span>
</p>

On remets ça dans le template et on valide ^^

Rappel :
• Pour les catégories, forums & sous-forums: template "index_box"
• Pour la liste des sujets : template "topics_list_box"


On est quasi prêt, il ne reste plus qu'à tester. L'idée ici, ça va donc être :
• on regarde sur la page chaque élement ayant pour classe "nb" et se trouvant dans un élement ayant pour classe "info-stats" :

Code:

$( ".infos-stats .nb" ).each(function( index ) {
 /* Le reste du code sera ici */
}

• on récupére ensuite le texte qui se trouve dans l'élement ".nb" et on le stocke dans une variable "infos_stat" (pour rappel, une variable = une sorte de case mémoire) :

Code:

var infos_stat = $(this).text();

• maintenant, on fait un test : si jamais infos_stat est inférieure ou égale à 1 (donc si elle est égale à 0 ou 1 en fait ^^) :

Code:

if( infos_stat * 1 <= 1){
 /* L'action à faire si mon test est vrai */
}

• dans ce cas, on va masquer le ou les "s", c'est-à-dire le ou les span qui sont "liés" à l'élement ".nb" qu'on est en train de tester (ici, il s'agit de "this" puisque c'est l'élement qu'on regarde actuellement) ; et pour masquer, on va tout simplement lui ajouter la classe "hide" que nous avons créé précédemment

Code:

$(this).parents('.infos-stats').find('.pluriel').addClass('hide');

C'est presque fini ^^ Il nous reste juste à lancer tout ce code une fois que la page est chargée. Ce qui donne au final pour le javascript :

Code:


$(document).ready(function (){

  /*** Afficher / Cacher "s" pour les stats ***/
  $( ".infos-stats .nb" ).each(function( index ) {
    var infos_stat = $(this).text();

    if( infos_stat * 1 <= 1){
      $(this).parents('.infos-stats').find('.pluriel').addClass('hide');
    }
  });

});

On va créer une page javascript qu'on va afficher sur toutes les pages du forum.

On va donc aller dans : Panneau d'admin > Modules > HTML & Javascript > Gestion des codes Javascript, on crée un nouveau javascript qu'on appelle par exemple : Pluriel des stats, on coche "sur toutes les pages", on copie-colle le javascript précédent et on valide.

---

C'est fini \o/ Avoue que ce n'était pas si compliqué ^^