There are several types of ratings:
Ratings in single product content
Ratings in single product content
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="ct-ratings"> <div class="ct-ratingsLeft"> <h4>Rating Snapshot</h4> <div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="#">2 customer reviews</a> </div> </div> <div class="ct-u-paddingTop10">Overall Rating 2.8 out of 5</div> <div class="ct-u-paddingTop15 ct-fs-i">(21 of 56 (38%) reviewers would recommend this product to a friend.)</div> </div> <div class="ct-ratingsRight"> <ul class="list-unstyled ct-u-paddingTop15"> <li><span>5 stars</span><span><span data-width="60"></span></span><span>12</span></li> <li><span>4 stars</span><span><span data-width="20"></span></span><span>7</span></li> <li><span>3 stars</span><span><span data-width="50"></span></span><span>7</span></li> <li><span>2 stars</span><span><span data-width="80"></span></span><span>17</span></li> <li><span>1 star</span><span><span data-width="45"></span></span><span>13</span></li> </ul> </div> <div class="clearfix"></div> <hr> <div class="ct-range ct-u-paddingTop25"> <div>Sizing Snapshot</div> <div>Fit Snug</div> <div class="ct-rangeSlider"> <div class="ct-js-noUiSliderDisabled ct-noUiSlider"></div> </div> <div>Runs Large</div> </div> </div> |
Star ratings
Star ratings
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="#">2 customer reviews</a> </div> </div> |
Javascript ratings
Bar ratings
HTML markup:
|
1 2 3 4 5 6 7 8 9 |
div class="ct-ratingsRight"> <ul class="list-unstyled ct-u-paddingTop15"> <li><span>5 stars</span><span><span data-width="60"></span></span><span>12</span></li> <li><span>4 stars</span><span><span data-width="20"></span></span><span>7</span></li> <li><span>3 stars</span><span><span data-width="50"></span></span><span>7</span></li> <li><span>2 stars</span><span><span data-width="80"></span></span><span>17</span></li> <li><span>1 star</span><span><span data-width="45"></span></span><span>13</span></li> </ul> </div> |
Javascript code:
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $(".ct-ratingsRight ul li span:nth-child(2) span").each(function(){ if($(this).attr("data-width")){ var $barWidth = $(this).attr("data-width"); $(this).css("width", $barWidth+'%'); } }); }); |