Swapping the Review Star Graphics Out

Owned by Jonathan Tew
Last updated: Jun 20, 2013Version comment

This brief tutorial will discuss how to modify the review display template to use your own graphics.  First off you need to understand how the score is displayed using 5 graphics.

  • Empty
  • 1/4 Full
  • 1/2 Full
  • 3/4 Full
  • Full

If you are going to use different graphics you will need to create 5 graphics just like this to represent the different states, upload them to your web site, and then have the URLS to them.  Once you have the 5 URLS for your images ready then it's time to modify the Velocity code in the Review Display Template.

There are two lines that we need to find in the template and change.  The first one to find looks like:

<td>$!{reviewSummary.getOverallAsStars()}</td>

and needs to be changed to:

<td>$!{reviewSummary.getOverallAsImages([
	"http://www.mysite.com/images/0_4.png", 
	"http://www.mysite.com/images/1_4.png", 
	"http://www.mysite.com/images/2_4.png", 
	"http://www.mysite.com/images/3_4.png", 
	"http://www.mysite.com/images/4_4.png"
])}</td>

The second one to find looks like:

 <td>$review.getOverallAsStars()</td>

and needs to be changed to:

 <td>$review.getOverallAsImages([
	"http://www.mysite.com/images/0_4.png", 
	"http://www.mysite.com/images/1_4.png", 
	"http://www.mysite.com/images/2_4.png", 
	"http://www.mysite.com/images/3_4.png", 
	"http://www.mysite.com/images/4_4.png"
])</td>