How to Improve Default Magento Product Reviews?

Magento Product Reviews

The practice of reading product reviews before making a purchase is common now. A recent study reveals that 54% of online buyers read customers reviews about a product before purchasing the product. Positive product reviews can result in improving sales incredibly.

Magento provides a list of useful features to give customers a good shopping experience and retailers to get the most out of their stores. One such feature is the ‘Customer Product Reviews’ feature. The customer reviews feature is specifically important because it tells you how your customers think of your products. Based on your customer’s reviews about a product, you are in a better position to further improve your products to meet every customer’s needs. Customer’s reviews is also great from SEO perspective.

By default, the Magento customers product reviews feature looks similar to this.

product-reviews

You may want to make improvement to this default look as it does not seem very user friendly. You may want to provide stars to rate the product instead of Radio buttons, get rid of Nickname and summary text boxes and provide a simple feedback text box etc. Our goal should be to make it easy and collect as many customers’ reviews as possible. In this article, we will see how to make changes to it to make it similar to the following.

reviews

To do so, we need to modify this file (../template/review/form.phtml). First, copy the file to your theme. We need to replace the default foreach inside table markup. Remove all unnecessary table markup and replace it with this 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; ?>

The label elements are used to hide radio inputs and display stars.

For rating functionality i.e. display different assigned ratings (number of stars) for different products, we need to declare range of numbers in our CSS code. We need range of numbers from 0 to 10 to represent different ratings. We can adjust current Magento percent range in PHTML to range of numbers that we need. By using native php round function and simple mathematical division by 10 we can get that range of numbers from the getPercent() Magento function.

The following CSS code will dynamically display correct stars for each review ratio. 0 represents no review at all, 1 represents half star, 2 represents one full star and so on.

.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";
}

Lastly, use the following jQuery code to keep starts selected after clicking.

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');

}

);

});

Leave a Reply

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