Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

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

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

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: