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

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 does not use any third party services that…

Personalizando sfWidgetFormJQueryDate

Llevo 3 semanas trabajando en un proyecto con symfony, a pesar de que existe bastante documentacion acerca del framework es muy facil perderse entre toda la informacion y si le agregamos las distintas versiones de symfony, los 2 tipos de ORM (propel/doctrine) las diferentes maneras de hacer las cosas segun que tan bien hayas definido tus modelos, pues encontrar como hacer algo especifico suele ser bastante tedioso, asi que conforme avance en mi proyecto ire poniendo uno que otro tip de como pude resolver los problemas que me encontre...
Iniciare con el conocido sfWidgetFormJQueryDate, el cual nos da una interfaz para el datepicker de Jquery UI, la documentacion esta bien... pero yo queria el calendario en español, inline (que se mostrara sin necesidad de hacer click en una imagen o un input) y con limite de fechas a escoger:



Para conseguirlo utilice el siguiente codigo en la forma:

'start' => new sfWidgetFormJQueryDate(array('culture'=>'es', 'config&…