Simple Magento review stars plugin made with Prototype JS

October 9th, 2013 by in Development, Frontend, Magento 6
simple-magento-review-stars

If you think that default Magento ratings table on the product review page is ugly and hard to use and you want to replace it with easy to use rating stars you are not alone. After searching for it for a while (because I didn’t want to reinvent the wheel) I found that there are no simple and free Prototype JS solutions that I could just plug in to all my projects and be done with it so I decided to make my own. I am a big fan of simplicity and I think you’ll be able tell once you try this plugin. I know that there are a ton of simple and free jQuery solutions but as we all know Magento still uses Prototype JS and I don’t want to add jQuery to the project just because of review stars.

 

The plugin is about 2KB with the CSS file and it’s extremely easy to use. The code is on GitHub and you can download it from here.

Installation

  • Add srka.review.stars.min.js (or srka.review.stars.js) and srka.review.stars.css files to the product page.
  • 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>
    
  • Test it and enjoy.

 

Screenshot

 Simple Magento review starts

Written by Srdjan Stojiljkovic

Srdjan is a Frontend Developer with a passion for pixel perfect design and great user interfaces. He also designed and developed this site and is dedicated to provide best and most useful articles about development in general.


See all articles from this author »

Comment (6)

Posted on December 10, 2013 by Gen

Hi, do you have a working example of your "Simple Magento review stars plugin made with Prototype JS"? I have tried implementing this but had no luck. Thanks Gen

Posted on December 10, 2013 by Gen

TypeError: row.select(...)[0] is undefined var ratingLabel = row.select('th')[0].innerHTML; srka.r...tars.js (line 12)

Posted on December 10, 2013 by Srdjan Stojiljkovic

Hi Gen and thank you for your comment.

 

I have a working example on a project where I first made this functionality. Please check this link: http://www.shopsupplies.com.au/600-series-regsiter-stand#reviews

I also implemented it on my local machine on vanilla Magento CE 1.8 and it worked fine.

 

I'll check it out. If possible, could you please share the URL of your product review page.

Posted on August 2, 2014 by Maurice

Excellent Customer Support, helped me installed an extension for totally free. Great job.

Posted on October 24, 2014 by euge

Hi Does the extension make an average rating of all ratings? This for metadata purposes. Thanks E.

Posted on October 24, 2014 by Srdjan Stojiljkovic

Hi euge, the extension does not deal with ratings at all. It just replaces the default Magento input table with nice looking and more user friendly stars. It's just a better input method to choose the rating when writing a product review.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>