Review Stars

Review stars for the item, providing users with a quick way to see the product's popularity.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1. Allow the reviews to be shown on the thumbnails

Category Page

By default the product thumbnails can't get the products reviews, but we can give the [%thumb_list%] function a show_rating:'1' parameter to allow the thumbnails to get the reviews.

Open cms/category.template.html and replace the opening products thumblist code with the code below, so that it includes show_rating:'1':

[%THUMB_LIST type:'products' limit:'[@config:THUMB_LIMIT@]' show_rating:'1'%]

Product Page

Open products/template.html and find the following functions:

• [%upsell_products%]
• [%crosssell%]
• [%related_products%]

For each of these functions, give them a parameter of the following: show_rating:'1'. These function should look similar to the following:

[%upsell_products id:'[@SKU@]' limit:'[@config:upsell_limit@]' template:'' show_all:'1' show_rating:'1'%]
[%crosssell id:'[@SKU@]' limit:'[@config:upsell_limit@]' template:'' show_all:'1' show_rating:'1'%]
[%related_products id:'[@SKU@]' limit:'[@config:upsell_limit@]' template:'' show_all:'1' show_rating:'1'%]

Step 2. Add the review stars to the gallery view thumb

Open thumbs/product/template.html, and add the below code directly underneath the <h3> line:

<div class="nReviewsBlock">
    [%if [@reviews@] > 0 %]
        [%set [@data:ratings-count@] = 1 /%]
        [%while [@data:ratings-count@] <= [@data:rating@]%]
            [%set [@data:ratings-count@] = [@data:ratings-count@]+1 /%]
            <i class="fa fa-star"></i>
        [%/while%]
        [%while [@data:ratings-count@] <= 5%]
            [%set [@data:ratings-count@] = [@data:ratings-count@]+1 /%]
            <i class="fa fa-star-o"></i>
        [%/while%]
    [%else%]
        <em class="small rating no-rating text-muted">Not yet rated</em>
    [%/if%]
</div>

Notes On The Above Code

The review stars will only show if the product has one or more reviews by previous customers. If there are zero reviews, "Not Yet Rated" will show instead.

Step 3. Add the review stars to the list view thumb

Open thumbs/product/list.template.html, and add the below code directly underneath the <p>[@short_description@]</p> line:

<div class="nReviewsBlock">
    [%if [@reviews@] > 0 %]
        [%set [@data:ratings-count@] = 1 /%]
        [%while [@data:ratings-count@] <= [@data:rating@]%]
            [%set [@data:ratings-count@] = [@data:ratings-count@]+1 /%]
            <i class="fa fa-star"></i>
        [%/while%]
        [%while [@data:ratings-count@] <= 5%]
            [%set [@data:ratings-count@] = [@data:ratings-count@]+1 /%]
            <i class="fa fa-star-o"></i>
        [%/while%]
    [%else%]
        <em class="small rating no-rating text-muted">Not yet rated</em>
    [%/if%]
</div>

Step 4. Add the CSS

Add the following CSS to the appropriate stylesheet:

.nReviewsBlock {
    margin: 0 0 10px;
    min-height: 25px;
}

Final Result