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

Fondateur

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

Au clic et si le nombre de LIKES est positif:

[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 2130

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

[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 1no10

[PHPBB3] Afficher le nombre LIKES dans la liste des sujets 2no10

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:: {topics_list_box.row.GOTO_PAGE_NEW}

Recherchez ceci:

Code:: {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}

Remplacez par:

Code:: {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR} 
<div class="M14_liked_listbox">Oups aucun résultat!!!<img class="M14_liked_listbox_img"src="https://i.servimg.com/u/f20/20/11/87/27/pouce110.png"/>J'aime</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:: Oups aucun résultat!!!

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:: {PAGINATION}

Remplacez par:

Code:: {PAGINATION}

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 Valid

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

Milouzien

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 clin oeil

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

» [PHPBB3] Afficher une infobulle dans les cellules des forums et la liste des sujets
» [PHPBB3] Afficher les membres en ligne (version graphique) sur l'index et dans la liste des sujets
» [PHPBB3] Afficher le nombre d'Annonce & Note, sujets et sujets verrouillés façon Punbb
» [PHPBB3] Afficher les forums de la catégorie dans la liste des sujets
» [PHPBB3] Afficher la description du forum dans la liste des sujets