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

  • Thanks @PradeepSanku i will try & let you know. even you can post this as an answer. – Baby in Magento Jul 7 '16 at 5:47
  • for couple of websites i had used this – Pradeep Sanku Jul 7 '16 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. – Baby in Magento Jul 7 '16 at 6:34
  • yes in template/review/form.phtml – Pradeep Sanku Jul 7 '16 at 6:37
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.

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, privacy policy and cookie policy

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