Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

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

2 participants

Aller en bas

Icône par defaut [PHPBB3] Afficher le nombre LIKES dans la liste des sujets

Message par Milouze14 Lun 18 Oct 2021 - 19:31

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 ok .


[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:
<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   Enregistr puis Ajout

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   Enregistr puis Ajout

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 [PHPBB3] Afficher le nombre LIKES dans la liste des sujets Sans_t10


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.




Dernière édition par Milouze14 le Mar 30 Nov 2021 - 19:14, édité 6 fois
Milouze14
Milouze14
Fondateur



https://www.milouze14.com

photoclic et phil85 aiment ce message

Revenir en haut Aller en bas

Icône par defaut Re: [PHPBB3] Afficher le nombre LIKES dans la liste des sujets

Message par photoclic Lun 18 Oct 2021 - 23:18

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
avatar
photoclic
Milouzien



https://photoclic.forum-pro.fr/

Milouze14 et phil85 aiment ce message

Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum