[AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets

Hello les amies,

L'astuce consiste a placer un bouton sur la liste des sujets après chaque titre.
Au clic et seulement au clic , l'information sera affichée
car je ne voulais pas faire plusieurs requêtes pour tous les sujets à l'ouverture de la page.
Tout sera personnalisable dans la feuille de style .






Au clic et si le nombre de LIKES est positif:



Au clic et si le nombre de LIKES est négatif:





Pour cela il est impératif de suivre les modifications a apporter dans le template topics_list_box:
Affichage/Templates/Général/topics_list_box

Recherchez ceci:

Code:

<p>{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR} {topics_list_box.row.GOTO_PAGE_NEW}</p>

Remplacez par:

Code:

<p>{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR} <div class="M14_liked_listbox"><span class="M14_liked_not">Oups aucun résultat!!!</span><img class="M14_liked_listbox_img"src="https://i.servimg.com/u/f20/20/11/87/27/pouce110.png"/><span class="M14_liked_listbox_liked" title="Afficher les j'aimes pour ce sujet">J'aime</span><span class="M14_liked_listbox_num"></span></div><span class="M14_paGin">{topics_list_box.row.GOTO_PAGE_NEW}</span></p>

Pensez à enregistrer puis à valider en cliquant respectivement sur   puis

Vous pouvez changer le texte de l'infobulle au survol du bouton ici:

Code:

title="Afficher les j'aimes pour ce sujet"

Vous pouvez changer le texte en cas ou la recherche ne trouve rien ici:

Code:

<span class="M14_liked_not">Oups aucun résultat!!!</span>

Vous pouvez changer le lien de l'image ici:

Code:

<img class="M14_liked_listbox_img"src="https://i.servimg.com/u/f20/20/11/87/27/pouce110.png"/>

Les dimensions de cette image 13px par 13 px .

Gardez ces dimensions car l'espace est très restreint.

Ensuite une dernière modification dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherchez ceci (ligne 59 environ) :

Code:


 <div class="pagination">
            {PAGINATION}
        </div>


Remplacez par:

Code:



<div class="M14_paginTopIc pagination">
         {PAGINATION}
      </div>



Pensez à enregistrer puis à valider en cliquant respectivement sur   puis

Voilà pour les modifications des templates.



Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutez ceci:

Code:


    /******DEBUT LES LIKES******/
    /*L AFFICHAGE EN CAS OU AUCUN LIKE*/
    .M14_liked_not
    {
background-color: #666;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: none;
font-size: 10px;
height: 20px;
line-height: 20px;
margin-left: -3px;
margin-top: -24px;
padding: 0px 5px;
position: absolute;
      
    }
    /*LE BLOC COMPLET DES LIKES*/
    .M14_liked_listbox
    {
    /*on affiche a gauche*/
    float:left;
    background-color:#F49100;
    border-radius: 3px;
    cursor: pointer;
    margin:1px;
    padding:2px 10px 2px 2px;
    transition: all 0.5s ease-in;
    }
    /*ON DONNE UNE APPARENCE A L IMAGE*/
    .M14_liked_listbox img
    {
    width:13px;
    height:13px;
    position: relative;
    top: 2px;
    }
    /*LE TEXTE J AIME*/
    .M14_liked_listbox_liked
    {
    color:#fff;
    font-size: 10px;
    margin-left:3px;
    }
    /*LES CHIFFRES*/
    .M14_liked_listbox_num
    {
    color:#fff;
    font-size: 10px;
    margin-left:3px;  
    min-width: 15px;
    display: inline-block;
      text-align: center;
    }
    /*ON CHANGE L APPARENCE SI LIKE*/
    .M14_liked_listbox.M14_liked_best
    {
    background:#4CAF50;
    }

    /******FIN LES LIKES******/




Pensez à cliquer sur le bouton


Suivez les commentaires pour vous repérer.

Puis pour finir, le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cochez sur les sous-forums

Déposez ceci:

Code:


$(function(){$('.M14_liked_listbox').each(function(){var num=0;var $this=$(this);var link=$(this).closest('.posts-section').find('a.topictitle[href^="/t"]').attr('href');
var pagin=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]').length;
var paginlink=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]:last').attr('href');
if(pagin===0){$this.click(function(){$(this).unbind();$.get(link , function(data){
num+=$(data).find('p.fa_like_list').find('a[href^="/u"]').length;
if(num){$this.addClass('M14_liked_best').find('.M14_liked_listbox_num').text(num);}
else{$this.find('.M14_liked_listbox_num').html('0');$this.find('.M14_liked_not').fadeIn().delay(800).fadeOut();}});});}});});
$(function(){$('.M14_liked_listbox').each(function(){var $this=$(this);var num=0;var numb=0;
var pagin=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]').length;
var paginlink=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]:last').attr('href');
if(pagin){$this.click(function(){$(this).unbind();var result=0;$.get(paginlink,function(data){
num+=$(data).find('p.fa_like_list').find('a[href^="/u"]').length;
$(data).find('.M14_paginTopIc').find('a[href^="/t"]:not(:eq(1)) ').each(function(){
var link=$(this).attr('href');   $.get(link , function(data){numb+=$(data).find('p.fa_like_list:not(:first)').find('a[href^="/u"]').length;
var result=num+numb;if(result>=1){$this.addClass('M14_liked_best').find('.M14_liked_listbox_num').text(result);}
if(result===0){$this.find('.M14_liked_listbox_num').html('0');$this.find('.M14_liked_not').show();$this.find('.M14_liked_not').delay(800).fadeOut();}});});});});}});});



Pensez à cliquer sur le bouton

Le fait de cliquer sur le bouton évite la surcharge des requêtes sur l'ensemble des sujets.