This article has moved to a new home. View the updated version Tweak Library

Review Stars

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

Industries

  • Bicycles
  • Computers & Electronics
  • Music & Instruments
  • Gifts
  • Toys & Games

Wireframe

Review Stars

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 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'%]

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

Multi-Item Add

Download Files

Download Files


1 related articles found: