Aruba.it - Registrazione dominio .it da € 3.99 + iva/anno
www.

Virtuemart - Bug rating's stars

google-plus Scritto da . Postato in Joomla!

Recensioni prodotto in Virtuemart

In Virtuemart, famosissimo e popolare sistema di e-commerce per Joomla!, grazie a una funzionalità integrata nel componente, l'utente registrato entrando nella view productdetails (quella che permette di visualizzare i dettagli del prodotto) può postare una recensione con tanto di votazione a 5 stelle.
Ovviamente, Virtuemart mostra questo se abilitato a farlo da configurazione a backend. Il sistema di votazione a stelle, consente di effettuare la votazione attraverso uno strumento dinamico che fa ovvio uso di Javascript e in special modo del framework jQuery.
Le 5 stelle che si vedono sotto la scritta "invia recensione" infatti si animano al passaggio del mouse, in teoria permettendoci di segnalare al sistema la nostra valutazione.

Per abilitare la funzionalità recensioni è semplice... Da backend, andate su:
Componenti -> Virtumart ->Configurazione -> Configurazione -> Vetrina -> Recensione utente/Sistema di valutazione.

Bug del sistema rating's star

Ora un problema che io ho dovuto affrontare molto di frequente con questo sistema nativo (senza template di terzi parti) di Virtuemart, è che al passaggio del mouse le stelle diventano "mille", arrivando e oltrepassando il lato destro dello schermo (in immagine).

stelle-voti-virtuemart

La cosa particolare di questo meccanismo è che il codice divide quest'immagine e dunque il voto in ventiquattresimi, e benché all'apparenza il codice risulta semplice, anche la modifica di quest'ultimo porta scarsi risultati.

Nel tentativo di capire cos'é che causa l'errore, usando la console per gli errori di FireFox, ho notato che dava un errore sulla variabile difRatio responsabile di contenere la "dimensione" della singola stella. L'errore era undeclared variable.

Se infatti si osserva nel codice la variabile difRatio indispensabile per il corretto funzionamento del 'meccanismo', non è dichiarata da nessuna parte!

jQuery(function($) {
    var steps = " . $maxrating . ";
    var parentPos= $('.write-reviews .ratingbox').position();
    var boxWidth = $('.write-reviews .ratingbox').width();// nbr of total pixels
    var starSize = (boxWidth/steps);
    var ratingboxPos= $('.write-reviews .ratingbox').offset();
    $('.write-reviews .ratingbox').mousemove( function(e){

        var span = $(this).children();
        var dif = e.pageX-ratingboxPos.left; // nbr of pixels
        difRatio = Math.floor(dif/boxWidth* steps )+1; //step
        span.width(difRatio*starSize);
        //Controllo per bug 'mille stelle'
        if((difRatio*starSize) <= (" . $maxrating . "*starSize))$('#vote').val(difRatio);
        //console.log('note = ', difRatio);
    });
});

Soluzione al bug

A questo punto, correggiamo il codice come segue:

        var difRatio = Math.floor(dif/boxWidth* steps )+1; //step

Dalle prove da me effettuate su diverse installazioni di Virtuemart, questa soluzione ha risolto definitivamente il problema del bug rating's star di Virtuemart.

Ecco come compare ora: 

virtumart-stars-ok 

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

Commenti   

Daniele Gagliardi
0 #3 Daniele Gagliardi 2015-12-19 14:14
Citazione Jerry:
Ciao, complimenti per l'articolo, io ho un problema simile, non si vedono le stelline quando si deve inserire la recensione, vorrei provare con la tua soluzione, in quale file trovo il codice da modi[censored]re?
Grazie mille

Ciao Jerry, grazie!!! Il file interessato, è /components/com_virtuemart/views/productdetails/tm pl/default_reviews.php
Citazione
Jerry
0 #2 Jerry 2015-12-14 17:18
Ciao, complimenti per l'articolo, io ho un problema simile, non si vedono le stelline quando si deve inserire la recensione, vorrei provare con la tua soluzione, in quale file trovo il codice da modi[censored]re?
Grazie mille
Citazione
Donette
0 #1 Donette 2015-02-27 08:14
Hi there mates, how is everything, and what you want to say
regarding this paragraph, in my view its actually remarkable for me.
Citazione

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. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: