[PHPBB3] 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 cette variable:

Code:

{topics_list_box.row.GOTO_PAGE_NEW}

Remplacez par:

Code:

<span class="M14_paGin">{topics_list_box.row.GOTO_PAGE_NEW}</span>

Recherchez ceci:

Code:


<span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>


Remplacez par:

Code:


<span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong><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></span>


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 111 environ) :

Code:


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


Remplacez par:

Code:



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



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

Hello Philippe,

Extra!
Aussitôt vu aussitôt adopté. Merci l'ami.

Mais quelques petits soucis d'adaptation.
Je vais donc de ce pas dans l'entraide  

Message envoyé via la réponse rapide par: @photoclic