Skip to main content

Como implementar Star Rating en Symfony con Jquery

Que necesitas:

El resultado final sera algo como esto:

Para implementar nuestro sistema de star rating necesitaremos realizar las siguientes modificaciones:
  • Modificar la forma de nuestro modelo que tendra el star rating activado y cambiar el campo "stars" por un hidden field (dentro de /lib/forms ):

$this->setWidgets(array(
      ...
      $'stars'      => new sfWidgetFormInputHidden(),
      ...
    ));


  •  Modificar el template del formulario (_form.php en el directorio de templates del modelo) y definir en el template manualmente los radio inputs que seran convertidos en estrellas por el plugin de star rating, si defines 5 inputs, tendras 5 estrellas (no olvides mostrar los hidden fields con $form->renderHiddenFields() )
<input name="review[stars]" type="radio" valuse="1" class="star"/>
<input name="review[stars]" type="radio" valuse="2" class="star"/>
<input name="review[stars]" type="radio" value="3" class="star"/>
<input name="review[stars]" type="radio" value="4" class="star"/>
<input name="review[stars]" type="radio" value="5" class="star"/>

Nota que el input name es igual al nombre definido para el formulario (review) y el campo que tendra el valor del rating [stars], que vendra siendo el mismo que el campo hidden que definimos en la forma.
  • Activando Star Rating: Agrega el Javascript del plugin  y su codigo CSS necesario en review/config/view.yml:
newSuccess:
 stylesheets: [ jquery.rating.css ]
 javascripts: [ jquery.rating.js ]

Solo falta inicializar el plugin en el template, para esto crearemos un pequeño template en javascript (_js_stars.php) dentro de review/templates con lo siguiente:

$(function(){ 
 $('#review: radio.star').rating(); 
});

Teniendo listo nuestro archivo de inicializacion lo mandamos a llamar en el template con un partial:
<?php include_partial('js_stars') ?>

Listo, al entrar a tu formulario tendras tu star rating activado, al hacer click en las estrellas automaticamente se asignara su valor (1-5) al campo de review[stars] al guardar el formulario.
  • Visualizando el star rating. Agregamos los javascripts y el CSS del plugin al template y crearemos una pequeña forma con el mismo numero de inputs (puedes usar un for):
     <div class="Clear">
     <form id="review">
<?php for($i=1; $i<6; $i++ ) : ?>
<input class="rating" type="radio" name="rating" disabled="disabled" value="<?php echo $i ?>"
<?php if ($i == $review->getStars() ) {
     echo 'checked="checked"';
     } ?>>
<?php endfor ?>
</div>

El resultado lo puedes ver aqui: demo

Comments

Popular posts from this blog

Queretaro Sucks...

Acabo de llegar del antro, para ser exactos del cuarto antro de la noche, la razon: estan de hueva los antros en queretaro:

11:00 pm
Primero: Fuimos al "Tantra", pues supuestamente iba a estar un DJ reconocido y que a chuchita la bolsearon y a la hora de la hora... de hueva.

12:00 pm
Segundo: Seguimos en la misma calle (Constituyentes), y fuimos a donde dizque tocaba un grupo de rock: Oh Desilucion!, entramos al "Purgatorio" y para variar estaban tocando a moderatto y a belinda.. so.. lets get the fuck out of here...

1:00 am
Tercer: Nos lanzamos al centro historico esperando enconcontrar un antro con dignidad, llegamos a uno donde supuestamente si tocan rock.. y .. 2-2, por que ni a 2-3 llegaron, cuando despues de 1 hora toco el grupo, empezo con timbiriche y para variar la siguiente rola fue de... adivinaron: moderatto y la perra de belinda again!... bueno al menos ahi si pusieron algo de caifanes, the doors y uno que otro alucine por el estilo.

3:00 am
Cuarto: Saliendo d…

New Template - Andreas04 blogger beta

Acabo de modificar el template de mi blog, ya tenia algo de rato queriendolo hacer pero por diversos motivos no lo habia realizado, hoy tuve un rato libre y me dije a mi mismo: chingale a tu blog...

El resultado es lo que estas viendo/leyendo ahora mismo, me base en un template que encontre en geckoandfly, la teoria decia que actualizaba el xml, agregaba los modulos adicionales (flickr, feeds, etc) y voila, pero como suele suceder: la teoria no es lo mismo que la practica.

El frijol en el arroz fue la implementacion de CSS del IE, en firefox se veia correctamente "mientras" no agregara mas de 2 modulos en la barra de la derecha pues al momento de agregar un tercero, este ultimo se iba hasta el fondo de la pagina, en cambio en el IE, no importaba el numero de modulos, la barra de la derecha "siempre" se iba hasta el fondo; asi que me tuve que hechar un buen clavado en hojas de estilo y despues de aproxidamente 2 horas y la ayuda del dreamweaver pude modificarlo de man…

New kind of K2 Template for Blogger Beta

I recently updated my blogger beta template to make it more like the old k2 blogger template, so this is the result, if you like it or have another idea drop me a comment, you can download the template from herehere.

Personalize with:
- Edit the label clouds (Etiquetas)
- Edit all the last.fm stuff (to your user..)
- Edit the google adsense stuff
- Edit the flickr stuff

Url to download: http://pastebin.com/835783

Update:
New URL to download http://rigreyes.googlepages.com/template_k2_antilo0p.xml

And my current template: http://rigreyes.googlepages.com/template_blog_antilo0p_com.xml

Feel free to use it :)