A quick and easy way to create javascript star ratings in dotCMS. See the resulting image below:
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>