Thumbnail add comment

Afficher avec un bouton le formulaire d'ajout de commentaires

Sur mobile, ou même sur ordinateur, le formulaire d'ajout de commentaires prend de la place sur un article de blog. EMS Tricks vous montre comment l'afficher au clic d'un bouton !

Beaucoup d'émotion

Ce trick ne vient pas directement d'EMS Tricks mais a été soumis par Thomas ! C'est avec une certaine émotion que nous publions notre première astuce d'utilisateur :'). 

Vous aussi envoyez-nous vos trucs et astuces pour e-monsite et vous les verrez apparaitre sur notre site !

Cette astuce est optimisée pour les versions PRO d'e-monsite.

Avec le formulaire d'e-monsite

Cette astuce utilise du CSS et du JavaScript (librairie jQuey). Rendez-vous sur notre page "Commencer" et "Ressources" pour en savoir plus sur l'utilisation de ces langages.

Voici le code CSS a coller dans les zones prévues :

[data-plugin="comment"] {
    display: none;
}

Voici le code JavaScript a coller dans les zones éditables :

$(document).ready(function() {

if ( $('[data-plugin="comment"]').length > 0 ) {

var addComment = $('[data-plugin="comment"]');
var btn = '<a href="#comment-add" class="btn btn-primary add-comment">Ajouter un commentaire</a>';
    
$('.plugins').append(btn);

$('.add-comment').on( "click", function() {
    $(addComment).show('fast');
    $(this).hide('fast');
    var page = $(this).attr('href'); 
	var speed = 750; 
	$('html, body').animate({ 
		scrollTop: $(page).offset().top - 70 
		}, speed, function onComplete()  {
	}); 
		return false;
});

};
    
});

Avec Disqus

Avec le plugin de commentaires Disqus le procédé reste le même, on cible juste différemment le bloc qui porte un autre nom.

Voici le code CSS :

[data-plugin="comment-disqus"] {
    display: none;
}

Voici le code JavaScript a coller dans les zones éditables :

$(document).ready(function() {

if ( $('[data-plugin="comment-disqus"]').length > 0 ) {

var addComment = $('[data-plugin="comment-disqus"]');
var btn = '<a href="#comments-blog" class="btn btn-primary add-comment">Ajouter un commentaire</a>';
    
$('.plugins').append(btn);

$('.add-comment').on( "click", function() {
    $(addComment).show('fast');
    $(this).hide('fast');
    var page = $(this).attr('href'); 
	var speed = 750; 
	$('html, body').animate({ 
		scrollTop: $(page).offset().top - 70 
		}, speed, function onComplete()  {
	}); 
		return false;
});

};
    
});

Le problème avec Disqus, c'est que les commentaires et l'ajout de commentaire sont dans un seul bloc, le script cache alors la section entière.

Comment ça marche ?

Alors que fait le script ?

Cacher le formulaire d'ajout de commentaire

Le CSS cache, au chargement de la page, le formulaire d'ajout de commentaires.
Ensuite en jQuery on vient ajouter dynamiquement un bouton dans la section "Plugins" de l'article qui agit sur l'état du formulaire : il le passe de caché à visible.
On cache aussi le bouton que l'on vient de créer qui ne sert plus à rien.
Et pour finir, on s'assure que lorsqu'on clique sur le bouton on arrive en haut du formulaire d'ajout de commentaire ! (Facile non ?)

On en veut encore !

Vous aussi faites comme Thomas et envoyez-nous vos tricks ! On les mettra en ligne avec autant d'émotion que celui ci, promis !

css javascript e-monsite commentaire formulaire bouton dynamique

Commentaires

  • Thomas
    • 1. Thomas Le 04/02/2017
    Coucou ems-tricks,

    J'avais soumis un script avec beaucoup moins de facilité d'utilisation (ajout d'un bouton en HTML sur toutes les pages/billets).

    Merci pour la prise en compte de cette soumission d'idée de script et son excellente amélioration.
  • Danièle
    Super ! Ça fonctionne très bien, merci.
  • ems-tricks
    Bonjour Danièle ! Le problème vient du fait que vous n'utilisez pas le thème Smart ! Remplacez dans le JavaScript " var addComment = $('[data-plugin="comment"]'); " par " var addComment = $(".plugin-comment-add"); " et dans le CSS remplacer le " [data-plugin="comment"] { display:none; } " par " .plugin-comment-add { display:none; } " devrait résoudre le problème. Si le problème persiste, envoyez nous un mail via la page contact, ce sera plus simple :)

  • Danièle
    Bonjour,
    J'ai copié le code pour l'ajout de commentaire mais ça ne fonctionne pas chez moi. J'ai le formulaire + en bas le bouton "ajouter un commentaire"
    http://www.chatsnoirs.com/pages/chat-noir/club-chats-noirs-1151-a-1200.html