Tophost

Inserire jQuery Bar rating in EasyComment

google-plus Scritto da . Postato in HTML

Nel precedente articolo abbiamo visto come integrare EasyComment all'interno del tuo sito HTML. Se non lo hai letto, ecco il link all'articolo:

Integare un plugin commenti jQuery in un sito HTML

Ora vediamo come arricchire il sistema di commenti EasyComment con un plugin di valutazione sempre basato sulla libreria jQuery che ci consentirà di renderlo adatto a chi desidera oltre ai commenti dei propri clienti anche un sistema di valutazione integrato e modificabile all'interno del proprio sito.

Non sarà TripAdvisor (così come mi aveva indicato le sue preferenze il cliente), ma sarà comunque efficace e permetterà ai vostri clienti di lasciare la propria valutazione sulla vostra attività direttamente dal vostro sito!

Per prima cosa vediamo come includere le librerie della bar rating all'interno della pagina che ospiterà il sistema di commenti EasyComment:

Inclusione jQuery Bar rating nella pagina

Per riuscire a integrare la bar rating jQuery in easy comment e fare in modo che funzioni in maniera sincrona, (sia nel form che successivamente nei commenti postati) dovrete per prima cosa scaricare il plugin da GitHub.

Una volta scaricato, scompattatelo.

I file javascript (*.js) metteteli nella catella js nella root del vostro sito. Il(i) file css all'interno della cartella css (ovviamente se le cartelle non esistono, createle prima di caricare via FTP i file nel vostro spazio web).

Ora aprite con il vostro editor di testi la o le pagine sul quale comparirà EasyComment. all'intreno del tag <head></head>, inserite le seguenti righe di codice per includere i file css indispensabili alla corretta visualizzazione del plugin:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/fontawesome-stars.css">

Il plugin fa uso dei Font Awesome. Vengono dunque inclusi con le precedenti righe di codice. Poi a seconda dello stile da voi prescelto, viene aggiunto il foglio di stile corrispondente. nel mio caso fontawesome-stars.css.

Più sotto, nel codice HTML dove avete inserito il codice di richiamo alla libreria Javascript di EasyComment, aggiungete anche le seguenti righe di codice che serviranno a richiamare ed 'attivare' la libreria bar rating:

<script src="/js/jquery.barrating.js"></script>
<script type="text/javascript">
$(function() {
    $('#rating').barrating({
       theme: 'fontawesome-stars'
     });
     $('#rating-reply').barrating({
        theme: 'fontawesome-stars'
     });
});
</script>

Anche questa libreria fa uso della libreria jQuery. Per questo motivo, anche se nella pagina di riferimento, nel breve tutorial vi dice di inserire anche la riga di inclusione per le jQuery, ricordatevi sempre che in generale vanno richiamate una volta sola all'interno della pagina.

Se dunque le avete dichiarate in un primo momento per EasyComment (o altra libreria se la state usando singolarmente) non includete le jQuery di nuovo. Questo vi eviterà gravi mal di testa nel cercare di risolvere gli eventuali conflitti. Ricordatevi che questo è vero soprattutto se includete due librerie jQuery che non hanno la stessa versione. 

Modifica EasyComment e integrazione sistema di valutazione

Ora, ciò che dobbiamo fare è modificare EasyComment per l'inclusione del sistema di valutazione sia nello script PHP che nei file Javascript.

Ci serviamo sempre del nostro editor di testi. Apriamo dunque il file ec-comment.php. La funzione add_comment cambierà così (in rosso le modifiche):

function add_comment($moderator_email){

$caller = strtolower($_POST["url"]); //$_SERVER['HTTP_REFERER'];
$filename = md5($caller);
$abs_comment_file = realpath('.') . '/' . $filename . '.xml';
$date_value = time();
$comment_id = $date_value . '-' . rand(1,100000000);
$author_value = processText($_POST["name"]);
$rating = intval(processText($_POST["rating"]));
$subject_value = trim(processText($_POST["subject"]));
$msg_value = processText($_POST["message"]);
$email = processText($_POST["email"]);
$site = processText($_POST["site"]);
$title = processText($_POST["title"]);
$parent_id = processText($_POST["id"]);
$dom_id = processText($_POST["domid"]);
$moderate = processText($_POST["moderate"]); // 0 No moderate, 1: waiting for moderate 2: trash 3: spamn 4: approved
$max_reply = intval(processText($_POST["max"]));
$secured = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : "";
$protocol = strleft(strtolower($_SERVER["SERVER_PROTOCOL"]), "/") . $secured;
$ec_path = $protocol . '://' . $_SERVER['HTTP_HOST'] . processText($_POST["path"]);

if ( empty($parent_id) ){
$parent_id = null;
}

$ip = $_SERVER["REMOTE_ADDR"]; $ret = addComment($abs_comment_file,$caller,$title,$dom_id,$comment_id,$date_value,$author_value,$rating,$subject_value,$email,$site,$msg_value,$ip,$moderate,$parent_id,$max_reply);$msg_value = str_replace(array("\r","\n"),"<br />", $msg_value);

if($rating){

$ratinghtml = '<script type="text/javascript">
$(function() {
$("#rating-'.$comment_id.'").barrating({
theme: "fontawesome-stars",
readonly: true
});
});
</script>';
$ratinghtml .= '<select id="rating-'.$comment_id.'" name="rating" disabled style="float:right;">';
$ratinghtml .= (($rating == 1) ? '<option selected="selected" >1</option>' : '<option>1</option>');
$ratinghtml .= (($rating == 2) ? '<option selected="selected" >2</option>' : '<option>2</option>');
$ratinghtml .= (($rating == 3) ? '<option selected="selected" >3</option>' : '<option>3</option>');
$ratinghtml .= (($rating == 4) ? '<option selected="selected" >4</option>' : '<option>4</option>');
$ratinghtml .= (($rating == 5) ? '<option selected="selected" >5</option>' : '<option>5</option>');
$ratinghtml .= '</select>';
}else{
$ratinghtml = '';
}
echo json_encode(
array(
"id" => $comment_id,
"comment" => '<li class="ec-comment" id="' . $comment_id . '">'.
' <div class="avatar"></div>'.
' <span class="user-name author">' . $author_value . '</span> <br/>' .
' <span class="comment-html">'. $ratinghtml .
(empty($subject_value) ? '' : ' <strong>' . $subject_value . '</strong><br /><br />') .
$msg_value .
' </span><br/>'.
' <span class="comment-time">' . ago(time() - $date_value*1) . '</span><br/>'.
(($ret)?' <button name="reply" id="reply_' . $comment_id . '">Rispondi</button>':"") .
'</li>')
);

// send email to moderator
if ( $moderate == "1" ){
$body = 'Un nuovo commento è in attesa di approvazione:<br /><br />'.
'Autore:' . $author_value . '(IP: ' . $ip .')<br/>'.
'Valutazione:' . $rating . '<br/>'.
'Email:' . $email . '<br/>'.
'URL Sito web:' . $site . '<br/>'.
'Oggetto:' . $subject_value . '<br/>'.
'Whois:<a href="http://whois.arin.net/rest/ip/' . $ip .'" target="_blank">http://whois.arin.net/rest/ip/' . $ip .'</a><br/>'.
'Commento:<br/>'.
'<blockquote>' . $msg_value . '</blockquote><br/>'.
'Per moderare il commento, fai click <a href="'. $ec_path .'">'. $ec_path .'</a><br/>'.
'<br/>'.
'Grazie per aver scelto Easy Comment<br/>';
sendEmail($moderator_email,$body);
}
}

Ora EasyComment, nell'invio del commento riceverà anche il valore di valutazione dalla variabile POST 'rating'. Per questo la funzione responsabile di elaborare i dati in arrivo ha una variabile omonima che memorizza il dato prima di elaborarlo.

Nella funzione getComment, in testa aggiungiamo la variabile:

$rating = intval($comment->getAttribute("rating"));

I vari commenti, a seconda se sia abilitata la funzione di valutazione o no, potranno avere all'interno un valore che rappresenta il voto dell'utente. Questa variabile serve appunto per contenere questo valore per una successiva elaborazione che servirà a preparare il codice HTML che mostrerà la valutazione sotto forma di stelle:

Più sotto dopo la dichiarazione e inizializzazione delle varie variabili, incollate il codice:

if($rating){
$ratinghtml = '<script type="text/javascript">
$(function() {
$("#rating-'.$id.'").barrating({
theme: "fontawesome-stars",
readonly: true
});
});
</script>';
$ratinghtml .= '<select id="rating-'.$id.'" name="rating" disabled style="float:right;">';
$ratinghtml .= (($rating == 1) ? '<option selected="selected" >1</option>' : '<option>1</option>');
$ratinghtml .= (($rating == 2) ? '<option selected="selected" >2</option>' : '<option>2</option>');
$ratinghtml .= (($rating == 3) ? '<option selected="selected" >3</option>' : '<option>3</option>');
$ratinghtml .= (($rating == 4) ? '<option selected="selected" >4</option>' : '<option>4</option>');
$ratinghtml .= (($rating == 5) ? '<option selected="selected" >5</option>' : '<option>5</option>');
$ratinghtml .= '</select>';
}else{
$ratinghtml = '';
}

Questo piccolo snippet, serve a costruire la barra di valutazione per ogni commento rappresentato dalla variabile $id che lo identifica univocamente. Quindi, in automatico verrà generato per ogni commento incluso nella pagina.

Modificate anche il valore che viene assegnato poche righe più sotto alla variabile $html. essa deve includere il codice di valutazione:

$html = '<li class="ec-comment" id="' . $id . '">' . $gravatarhtml .
' <div class="avatar" id="avatar-' . $id . '"></div>'.
' <span class="user-name author">' . $author . '</span> <br />' .
' <span class="comment-html">'. $ratinghtml .
(empty($subject) ? '' : ' <strong>' . $subject . '</strong><br /><br />') .
$msg .
' </span><br />'.
' <span class="comment-time">' . $time . '</span><br />';

Il file PHP ora è pronto per gestire i nuovi dati. Modifichiamo anche il file jquery.easycomment.js:

Il file js, è responsabile dell'attuazione dinamica delle azioni dell'utente sfruttando ajax e le jQuery. In esso vi è il richiamo alle funzioni PHP che abbiamo appena modificato.

La prima funzione che andremo a modificare, è quella di inizializzazione della libreria. Questo perché vi aggiungiamo una variabile hasRating responsabile di passare il dato di inizalizzazione che comunicherà a EasyComment l'uso o meno del sistema di valutazione. Infatti, ho incluso quest'ultimo con la possibilità di escluderlo dalla visualizzazione semplicemente aggiungendo una riga al codice di inizializzazione dello script.

Il codice di attivazione della libreria diventerà dunque così:

<script>
//Inizializzo EasyComment
     jQuery(document).ready(function(){
         $("#comments-container").EasyComment({
hasRating:true,
moderate:true,
hasEmail: true
});
     });
</script>

Fate caso che in questo codice, stiamo configurando EasyComment perché consenta il sistema di moderazione, includa il sistema di valutazione (che stiamo realizzando) e che richieda l'indirizzo email ai visitatori che lasceranno un commento sul sito.

Ma veniamo alla funzione init. Ecco il codice:

EasyComment.prototype.init = function(container,path,moderate,nHeight,bHasRating,bHasSubject, bEmail, bSite, nMaxReply,countPerPage){
this.moderate = moderate ? 1 : 0;
this.maxReply = nMaxReply;
this.currentPage = 0;
this.countPerPage = countPerPage; // 0: no paging

this.path = path;

if ( container ){
this.container = container;
}else{
$("body").append(this.container = $("<div id='ec-page'></div>")[0]);
}
if ( nHeight !== null ){
if ( nHeight === "" || isNaN(nHeight) ){
$(this.container).css("height","auto");
}else{
$(this.container).css("height",nHeight + "px");
}
}
this.hasRating = (bHasRating === true)?true:false;
this.hasSubject = (bHasSubject === true)?true:false;
this.hasEmail = (bEmail === true)?true:false;
this.hasSite = (bSite === true)?true:false;var _this = this;
$(this.container).find("button[name=reply]").live("click",function(){
var id = $(this).attr("id").split("_")[1];
$(_this.replyFormContainer).find("button[name=submit_reply]")
.data("reply_id",id);

var pos = $(this).offset(),h = $(this).outerHeight();
var left = pos.left, top = pos.top + h;
_this.showReplyForm(left,top);
});

this.addCmtForm();
this.addReplyForm();
var w = $(this.commentForm).width();
if ( w > 500 ){
$(this.commentForm).width("98%");
//$(this.replyForm).width("90%");
}$(this.container).addClass("ec-comment-pane")
.append(
this.totalComment = $("<div class='ec-total'></div>").html("Sii il primo a lasciare un commento!")[0]
);
if ( this.countPerPage > 0 ){
$(this.container).append(this.paging = $("<div class='ec-paging'></div>")[0]);
}

$(this.container).append(
this.commentUL = $("<ul></ul>").addClass("ec-comment-list")[0]
);
this.loadComment(0);
};

Come potete notare, sia nell'intestazione che nel corpo della funzione si fa riferimento a una variabile booleana che prende il nome di hasRating. Lo scopo è appunto permettere all'utente di decidere se usare o no la bar rating.

La prossima funzione ad essere modificata è la funzione getFormFields, responsabile della realizzazione dinamica dei campi del form di immissione dei commenti:

EasyComment.prototype._getFormFields = function(){
return '<fieldset>'+
'<legend>Nome:<span title="Required field">*</span></legend>'+
'<input type="text" style="width:95%" value="" name="name">'+
'</fieldset>'+

(( this.hasRating )?(
'<fieldset>'+
'<legend>Valutazione:<span title="Required field">*</span></legend>'+
'<select id="rating" name="rating">'+
'<option value="1">1</option>'+
'<option value="2">2</option>'+
'<option value="3">3</option>'+
'<option value="4">4</option>'+
'<option value="5">5</option>'+
'</select>'+
'</fieldset>'):"")+

(( this.hasSubject )?(
'<fieldset>'+
'<legend><span></span>Oggetto:</legend>'+
'<input type="text" style="width:95%" value="" name="subject">'+
'</fieldset>'):"")+(( this.hasEmail )?(
'<fieldset>'+
'<legend><span></span>Email:</legend>'+
'<input type="email" style="width:95%" value="" name="email">'+
'</fieldset>'):"")+(( this.hasSite )?(
'<fieldset>'+
'<legend><span></span>Sito web:</legend>'+
'<input type="url" style="width:95%" value="" name="site">'+
'</fieldset>'):"")+

'<fieldset>'+
'<legend>Commento:<span title="Required field">*</span></legend>'+
'<div style="vertical-align:top;">'+
'<textarea style="width:100%;height:70px;" name="message" type="text"></textarea>'+
'</div>'+
'</fieldset>';
};

Vedete come il secondo campo fa sempre rifermimento alla variabile hasRating. Viene incluso quindi il codice di integrazione della bara rating, così come dettato dal tutorial sul sito di riferimento. Questa funzione è importante anche perché verrà richiamata più volte all'interno del codice Javascript di questo file, anche per la form generata per rispondere ai singoli commenti (link 'rispondi' o 'reply').

Altra funzione che sarà editata è la funzione submitMessage:

EasyComment.prototype.submitMessage = function(form,bReply,parent_id){
var data = {
flag : "1",
domid : $(this.container).attr("id"),
title : document.title,
id : bReply ? parent_id : "",
moderate : this.moderate,
max : this.maxReply,
path : this.path,
url : this.getPageURL(),
name : $.trim($(form).find("input[name=name]").val()),
rating : (this.hasRating)?$.trim($(form).find("select[id=rating]").val()):"",
subject : (this.hasSubject)?$.trim($(form).find("input[name=subject]").val()):"",
email : (this.hasEmail)?$.trim($(form).find("input[name=email]").val()):"",
site : (this.hasSite)?$.trim($(form).find("input[name=site]").val()):"",
message : $.trim($(form).find("textarea[name=message]").val())
};

if ( data.name === "" ){
$(form).find("input[name=name]").focus();
$(form).find("input[name=name]").css("border", "2px solid red");
return;
}
if ( data.message === "" ){
$(form).find("textarea[name=message]").focus();
$(form).find("textarea[name=message]").css("border", "2px solid red");
return;
}
var _this = this;
$.ajax({
url:this.path + "ec-comment.php",
data:data,
dataType:"json",
type:"POST",
cache:false,
success:function(data){
if ( data ){
_this._renderComment([data.comment],parent_id);
var tc = $(_this.totalComment).data('total-comment');
if ( parent_id === "" ){
tc ++;
}else{
_this.hideReplyForm();
}
_this.showTotalComment(tc);
}
},
error:function(s){
}
});
//azzero i campi dopo il submit
$(form).find("input[name=name]").val("");
$(form).find("input[name=email]").val("");
$(form).find("textarea[name=message]").val("");
};

Chiaramente, all'invio del form, deve'essere inviato anche il valore di valutazione per la memorizzazione dello stesso nei vari commenti.

Anche l'ultima funzione va modificata. E' quella responsabile di richiamare la funzione di inizializzazione con i parametri da noi passati nel codice di init:

(function($){
$.fn.EasyComment = function(options){
var settings = {
path : "/easy-comment/",
maxReply : 5,
moderate : false,
height : null,
hasRating : false,
hasSubject : false,
hasEmail : false,
hasSite : false,
countPerPage : 10
};
if ( options ) {
$.extend( settings, options );
}
addStyle(settings.path);
return this.each(function(){
var cp = new EasyComment()
.init(
this,
settings.path,
settings.moderate,
settings.height,
settings.hasRating,
settings.hasSubject,
settings.hasEmail,
settings.hasSite,
settings.maxReply,
settings.countPerPage
);
});
function addStyle(path){
if ( $.fn.EasyComment.StyleReady ){
return;
}
$.fn.EasyComment.StyleReady = true;
var arrStyle = [
"<style type='text/css'>",
".ec-comment-pane{position:relative; padding-left:20px; margin:5px 0; overflow:auto}",
".ec-comment-pane div.ec-total{font:1.3em Georgia; height:24px; line-height:24px; width:98%; margin:auto;}",
".ec-comment-pane div.ec-paging{height:30px; line-height:30px;text-align:right; width:98%; margin:auto;}",
".ec-comment-pane div.ec-paging>button{font:13px arial;height:30px; line-height:30px;margin-right:10px;}",
".ec-comment-pane ul.ec-comment-list{position:relative; font-family:'Lucida Grande',sans-serif; font-size:14px; line-height:16px; list-style-type:none; padding:0px; background-color:#FFF; border:0px solid #14a1cc; border-radius:12px; overflow:auto; margin-bottom:15px;}",
".ec-comment-pane ul.ec-comment-list li.ec-comment{position:relative; min-height:48px; min-width:48px; padding:4px 4px 12px 56px; margin-bottom:8px; border-radius:4px; font-size:9pt arial}",
".ec-comment-pane ul.ec-comment-list li.ec-comment:last-child{border:none; padding-bottom:0px}",
".ec-comment-pane ul.ec-comment-list li.ec-comment button{font:11px arial}",
".ec-comment-pane ul.ec-comment-list li.ec-comment a, ",
".ec-comment-pane ul.ec-comment-list li.ec-comment .author{font-weight:bold; color:#2276bb; text-decoration:none}",
".ec-comment-pane ul.ec-comment-list li.ec-comment a:hover{text-decoration:underline}",
".ec-comment-pane ul.ec-comment-list li.ec-comment div.avatar{position:absolute; top:0px; left:0px; width:48px; height:48px; border:none; margin-top:6px; margin-left:2px; border-radius:4px; text-overflow:ellipsis; background:url(" + path + "ec-comment.png)}",
".ec-comment-pane ul.ec-comment-list li.ec-comment span.user-name{font-weight:bold; margin-right:0.5em; text-overflow:ellipsis}",
".ec-comment-pane ul.ec-comment-list li.ec-comment span.comment-time{font-size:11px; color:#999; line-height:16px; text-overflow:ellipsis}",
".ec-comment-form{font:1em Georgia; margin-bottom: 15px;}",
".ec-comment-form form{margin:auto; padding:0;}",
".ec-comment-form form input, .ec-comment-form form textarea, .ec-comment-form form button{font:1em arial}",
".ec-comment-form fieldset{ background:-webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#dddddd)); background:-moz-linear-gradient(#ffffff,#dddddd); background:linear-gradient(#ffffff,#dddddd); filter :progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#dddddd)}",
".ec-comment-form fieldset legend{ background:-webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#dddddd)); background:-moz-linear-gradient(#ffffff,#dddddd); background:linear-gradient(#ffffff,#dddddd); filter :progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#dddddd); padding:0px 5px; border-radius:6px; border:1px solid #ccc}",
".ec-comment-form .title{ color:#444; line-height:30px}",
".ec-comment-form fieldset{ border-radius:6px}",
".ec-comment-form fieldset fieldset{ border:none; background:none; filter:none}",
".ec-comment-form fieldset fieldset legend{ background:none; border:none; filter:none; color:rgb(103, 107, 113);}",
".ec-comment-form fieldset fieldset input{ margin-left:10px;}",
"span.comment-html{color:rgb(103, 107, 113);}",
".ec-comment-list{width: 98%;margin: auto;}",
".ec-comment-reply-form{position:absolute; left:0px; top:0px; height:400px}",
".ec-comment-reply-form div.close_button{ position:absolute; right:-18px; top:-18px; width:36px; height:36px; background:url(" + path + "ec-close_box.png) no-repeat; cursor:pointer}",
"</style>"
];
$(arrStyle.join("")).appendTo("head");
}
};
}

Si vede come hasRating, così come altri valori, vengono inizializzati a false (non presenti) di default. Se verranno poi invece inizializzati nel codice di init, questi verranno visualizzati nella pagina HTML dove si includerà Easy Comment.

Il codice css integrato nella funzione, è stato modificato per essere tra l'altro adatto alla visualizzazione su dispositivi mobili. Tuttavia, a ognuno il suo stile... quindi prendetelo come linea guida e modificatelo a vostro piacimento.

Fatto non resta che vedere il risultato di tanta fatica:

jquery bar rating in easycomment

Nel prossimo articolo vedremo come aggiungere Gravatar a EasyComment e un semplice sistema di autenticazione che risponda al link 'Modera' che si può apprezzare dall'immagine qui sopra.

Sperando possa esservi utile, se vi è piaciuto l'articolo non dimenticatevi di condividerlo! Grazie... laughing


Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati.