Header
Partagez | 

[FA & Xooit] Singulier / Pluriel sur les stats

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [FA & Xooit] Singulier / Pluriel sur les stats   Lun 25 Jan - 14:40

Coucou Smile

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
Citation :
7 messages | 7 sujets
> Pour les sujets :
Citation :
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 essayer de te donner l'astuce à utiliser sur ForumActif et sur Xooit. La base sera la même, la seule différence sera au niveau de l'installation Smile

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




Un peu de réflexion

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 Wink ). 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.

Un chouilla de CSS

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.

Où j'installe ça ?

Pour FA :

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

Pour xooit :

Dans le template "overall_header.tpl" qui se trouve dans Panneau d'admin > Thème > Thème normal > modifier les templates, juste avant :
Code:
</style>

Ciblons nos élements via les templates

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 ^^

Idea Rappel :
sur FA :
    • Pour les catégories, forums & sous-forums: template "index_box"
    • Pour la liste des sujets : template "topics_list_box"
sur Xooit :
    • Pour les catégories & forums : template "index_body.tpl"
    • Pour les sous-forums & liste des sujets : template "viewforum_body.tpl"

Testons avec javascript

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 "s", c'est-à-dire le span qui est juste aprè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 Smile
Code:
$(this).next('span').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).next('span').addClass('hide');
    }
  });

});

Où j'installe ça ?

Pour FA :

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.

Pour xooit :

Ça va être un poil plus complexe pour xooit. Tout d'abord, on va ouvrir le template "overall_footer.tpl" qui se trouve dans Panneau d'admin > Thème > Thème normal > modifier les templates.

Pour que notre code fonctionne, on va avoir besoin d'appeler la bibliothèque jQuery. On va donc coller le code suivant :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
juste avant :
Code:
</body>

Enfin, juste avant :
Code:
</body>
on va mettre notre code javascript entre les balises :
Code:
<script type="text/javascript">
/*** Le code est ici ***/
</script>

ce qui donne au final pour tout notre ajout :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
   $(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).next('span').addClass('hide');
       }
     });

   });
</script>




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




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA & Xooit] Singulier / Pluriel sur les stats'" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA & Xooit] Singulier / Pluriel sur les stats
Page 1 sur 1
 Sujets similaires
-
» Féminin Pluriel
» Redirection avec htaccess sauf un dossier
» Le Thanatos : Croiseur de classe Retribution ! *
» stats de connexion de plus en plus bluffante...
» Crème. VS Pluriel (Codage)
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+