Improve default Magento reviews

If you’ve ever worked on Magento framework you’re familiar with the fact that Magento provides bunch of useful features. In this article we will cover one of them – Customer Product Reviews. Maybe some will say that we don’t need to change anything regarding this feature, but when we are in custom development a lot of things can’t just work “out of box”. Especially if you willing to provide fully polished retina responsive theme, default isn’t the way we roll.

So let us improve the default Magento product reviews feature.

Default product review

Like in many other cases Magento 1x uses some outdated approaches for displaying Magento product reviews on the store’s frontend. Our changes will be focused only on frontend, we won’t go into backend or admin part of Product reviews. If you are not satisfied with this parts, we can talk about in some other time.

Basically if we don’t change something our customers have to deal with this form in order to create product review:

Sorry Magento but I’ll probably skip leaving my feedback when I see this interface. And I believe that lot of customers will behave the same.

Many studies have shown us that product reviews are a useful thing for your potential customers. Because a lot of customers check product reviews before purchasing somthing. From that our primary goal is to collect as many customer reviews as possible. In order to do that we need to improve the review in this interface to something better that has an user-friendly feel.

After we adjust submit form we will also improve customer product review sections on frontend (rating stars on product page, category page etc.). Magento handles this section by using inline style and image sprite in order to dynamically show product ratio. We will replace this outdated approach by pure CSS.

I’ll assume that we are all working on custom themes and that Magento base styles are already removed from theme. Because I don’t plan on going thought each step and finding out how and where to transfer files from base theme. Also, I’ll assume that you know what to do in order to enable Magento Reviews if they are disabled.

Adjust product rating form

Our main goal is to remove (hide) ratio inputs from frontend and instead of them we wish to have something like this:

Basically radio buttons will be replaced with vector rating stars.

To create custom interface we need to modify base review template file (../template/review/form.phtml). Copy base file to your theme and remove all unnecessary table markup. Together with default foreach inside table markup. We’ll replace that markup with this slightly modified foreach:

<?php foreach ($this->getRatings() as $_rating): ?>
   <dl>
       <dt class="label"><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></dt>
       <dd class="rating-input value">
           <?php foreach ($_rating->getOptions() as $_option): ?>
               <label class="icon-star-empty" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>">
                   <input class="no-display radio" 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>
           <?php endforeach; ?>
       </dd>
   </dl>
<?php endforeach; ?>

As you can see, we have adjusted markup by adding label elements which will be used like “mask” for hidden radio inputs. And they will be also used for displaying stars in form of vector (retina) icons.

Now that we have a new markup we also need CSS, which will provide fully functional rating functionality. Before going on CSS code please set up web fonts or some kind of SVG graphics that can be use for rating stars. In this article we are using empty star, half star and full star icons from Font Awesome collection but feel free to use what ever you wish.

In order to better understand what we have done please check provided CSS code:

// Rating star input
.rating-input {
 white-space: nowrap;
 padding: 5px 0;
}
 .rating-input > label {
   display: inline-block;
   position: relative;
   width: 1.1em;
   height: 17px;
   color: #d0a658;
   font-size: 20px;
   font-size: 2rem;
}
 .rating-input:hover > label:before {
   content: "\e80a";
   position: absolute;
   left: 0;
   color: #d0a658;
}
 .rating-input:hover > label:hover ~ label:before {
   content: '\e800';
}
 .rating-input .full-star:before {
   content: "\e80a";
}

Note: This approach will not work on older web browsers (lt IE8). If support for older browsers is required then we need to think about some type of fallback. One of suggestion will be to use Javascript, but I’ll not cover that in this article.

Adjust product rating view

Next thing to do is to improve rating view on category page, product page etc.

First of all go to Magento base theme and find where and how Magento displays product reviews. For example go to base review view phtml template file. Find the "rating-box" markup and spot inline style="width:...%;" inside it. We don’t need it any more if we planing to use rating stars in vector shape. Instead of inline style we will use html5 data- attribute. We will call that attribute data-rating.

In order to show different reviews (number of stars) for different product we need range of numbers which can be declared differently in our CSS code. The easiest option is to go straightforward and adjust current Magneto percent range in PHTML to range of numbers that we need. Especially if we don’t really need a super precise range of ratings.

This option doesn’t require any type of extending Magento default Review block or some other wizardry. In this case you just need to have a range of numbers from 0 to 10 so we can hook our CSS on that numbers. By using native php round function and simple mathematical division by 10 we can get that range of numbers from the getPercent() Magento function.

In short, this is code which we need to use for showing rating stars:

Note: If that’s not good enough for you, then you need to consider extend of default Magento Review block and play it with range of numbers which Magento provide in order to get right data range for data-rating attribute that you can use.

And at last we need CSS code which will be responsible for dynamically displayed stars for each review ratio. By using data-range attribute and CSS content property we can show correct number of stars for each case. If the received range on data-range attribute is between 0 and 10 we can use that numbers in the way that value of 0 representing products without reviews (all empty stars), value of 1 will show half rating star on product. Value 2 will be one full star, value 3 will be one and half star etc. To cut to the chase, please check CSS code:

.rating {
   width: 100%;
   text-align: left;
}
.rating .rating-count {
   padding-left: 1em;
}
.rating .icon-fallback {
   display: none;
}
.rating i {
   font-size: 2em;
}
.rating i:before {
   margin-left: 0;
   min-width: 130px;
   text-align: left;
}
// half star rating
.rating i[data-rating="1"]:before {
   content: "\e822 \ \e800 \ \e800 \ \e800 \ \e800";
}
// one star rating
.rating i[data-rating="2"]:before {
   content: "\e80a \ \e800 \ \e800 \ \e800 \ \e800";
}
// one and half star rating
.rating i[data-rating="3"]:before {
   content: "\e80a \ \e822 \ \e800 \ \e800 \ \e800";
}
// two star rating
.rating i[data-rating="4"]:before {
   content: "\e80a \ \e80a \ \ee800 \ \e800 \ \e800";
}
// two and half star rating
.rating i[data-rating="5"]:before {
   content: "\e80a \ \e80a \ \e822 \ \e800 \ \e800";
}
// three star rating
.rating i[data-rating="6"]:before {
   content: "\e80a \ \e80a \ \e80a \ \e800 \ \e800";
}
// three and half star rating
.rating i[data-rating="7"]:before {
   content: "\e80a \ \e80a \ \e80a \ \e822 \ \e800";
}
// four star rating
.rating i[data-rating="8"]:before {
   content: "\e80a \ \e80a \ \e80a \ \e80a \ \e800";
}
// four and half star rating
.rating i[data-rating="9"]:before {
   content: "\e80a \ \e80a \ \e80a \ \e80a \ \e822";
}
// five star rating
.rating i[data-rating="10"]:before {
   content: "\e80a \ \e80a \ \e80a \ \e80a \ \e80a";
}

Also, you will need this small jQuery code in order to keep stars selected after click/touch on them.

jQuery(document).ready(function(){
        jQuery('.rating-input input').click(
            function () {
                jQuery(this).parent().prevAll().andSelf().addClass('full-star');
                jQuery(this).parent().nextAll().removeClass('full-star');
            }
        );
    });

That is all guys.

As I’ve already mention if this isn’t good enough for your case, then consider to use Magento default 0 to 100 range and create your CSS on that concept. Or, extend Magento Review block in order to create array of numbers for further manipulation of data-range attributes.

Cheers.