Reviews overview

by mtenschert

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div class="container__main"></div>

<div class="ratingWrapper" data-ratingInput="4.2" data-ratingTotalInput="10"></div>
<div class="ratingWrapper" data-ratingInput="2.1" data-ratingTotalInput="145"></div>
<div class="ratingWrapper" data-ratingInput="3.0" data-ratingTotalInput="15"></div>

<div class="ratingWrapper" data-ratingInput="4.2" data-ratingTotalInput="235" ></div>
<div class="ratingWrapper" data-ratingInput="2.1" data-ratingTotalInput="145"></div>
<div class="ratingWrapper" data-ratingInput="3.0" data-ratingTotalInput="15"></div>

CSS

<style>
a.product-show-reviews, a:hover.product-show-reviews {
    text-decoration: none;
    overflow: auto;
    display: inline-block;
}
i.checked {
 color:orange;
 float:none;
 margin:none;
 display:inline;
 text-align:left;
 margin-right:0px;
}
a i.checked:hover {
 color:orange;  
}
a span.reviews-rating:hover, a span.reviews-amount:hover  {
 color:#2a6496;  
}
span.reviews-amount {
 overflow:auto;
 display:block;
 font-weight:bold;
 color:#2a6496;
}
.reviews-amount small {
 color:#2a6496;
 font-size:90%;
 font-weight:bold;
 }
  .reviews-amount small small {
 color:#2a6496;
 font-size:inherit;
 }
span.reviews-amount small:hover {
  text-decoration:none;
}
.product__adress .important-label {
    margin-bottom: 7px;
}
</style>

JavaScript

setTimeout(function(){ 

$( "div.ratingWrapper" ).each(function( index ) {

	var rating = $(this).attr("data-ratingInput");
  var ratingInput = $(this).attr("data-ratingInput");
  var ratingTotalInput = $(this).attr("data-ratingTotalInput");
  var ratingWord ;
  
 	// Less than 5 ratings, we dont´t show feature
  if (ratingTotalInput > 5.0) {
  
	// Convert numbers into ratingWording. PAY ATTENTION (!!!) in the next function we use math.round (0.5 steps, which manipulate the rating-variable!)
     				 if (rating < 3.80) {
      					ratingWord = "Beoordeling";
      } else if (rating < 4.25) {
           			ratingWord = "Goed";
      } else if (rating < 4.50) {
              	ratingWord = "Heel Goed";
      } else if (rating < 4.75) {
                ratingWord = "Super";
      } else if (rating < 5.0) {
                ratingWord = "Uitstekend";
      } 

	// Stars: Convert numbers into stars
  // Stars: round numbers for stars
      rating = Math.round(rating * 2) / 2;
      let output = [];

  // Stars: Append all the filled whole stars
      for (var i = rating; i >= 1; i--)
        output.push('<i class="fa fa-star checked"></i>');

  // Stars: If there is a half a star, append it
      if (i == .5) output.push('<i class="fa fa-star-half-o checked"></i>');

  // Stars: Fill the empty stars
      for (let i = (5 - rating); i >= 1; i--)
        output.push('<i class="fa fa-star-o checked"></i>');

  // Output HTML without Stars
    var html = "<style> .ratingWrapper { display:block !important; } </style><i class='fa fa-star' aria-hidden='true'></i>"+
    "<a href='#' class='product-show-reviews'>"+
     "<span class='rating_wording' class='reviews-rating'>" + ratingWord + " </span>"+
     "<span class='stars'>" + output.join('') + "</span>"+
     "<br>"+
     "<span class='reviews-amount'>"+
       "<small class='reviews-rating'> " + ratingInput + " </small>"+
       "<small> /5 van <small id='ratingTotal'>" + ratingTotalInput + "</small>...