jQuery Star Rating con Ajax

Name: jQuery Star Rating con Ajax
Brand: Jose Aguilar
SKU: joseaguilarblog-7289
Availability: InStock
Rating: 5 (66 reviews)

Hace bien poco publiqué una entrada que permitía enviar una calificación basada en 5 estrellas usando PHP.

Puedes ver más información en jQuery Star Rating con PHP. Es un código muy útil que utilizo de la misma forma hace varios años.

El caso es que me comprometí a hacer un tutorial para conseguir el mismo efecto pero utilizando la tecnología Ajax.

Hoy en día, el sistema de clasificaciones más utilizado en Internet es sin duda alguna, las estrellas de clasificación o también conocido técnicamente como star rating, habitualmente acompañada de testimonios o comentarios del usuario o cliente. Por este motivo, no pueden faltar en este blog.

En este artículo vas a averiguar como convertir unos campos de tipo «radio» en estrellas de valoración para poder seleccionar y enviar sin recargar la página. Los datos son recibidos por el servidor con PHP y la tecnología Ajax para su procesamiento.

En la cabecera de la página o dentro de la etiqueta <head> agrega las librerías y scripts necesarios:

Source code

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/jquery.rating.pack.js"></script>
<script>
$(document).ready(function(){
    $('input.star').rating();
});
</script>

Para hacer funcionar las estrellas de valoración nos apoyamos en la librería jQuery v2.2.4 y el plugin jQuery Star Rating v2.0.

Creamos una llamada simple al plugin star rating y él mismo se encarga de convertir todos los inputs con class=»star» que tengamos en la página en estrellas de valoración.

También en la cabecera agregaremos el código que procesa los datos:

Source code

<script type="text/javascript">
$(document).ready(function() {
    $('button#submitRatingStar').on('click', function() {
        $.ajax({
            type: "POST",
            url: "process.php",
            data: {rate: $('input[name="rate"]').val()},
            success: function(response) {
                $('.alert-success').fadeIn(2000);
                $('#rate').text(response);
            }
        });
        return false;
    });              
});    
</script>

Estamos esperando a que el botón que tenemos en la página para enviar la calificación se pulse para ejecutar el archivo process.php con el objetivo de guardar o procesar la calificación.

El código anterior también puede ser agregado antes de la etiqueta de cierre del cuerpo de la página, es decir, antes de la etiqueta de cierre </body>.

El archivo process.php del ejemplo en funcionamiento es muy simple. Tan solo contiene el siguiente código:

Source code

<?php
//procecar calificacion
$rate = $_POST['rate'];
sleep(1);
echo $rate;
?>

Únicamente recibimos la calificación, dormimos el proceso 1 segundo y enviamos el valor de vuelta al Ajax.

Este código puede ser ampliado para hacer lo que más desees. Guardar la calificación en la base de datos, en un archivo o enviarla por correo electrónico.

En el cuerpo de la página o dentro del <body> puedes agregar algo como lo que sigue:

Source code

<form action="#" method="post">
    <div class="star_content">
        <input name="rate" value="1" type="radio" class="star"/> 
        <input name="rate" value="2" type="radio" class="star"/> 
        <input name="rate" value="3" type="radio" class="star"/> 
        <input name="rate" value="4" type="radio" class="star" checked="checked"/> 
        <input name="rate" value="5" type="radio" class="star"/>
    </div>
    <button type="submit" name="submitRatingStar" id="submitRatingStar" class="btn btn-primary btn-sm">Enviar</button>
</form>

El código anterior no es más que un formulario que contiene los campos de tipo «radio» que son convertidos en estrellas gracias al plugin jQuery Star Rating y un botón para enviarlo.

Ahora solo te queda agregar un poco de código CSS en tu hoja de estilos:

Source code

.star_content {
    margin-bottom: 5px;
    float: left;
    width: 100%;
}
 
.star {
    overflow: hidden;
    float: left;
    margin: 0 1px 0 0;
    width: 16px;
    height: 18px;
    cursor: pointer;
}
 
.star a {
    display: block;
    width: 100%;
    background-position: 0 0;
}
 
.star {
    position: relative;
    top: -1px;
    float: left;
    width: 14px;
    overflow: hidden;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
}
 
.star a {
    display: block;
    position: absolute;
    text-indent: -5000px;
}
 
div.star:after {
    content: "\f006";
    font-family: "FontAwesome";
    display: inline-block;
    color: #777676;
}
 
div.star.star_on {
    display: block;
}
 
div.star.star_on:after {
    content: "\f005";
    font-family: "FontAwesome";
    display: inline-block;
    color: #ef8743;
}
 
div.star.star_hover:after {
    content: "\f005";
    font-family: "FontAwesome";
    display: inline-block;
    color: #ef8743;
}

En este momento deseo destacar que las estrellas que se visualizan en este ejemplo no son imágenes. Debes incorporar la fuente Font Awesome en tu sitio Web para que se muestre correctamente. De esta forma, el rendimiento es mucho mejor.

Siempre es interesante potenciar la interacción del usuario en una página web o tienda Online. Las estrellas de valoración son atractivas y todo el mundo que navega por Internet conoce su significado. Dan credibilidad y confianza sobre el producto o servicio que se está vendiendo si en la misma página hay valoraciones y comentarios positivos. ¿A qué esperar para incorporar este sistema de calificaciones en tu página Web?

Ver demo Descargar