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: Sal

The body is our temple

Ayer como todos los dias sali poco despues de las 6pm, llegue a mi casa, visite el baño para la respectiva y despues me cambie: shorts, chanclas, camisa y listo para la alberca; 30 minutos despues y un dolor en los hombros apenas soportable por el nado, llego a mi casa, me baño, me veo al espejo y me digo a mi mismo: "que chingaos.. " y que me rasuro el pecho! se ve chido :)

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 here here . 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 :)