Star Rating For Expression Engine (using jQuery)

ExpressionEngine tutorial on how to add star rating in expression engine.

Expression Engine is a great CMS but in today’s extensions/modules market you can’t find an easy solution to add star rating to your articles. This tutorial will show you how to add star rating to your Expression Engine weblog.

Tutorial Details

• Program: Expression Engine
• Version: 1.6.+
• Difficulty: Medium
• Estimated Completion Time: 35minutes

Step 1

First we need to prepare all the necessary installations we will need.

• Install Expression Engine 1.6.+ either paid version or core
 
• Install Entry Rating module

Step 2

Now let’s prepare the page that will have the ratings and rating submission. In this tutorial i will be showing you how to add it to a multiple entry page, modifying it to work with a single entry page should take you a couple minutes (although you can use the same code and it will work, you might want to remove the javascript used to speed up page load times).

First lets add jQuery to the header of our page. You want to add the following code in the part of your page.

You can also download jQuery and enter a direct server path to your jquery file.

Now we need to display our weblog entries so you will use code like this:

{exp:weblog:entries weblog="news" limit="15"}

{title}

{body}

{/exp:weblog:entries}

Now we have to add the Entry Rating module’s code for the submission form, we can get the code from the documentation.

	{exp:entry_rating:rating_form entry_id="{entry_id}"}

We use the span for two reasons, first we don’t have any access to the form that is generated by the entry_rating tag so later we won’t be able to call upon this precise form to change the drop down value and submit it, using jQuery we can call upon a form within a class element. Secondly we use the none class which hides it from view. The none class simply sets a display:none style property on the form. The reason we hide the form is because we use a href‘s to change the value of the drop down achieving the pretty voting stars.

Let’s add the html for the pretty stars. I would usually use an unordered list to accomplish this, and most people have done so, but i personally prefer to attempt cleaner and faster approaches. For example if you used an unordered list to display your weblog entries there may be some styling that will carry over from the list items (which is what i ran into), so i used a div with a href‘s in it.

First i used the class stars to specify the div that will be wrapping our a href elements for styling purposes. Then i added a div with a class currentStars and an c{entry_id} class. The class currentStarswill be used to create the predefined value styling for the ratings. The c{entry_id} is used to know which one of the entries we are going to apply the certain styles to for the predefined values.

Now we have to add some jQuery to the html above, the following jQuery code will use the a href elements from above to populate the drop down from the entry rating module and submit the form.

{exp:entry_rating:show_rating entry_id="{entry_id}"}

{/exp:entry_rating:show_rating} 

So let’s break it down because i know it seems scary when you look it that chunk of code. First we wrap the whole thing with the entry_rating:show_rating tag, we do this to get the variable of what the current rating is (that is where the {overall_vote} comes in). I use a javascript variable starSize to store the overall_vote, overall_vote outputs a 1-5 number, we take that number run a test of if statements to see which number we have then we add a class that fills the amount of stars in, i will explain further about the styling once we get to the css. The second part of this jQuery code is real meat of the operation, it looks for clicks from our pretty styled stars and once a click is registered it will change the value of the drop down and submit the form for us. I used the v{entry_id} to make sure we are changing the right drop down and submitting the right form.

Step 3

Now let’s get to the pretty part, of course i am talking about the css.Let’s look at the code and then i’ll talk about it.

.stars {
	width:90px;
	height:18px;
	background:url(../images/rating.png);
	position:relative;
	}

First we set the styling for the wrapping div, in this case that’s the stars div. The width is 90px that’s all the 5 stars combined, the stars in this tutorial are 18px wide and high you can of course change it as you please. We set the position to relative, because we have elements with absolute positioning inside the div we have to set the positioning to relative, otherwise the elements inside will go outside the wrapping element. Then i set a background that is full of 5 empty stars.

.stars .currentStars {background:url(../images/ratingFull.png); position:absolute; z-index:1; left:0; width:0; height:18px;}
.stars .one {width:18px;}
.stars .two {width:36px;}
.stars .three {width:54px;}
.stars .four {width:72px;}
.stars .five {width:90px;}

Now we set the styling for the rating of the entry, currentStars is an element that goes over the stars div and fills the stars depending on how many are needed, ratingFull.png is an image with the 5 full stars. The one through five classes were added to the currentStars element and they control how many stars will be filled. If you had decided to use a different size stars here you will want to edit one to the size you are using and then add the same amount to every next class.

.stars a {height:18px; width:18px; background:url(../images/star.png); display:block; position:absolute; z-index:10;}

.stars a.star-one {left:0;} 
.stars a.star-two {left:18px;} 
.stars a.star-three {left:36px;} 
.stars a.star-four {left:54px;} 
.stars a.star-five {left:72px} 

.stars a.star-one:hover {background:url(../images/starFull.png);} 
.stars a.star-two:hover {background:url(../images/starFull.png);} 
.stars a.star-three:hover {background:url(../images/starFull.png);} 
.stars a.star-four:hover {background:url(../images/starFull.png);} 
.stars a.star-five:hover {background:url(../images/starFull.png);} 

Now we style all the a href‘s inside of the stars div. We set the style for each a href the height and width, then we make then display block because by default a href elements are inline which doesn’t do us good since we want to make then position absolutely and z-indexed. The z-indexing is necessary for us to be able to vote even though we have already filled in some of the stars.

Then we set the positions for all the stars, we have already set all of the stars to have a position absolute so all we need is the distance from the left for each one. And we add hover effects that change the background of the stars to a filled star so you know which star you going to rate.

 

Final Result

{exp:weblog:entries weblog="news" limit="15"}

{title}

{body}

{exp:entry_rating:show_rating entry_id="{entry_id}"}

{/exp:entry_rating:show_rating} 


    

    

    

    

    

    

    


{/exp:weblog:entries}

Here are all the images used, i made the background gray so you can see them

 
• Rating
 
• Rating Full
 
• Star
 
• Star Full