[PHPBB2]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.
Elle fonctionnera avec les modifications a apporter et à condition que les class natives soient présentes.

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.
Le fait de cliquer sur le bouton évite la surcharge des requêtes sur l'ensemble des sujets.


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 cette ligne:

Code:

<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>

Remplacez par:

Code:

<span class="M14_paGin gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span><br />
<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>

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 cette ligne seulement (ligne 129 environ) :

Code:


<span class="gensmall">{PAGINATION}</span>


Remplacez par:

Code:



<span class="M14_paginTopIc gensmall">{PAGINATION}</span>



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
{
color:#fff;
font-size: 10px;
background-color:#666;
border-radius: 3px;
cursor: pointer;
padding:2px 10px 2px 2px;
display:none;
position: absolute;
height: 16px;
line-height: 16px;
margin-top: -24px;
margin-left: -3px;
  
}
/*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;

}
/*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('td').find('a.topictitle[href^="/"]').attr('href');
var pagin=$(this).closest('td').find('.M14_paGin.gensmall a[href^="/t"]').length;
var paginlink=$(this).closest('td').find('.M14_paGin.gensmall 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').html(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('td').find('.M14_paGin.gensmall a[href^="/t"]').length;
var paginlink=$(this).closest('td').find('.M14_paGin.gensmall 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.gensmall').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

Bravo Phil pour ton formidable travail un grand merci