Header

Partagez | 

[FA & Xooit] Singulier / Pluriel sur les stats

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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
-
» Recherche un graphiste pour forum Xooit
» Problème avec code Stats QEEL
» Ta vu ma Pub - (ta-vu-ma-pub.xooit.com) - [LG116]
» Remonter les stats le long de l'image du QUEEL
» stats et erreur dans le nombre record de membres connectes
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens