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

46 vueltas al sol

 Pues eso, el dia de hoy cumplo 46 aƱos y este es el mejor regalo:

Sophie Baby Sounds Privacy Policy

Privacy Policy Rigoberto Reyes built the Sophie Baby Sounds app as a Free app. This SERVICE is provided by Rigoberto Reyes at no cost and is intended for use as is. This page is used to inform website visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at Sophie Baby Sounds unless otherwise defined in this Privacy Policy. Information Collection and Use This  Service  does not require you to provide us with any personally identifiable information.  The  Service...