Display 5 stars for adding ratings instead of radio buttons - magento

Question

default magento will display the ratings as below image
but i want to change like this :
i am using default magento code
form.phtml [app/design/frontend/rwd/theme/template/review/form.phtml]
<?php if( $this->getRatings() && $this->getRatings()->getSize()): ?>
<h4><?php echo $this->__('Your Rating') ?> <em class="required"></em></h4>
<span id="input-message-box"></span>
<table class="data-table review-summary-table ratings" id="product-review-table">
<col width="1" />
<col />
<col />
<col />
<col />
<col />
<thead>
<tr>
<th> </th>
<th>
<div class="rating-box">
<span class="rating-number">1</span>
<span class="rating nobr" style="width:20%;"><?php echo $this->__('1 star') ?></span>
</div>
</th>
<th>
<div class="rating-box">
<span class="rating-number">2</span>
<span class="rating nobr" style="width:40%;"><?php echo $this->__('2 star') ?></span>
</div>
</th>
<th>
<div class="rating-box">
<span class="rating-number">3</span>
<span class="rating nobr" style="width:60%;"><?php echo $this->__('3 star') ?></span>
</div>
</th>
<th>
<div class="rating-box">
<span class="rating-number">4</span>
<span class="rating nobr" style="width:80%;"><?php echo $this->__('4 star') ?></span>
</div>
</th>
<th>
<div class="rating-box">
<span class="rating-number">5</span>
<span class="rating nobr" style="width:100%;"><?php echo $this->__('5 star') ?></span>
</div>
</th>
</tr>
</thead>
<tbody>
<?php foreach ($this->getRatings() as $_rating): ?>
<tr>
<th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></th>
<?php foreach ($_rating->getOptions() as $_option): ?>
<td class="value"><label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"><input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" /></label></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<input type="hidden" name="validate_rating" class="validate-rating" value="" />
<script type="text/javascript">decorateTable('product-review-table')</script>
<?php endif; ?>
please help me to find solution
Thanks in advance

Answer 1

I recently dealt with it and my code looks something like this:
form.phtml
<?php foreach ($this->getRatings() as $_rating): ?>
<tr>
<th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?>: </th>
<?php foreach ($_rating->getOptions() as $_option): ?>
<td class="value">
<label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>">
<input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />
<i class="fa fa-star"></i>
</label>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
*.css
.review-summary-table tbody td label input {
display: none;
}
// default
.review-summary-table tbody td label input + .fa {
color: #E6E6E6;
}
// hover, clicked, ...
.review-summary-table tbody td label:hover input + .fa,
.review-summary-table tbody td label input:checked + .fa,
.review-summary-table tbody td.active label input + .fa,
.review-summary-table tbody tr:hover td.tmp-active label input + .fa {
color: #50A4CF;
}
*.js
var reviewTable = $('#product-review-table');
if (reviewTable.length > 0) {
reviewTable.each(function() {
$(this).find('tbody tr').each(function() {
var row = $(this),
tdValues = row.find('td.value');
tdValues.each(function(index) {
$(this).find('label').hover(function() {
tdValues.removeClass('tmp-active');
tdValues.slice(0, index + 1).addClass('tmp-active');
}).click(function() {
tdValues.removeClass('active');
tdValues.slice(0, index + 1).addClass('active');
});
});
});
});
}