Que necesitas:
- JQuery
- Star Rating plugin
- Symfony: agrega a tu modelo, en mi caso review es el modelo (schema.yml) algo como esto
stars: { type: integer(1) }
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:
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
<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