Ajouter un second rang en fonction du nombre de messages

Coucou les loulous

ForumActif nous donne la possibilité d'attribuer des rangs spéciaux à nos membres. Cela dit, parfois, on aimerait pouvoir attribuer un rang spécial + un rang en fonction du nombre de messages.

Eh bien c'est possible, et c'est ce que nous allons faire ici

Voici un exemple de rendu : clic.


Ici, dans mon exemple, j'ai défini uniquement 5 nouveaux rangs :
• de 0 à 20 messages : "Je suis nouveau",
• de 21 à 50 messages : "Je suis timide",
• de 51 à 100 messages : "Je prends mes marques",
• de 101 à 200 messages : "Je me sens bien",
• plus de 201 messages : "Je suis bien installé".

Mais tu peux en mettre autant que tu le désires, tant qu'un nombre n'est pas dans 2 rangs

Ce tutoriel fonctionne pour toutes les versions de forum.


On va commencer par créer un javascript qu'on ne va appeler nulle part. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

Le js contiendra ceci :

Code:

$(function(){

   // Liste des nouveaux rangs
   var listNewRank = [
      {
         msgMin: 0,
         msgMax: 20,
         intitule: "Je suis nouveau"
      },
      {
         msgMin: 21,
         msgMax: 50,
         intitule: "Je suis timide"
      },
      {
         msgMin: 51,
         msgMax: 100,
         intitule: "Je prends mes marques"
      },
      {
         msgMin: 101,
         msgMax: 200,
         intitule: "Je me sens bien"
      },
      {
         msgMin: 201,
         msgMax: 0,
         intitule: "Je suis bien installé"
      },
   ];

   // Sous quel label se trouve le nombre de messages ?
   var intituleNbMessage = "Message";

   // on indique la version du forum
   // attention de bien respecter les écritures ci-dessous
   // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
   var versionForum = 'modernbb';

   switch (versionForum) {
        case 'phpbb2':
            cible = ".postdetails.poster-profile";
            break;

        case 'punbb':
            cible = ".postbody .user";
            break;

        case 'awesomebb':
            cible = ".post-aside";
            break;
       
        /* modernbb, phpbb3, invision */
        default:
            cible = ".postprofile";
            break;
    }

    // Si on est dans un message
   if( $(cible).length ){
      // On parcourt chaque profil
      $(cible).each( function(){
         var $this = $(this),
            nbMessage = 0,
            findNbMsg = false ;
      
         // Dans chaque profil,
         // on parcourt chaque label
         $this.find('.infos-posteur .label').each( function(){
            var $thisLabel = $(this);
            // si le label parcouru est celui des messages
            if( $thisLabel.text().indexOf(intituleNbMessage) > -1){
               // On récupére le nombre de message et on sort de la boucle
               nbMessage = $thisLabel.parent().find('.label + span ').text()*1;
               findNbMsg = true;
            }

            if(findNbMsg){
               return;
            }
         });

         // On parcourt le tableau des nouveaux rangs
         for( var i = 0 ; i < listNewRank.length ; i ++){
            // Si le nombre de messages est supérieur ou également au nombre de messages minimum
            // Et s'il est plus petit ou égale au nombre de messages maximum (ou si ceux-ci sont "l'infini")
            if(nbMessage >= listNewRank[i].msgMin && (nbMessage <= listNewRank[i].msgMax || listNewRank[i].msgMax == 0)){
               // On va remplir le nouveau rang
               $this.find('.new-rank').text(listNewRank[i].intitule);
               break;
            }   
         }

      });
   }

});

Le code est commenté pour que tu puisse le comprendre.


• La liste de tes rangs

Code:

// Liste des nouveaux rangs
   var listNewRank = [
      {
         msgMin: 0,
         msgMax: 20,
         intitule: "Je suis nouveau"
      },
      {
         msgMin: 21,
         msgMax: 50,
         intitule: "Je suis timide"
      },
      {
         msgMin: 51,
         msgMax: 100,
         intitule: "Je prends mes marques"
      },
      {
         msgMin: 101,
         msgMax: 200,
         intitule: "Je me sens bien"
      },
      {
         msgMin: 201,
         msgMax: 0,
         intitule: "Je suis bien installé"
      },
   ];

> msgMin = le nombre de messages minimum pour avoir le rang
> msgMax = le nombre de messages maximum pour avoir le rang
Quand msgMax = 0, cela signifie que le nombre max' de messages n'est pas définie (en gros, ça veut dire plus de msgMin messages)

• Le libellé des messages :

Code:

// Sous quel label se trouve le nombre de messages ?
   var intituleNbMessage = "Message";

• La version de ton forum :

Code:

// on indique la version du forum
   // attention de bien respecter les écritures ci-dessous
   // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
   var versionForum = 'awesomebb';

C'est tout

Une fois que c'est terminé, on va récupérer l'url du javascript :

Pour moi, ça sera donc :

Code:

https://miettes.lebonforum.com/38505.js

Ici ça va être très simple. Quelle que soit la version de ton forum, on va modifier le template "viewtopic_body" (Panneau d'administration > Affichage > Templates > Général).

1) On va remplacer ceci :

Code:

<!-- BEGIN profile_field -->
   {postrow.displayed.profile_field.LABEL}
   {postrow.displayed.profile_field.CONTENT}
   {postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

par ça :

Code:

<!-- BEGIN profile_field -->
<div class="infos-posteur">
   {postrow.displayed.profile_field.LABEL}
   <span>{postrow.displayed.profile_field.CONTENT}</span>
   {postrow.displayed.profile_field.SEPARATOR}
</div>
<!-- END profile_field -->

Pour awesome
C'est ceci qu'il faut remplacer par la même chose que précédemment :

Code:

<!-- BEGIN profile_field -->
   <dt>{postrow.displayed.profile_field.LABEL}</dt>
    <dd>{postrow.displayed.profile_field.CONTENT}</dd>
<!-- END profile_field -->

2) Ensuite, on va remplacer ça :

Code:

{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}

par ça :

Code:

{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
<div class="new-rank"></div>

3) Et pour finir, tout en bas du template, on va ajouter l'appel à notre js :

Code:

<script src="https://miettes.lebonforum.com/38505.js" type="text/javascript"></script>

Evidemment, n'oublie pas de remplacer le lien par le tien

On sauvegarde et on publie.


Logiquement, si tu vas sur un message, tu dois avoir ton nouveau rang qui s'affiche. Cela dit, visuellement, ça n'est peut-être pas terrible.

A toi de faire la CSS qui te convient et de la placer dans la feuille de style de ton forum (Panneau d'administration > Affichage > Images et Couleurs > Couleurs >Feuille de style CSS).

Par exemple, voici le style du tutoriel :

Code:


.new-rank{
   color: #444;
   font-size: 11px;
   font-style: italic;
}

.new-rank:before,
.new-rank:after{
   content: "\f005";
    font-family:FontAwesome;
   display: inline-block;
   margin: 0 4px;
}



---

Si tu rencontres un souci pour personnaliser ou mettre en place ce tutoriel, n'hésite surtout pas à nous demander un coup de pouce