4

default magento will display the ratings as below image

enter image description here

but i want to change like this :

enter image description here

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>&nbsp;</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; ?>

Edit

i tried with this jsfiddle code, it worked fine for me. but i want to know what code i need to be replace in form.phtml by jsfiddle code

7
  • try this github.com/srka/Srka-Magento-Review-Stars Commented Jul 7, 2016 at 5:44
  • Thanks @PradeepSanku i will try & let you know. even you can post this as an answer. Commented Jul 7, 2016 at 5:47
  • for couple of websites i had used this Commented Jul 7, 2016 at 5:55
  • @PradeepSanku is i need to add this code <script type="text/javascript"> //<![CDATA[ var reviewStars = new SrkaReviewStars('product-review-table'); //]]> </script> below </form> tag. Commented Jul 7, 2016 at 6:34
  • yes in template/review/form.phtml Commented Jul 7, 2016 at 6:37

2 Answers 2

1

Steps to convert rating radio buttons to star rating

Step 1:-

Download srka.review.stars.min.js (or srka.review.stars.js) and srka.review.stars.css from https://github.com/srka/Srka-Magento-Review-Stars and upload to your theme css and js folders respectively.

Step 2:-

Add srka.review.stars.min.js (or srka.review.stars.js) and srka.review.stars.css files to the product page using local.xml file from yout theme's layout.

<catalog_product_view>
  <reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/srka.review.stars.css</name></action>
    <action method="addItem"><type>skin_js</type><name>js/srka.review.stars.js</name></action>
  </reference>
</catalog_product_view>

Step 3:-

Open app/design/frontend/[YOUR_PACKAGE]/[YOUR_THEME]/template/review/form.phtml and add the following code just below the #review-form closing tag.

<script type="text/javascript">
    //<![CDATA[
    var reviewStars = new SrkaReviewStars('product-review-table');
    //]]>
</script>

just save and clear cache and you have done.

12
  • sorry, it didt worked for me, can you check this link Commented Jul 7, 2016 at 6:55
  • i had checked your website in that js has not been included Commented Jul 7, 2016 at 7:00
  • make view source and check sbdev2.kidsdial.com/skin/frontend/base/default/js/… it is giving 404 error Commented Jul 7, 2016 at 7:00
  • please check link now, before i was uploaded directly under js folder present in root. js is loading now. but stars are not visible. radio buttons are hidden now. Commented Jul 7, 2016 at 7:06
  • under add review tab you can see this image : prntscr.com/bpttgz instead of star, small square box is displaying. Commented Jul 7, 2016 at 7:11
1

at first time its not working for me but i found the solution, above given solution is working perfect with "base/default/template/review/form.phtml"

with other theme "form.phtml" it wont work. please try to replace code from base/default to your theme file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.