Back

Quick and Easy Star Ratings

Description

A quick and easy way to create javascript star ratings in dotCMS.  See the resulting image below:

Image

Quick and Easy Star Ratings

Code

Ratings.vtl:

#set($query = '{
   "query": {
	  "query_string": {
					   "query" : "+rating.relatedidentifier:${esc.d}content.identifier"
	  }
   },
   "aggs" : {
	  "rating" : {
		 "terms" : {
			"field": "rating.rating",
			"size" : 20
		 }
	  }
   },
   "size":0    
}')
#set($results = $estool.search($render.eval($query)))

#set($ratingJson = $json.generate($results.response))
#set($numRatings=0)
#set($totalRatings=0)

#foreach($tag in $ratingJson.aggregations.asMap.rating.buckets)
	#set($rate = $math.mul($math.toInteger( $tag.key ), $tag.docCount))
	#set($totalRatings = $math.add( $totalRatings, $rate ))
	#set($numRatings = $math.add( $numRatings, $tag.docCount ))
#end
#set($avg=$!math.div($totalRatings, $numRatings))


<script>
	function submitRating(){
   
   		var val = document.getElementById("ratingForm").rating.value;

		var dataObj= {
			'relatedIdentifier': "${esc.d}docContent.identifier",
			'dmid': "${esc.d}cookietool.dmid.value",
			'rating': val,
			'stName': 'rating'
		};

		$.ajax({
			url: '/api/content/publish/1',
			type: 'POST',
			cache: false,
			data: dataObj,
			beforeSend: function (request){
				// This sends the user who authenticates against the dotCMS server
				// In a real world example, you could use session based authentication
				request.setRequestHeader("DOTAUTH", "XXXXXX");
			},

			success: function(data,status,xhr) {
				console.log("works!");
			},
				error: function(data,status,xhr) {
				alert("fail: " + data);
				console.log(data);
			},
        });
	}
</script>
<style>

/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.3rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 "; /* full star */
}
/* Zero stars rating */
.rate > label:last-child:before {
    content: "\f006 "; /* empty star outline */
}
/* Half star trick */
.rate .half:before {
    content: "\f089 "; /* half star no outline */
    position: absolute;
    padding-right: 0;
}
/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: orange;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: gold;  } 

</style>



<form id="ratingForm">
	  <fieldset class="rate">
	  <h3>Helpful?</h3>
		<input type="radio" id="rating10" name="rating" value="10" onclick="submitRating()" #if($avg > 9 && $avg <= 10 )checked=true#end /><label for="rating10" title="5 stars"></label>
		<input type="radio" id="rating9" name="rating" value="9" onclick="submitRating()" #if($avg > 8 && $avg <= 9 )checked=true#end /><label class="half" for="rating9" title="4 1/2 stars"></label>
		<input type="radio" id="rating8" name="rating" value="8" onclick="submitRating()" #if($avg > 7 && $avg <= 8 )checked=true#end /><label for="rating8" title="4 stars"></label>
		<input type="radio" id="rating7" name="rating" value="7" onclick="submitRating()" #if($avg > 6 && $avg <= 7 )checked=true#end /><label class="half" for="rating7" title="3 1/2 stars"></label>
		<input type="radio" id="rating6" name="rating" value="6" onclick="submitRating()" #if($avg > 5 && $avg <= 6 )checked=true#end /><label for="rating6" title="3 stars"></label>
		<input type="radio" id="rating5" name="rating" value="5" onclick="submitRating()" #if($avg > 4 && $avg <= 5 )checked=true#end /><label class="half" for="rating5" title="2 1/2 stars"></label>
		<input type="radio" id="rating4" name="rating" value="4" onclick="submitRating()" #if($avg > 3 && $avg <= 4 )checked=true#end /><label for="rating4" title="2 stars"></label>
		<input type="radio" id="rating3" name="rating" value="3" onclick="submitRating()" #if($avg > 2 && $avg <= 3 )checked=true#end /><label class="half" for="rating3" title="1 1/2 stars"></label>
		<input type="radio" id="rating2" name="rating" value="2" onclick="submitRating()" #if($avg > 1 && $avg <= 2 )checked=true#end /><label for="rating2" title="1 star"></label>
		<input type="radio" id="rating1" name="rating" value="1" onclick="submitRating()" #if($avg > 0 && $avg <= 1 )checked=true#end /><label class="half" for="rating1" title="1/2 star"></label>
	</fieldset>
	#if($numRatings gt 0)
		<div style="display:block;margin:0px 0px 0px 5px;padding:0px;font-size:90%">
			$numRatings #if($numRatings==1) person #else people #end voted. Average: $!math.roundTo(2, $!math.div($avg,2))
		</div>
	#end
	
</form>

Topics

Have you created code you'd like to share with the dotCMS community?

Share your code Become a Contributor