Displaying Product Ratings and Reviews

The Reviews & Ratings API allows you to access product rating information, post new reviews and fetch a list of existing product reviews. If you follow the instructions in this documentation, or if you used the default store template as the base for your store, you can add all elements described below to the product_partial partial. We suggest you to create separate partials for each element, to keep the product details partial simple.

Required scripts

The rating selector requires mootools_more.js and demo_effects.js scripts to be loaded on the page. You can find the scripts in Combining and minifying JavaScript and CSS files article on LemonStand form.

Displaying product rating

The Shop_Product class has two fields which you can use for extracting the product rating information:

• $rating_approved - returns a rating based on approved reviews.
• $rating_all - returns a rating based on all reviews, included non-approved.

The both fields return a value in the 0 - 5 range. Value 0 means that there is no rating information available for the product. Values have increment of 0.5 i.e.: 1, 1.5, 2, 2.5, 3, 3.5, 4. 4,5, 5. There is no 0.5 value, because the minimal rating a visitor can set is 1.

To display a product rating on the Product Details page you can just output the rating value to the page:

Product rating: <?= $product->rating_all ? $product->rating_all : '(no rating information)' ?>

{% set rating = field(product, 'rating_all') %}
Product rating: {{ rating is null ? '(no rating information)' : rating }}

Also you can implement a more sophisticated CSS solution and display ratings as stars:

Implementation example:

<?
  $rating = $product->rating_all;
?>
<span class="rating_stars rating_<?= str_replace('.', '', $rating) ?>">
  <?= $rating ? null : '(no rating information)' ?>
</span>

{% set rating = field(product, 'rating_all') %}
<span class="rating_stars rating_{{ rating|replace({'.':''}) }}">
  {{ rating is null ? '(no rating information)' : null  }}
</span>

The code outputs a span element with CSS two CSS classes applied. The second CSS class names depends on a product rating and it can be used for applying corresponding backgrounds using a CSS stylesheet. In your Demo store we use the following use in the CSS file:

span.rating_stars {
  display: block;
  height: 20px;
  margin-bottom: 18px;
  background: transparent url(../images/rating_stars_large.png) no-repeat -2px -180px;
  padding-left: 100px;
  padding-top: 3px;
  color: #666666;
  font-size: 11px;
}

.rating_selector span.rating_stars {
  width: 96px;
  padding-left: 0;
  margin-top: 3px;
  cursor: pointer;
}

span.rating_stars.rating_1 {background-position: -2px -160px;}
span.rating_stars.rating_15 {background-position: -2px -140px;}
span.rating_stars.rating_2 {background-position: -2px -120px;}
span.rating_stars.rating_25 {background-position: -2px -100px;}
span.rating_stars.rating_3 {background-position: -2px -80px;}
span.rating_stars.rating_35 {background-position: -2px -60px;}
span.rating_stars.rating_4 {background-position: -2px -40px;}
span.rating_stars.rating_45 {background-position: -2px -20px;}
span.rating_stars.rating_5{background-position: -2px 0;}

We have images for all ratings in a single PNG file:

Next: Displaying a List of Product Reviews
Previous: Creating a Product RSS Feed
Return to Products