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

.
![[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 1344](https://i.servimg.com/u/f20/20/11/87/27/1344.png)
Au clic et si le nombre de LIKES est positif:
![[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 2130](https://i.servimg.com/u/f20/20/11/87/27/2130.png)
Au clic et si le nombre de LIKES est négatif:
![[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 1no10](https://i.servimg.com/u/f20/20/11/87/27/1no10.png)
![[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 2no10](https://i.servimg.com/u/f20/20/11/87/27/2no10.png)
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_boxRecherchez 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_bodyRecherchez 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 styleAjoutez 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 ![[PHPBB3] Afficher le nombre LIKES dans la liste des sujets Sans_t10](https://i.servimg.com/u/f87/11/26/21/37/sans_t10.png)
Suivez les commentaires pour vous repérer.
Puis pour finir, le script:
Modules/
HTML&JAVASCRIPT/
Gestion des codes Javascript/
Créer un nouveau JavascriptMettre un titre explicite.
Cochez sur les sous-forumsDé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.