Separate Star Rating aggregate value from "your rating"

eZ Publish comes standard with the Star Rating extension, which adds the ability for users to rate content on your website. It works well out of the box. By default, the interface to rate an article is combined with the aggregate rating on an article. Here's a quick example on how to tweak that functionality so that "your rating" is separate from the aggregate rating.

This is the default, combined interface that shows the aggregate rating and the ability for the user to rate the article:

Default Star Rating interface

This is the desired interface, which will split the interface...

- before rating:

Star Rating in progress

- after rating:

Star Rating after being rated

To achieve this, here is a code diff of the star rating datatype view template, which separates out "your rating" and also fetches the current user's rating:

 
--- extension\ezstarrating\design\standard\templates\content\datatype\view\ezsrrating.tpl
+++ extension\yourextension\design\yourdesign\templates\content\datatype\view\ezsrrating.tpl
@@ -2,9 +2,6 @@
 
 <ul id="ezsr_rating_{$attribute.id}" class="ezsr-star-rating">
    <li id="ezsr_rating_percent_{$attribute.id}" class="ezsr-current-rating" style="width:{$rating.rounded_average|div(5)|mul(100)}%;">{'Currently %current_rating out of 5 Stars.'|i18n('extension/ezstarrating/datatype', '', hash( '%current_rating', concat('<span>', $rating.rounded_average|wash, '</span>') ))}</li>
-   {for 1 to 5 as $num}
-       <li><a href="JavaScript:void(0);" id="ezsr_{$attribute.id}_{$attribute.version}_{$num}" title="{'Rate %rating stars out of 5'|i18n('extension/ezstarrating/datatype', '', hash( '%rating', $num ))}" class="ezsr-stars-{$num}" rel="nofollow" onfocus="this.blur();">{$num}</a></li>
-   {/for}
 </ul>
 
 {'Rating: %current_rating/5'|i18n('extension/ezstarrating/datatype', '', hash( '%current_rating', concat('<span id="ezsr_average_', $attribute.id, '" class="ezsr-average-rating">', $rating.rating_average|wash, '</span>') ))}
@@ -19,6 +16,20 @@
 {ezcss_require( 'star_rating.css' )}
 {* Enable rating code if not disabled on attribute and user has access to rate! *}
 {if and( $attribute.data_int|not, has_access_to_limitation( 'ezjscore', 'call', hash( 'FunctionList', 'ezstarrating_rate' ) ))}
+    {def $rating_current_user = 0
+         $current_user = fetch( 'user', 'current_user' )
+    }
+    {def $rating_object = fetch_starrating_data( hash( 'contentobject_id', $attribute.contentobject_id, 'user_id', $current_user.contentobject_id ) )}
+    {if $rating_object}
+        {set $rating_current_user = $rating_object.0.rating}
+    {/if}
+    <p>{'Your rating:'|i18n('extension/ezstarrating/datatype')}</p>
+    <ul class="ezsr-star-rating">
+       <li id="ezsr_your_rating" class="ezsr-current-rating" style="width:{$rating_current_user|div(5)|mul(100)}%;">{'Your rating is %current_rating out of 5 stars.'|i18n('extension/ezstarrating/datatype', '', hash( '%current_rating', concat('<span>', $rating_current_user|wash(), '</span>') ))}</li>
+       {for 1 to 5 as $num}
+           <li><a href="JavaScript:void(0);" id="ezsr_{$attribute.id}_{$attribute.version}_{$num}" title="{'Rate %rating stars out of 5'|i18n('extension/ezstarrating/datatype', '', hash( '%rating', $num ))}" class="ezsr-stars-{$num}" rel="nofollow" onfocus="this.blur();">{$num}</a></li>
+       {/for}
+    </ul>
     {*
        eZStarRating supports both yui3.0 and jQuery as decided by ezjscore.ini[eZJSCore]PreferredLibrary
        For the JavaScript code look in: design/standard/javascript/ezstarrating_*.js

The other tweak is for the JavaScript code, so that whenever a user rates an article, the "your rating" display gets immediately updated. Since the Star Rating extension supports both jQuery and YUI 3, we need to update the code for each library:

 
--- extension\ezstarrating\design\standard\javascript\ezstarrating_jquery.js
+++ extension\yourextension\design\yourdesign\javascript\ezstarrating_jquery.js
@@ -27,6 +27,7 @@
         var args = $(this).attr('id').split('_');
         $('#ezsr_rating_' + args[1]).removeClass('ezsr-star-rating-enabled');
         $('li a', '#ezsr_rating_' + args[1]).unbind( 'click' );
+        $('#ezsr_your_rating').css( 'width', ( ( args[3] / 5 ) * 100 ) + '%' );
         jQuery.ez( 'ezstarrating::rate::' + args[1] + '::' + args[2] + '::' + args[3], {}, _callBack );
         return false;
     }
 
 
--- extension\ezstarrating\design\standard\javascript\ezstarrating_yui3.js
+++ extension\yourextension\design\yourdesign\javascript\ezstarrating_yui3.js
@@ -26,6 +26,7 @@
         var args = e.currentTarget.getAttribute('id').split('_');
         Y.all('#ezsr_rating_' + args[1]).removeClass('ezsr-star-rating-enabled');
         Y.all('#ezsr_rating_' + args[1] + ' li a').detach( 'click', _rate );
+        Y.all('#ezsr_your_rating').setStyle( 'width', ( ( args[3] / 5 ) * 100 ) + '%' );
         Y.io.ez( 'ezstarrating::rate::' + args[1] + '::' + args[2] + '::' + args[3], { on : { success: _callBack } } );
     }
 

Comments

blog comments powered by Disqus

Contact

604-637-6396
hiATmugo.ca

#414-207 W. Hastings St
Vancouver, BC
Canada


RSS icon Twitter icon

We have been using this team for editing, consulting, support and training services in North America for the last 3 years and we still do. The team has shown their expert knowledge of our systems, and is responsive and dedicated. The services they provide include expert consulting on eZ Publish towards large, high-traffic enterprise customers.

CEO Aleksander Farstad , eZ Systems

I relied on Mugo for the development of two complex web applications, and I was extremely impressed with their accurate estimates, consistent and timely delivery of production code, and commitment. They have the rare blend of business knowledge and deep technical expertise, and they excel at listening to business requirements and translating those requirements into intelligent and reliable software products. They are able to work on all aspects of software solutions -- front end/UI, core code, modules and extensions, application integration, and infrastructure -- and they are extremely capable in all of those areas. I highly recommend Mugo to anyone in need of a competent and dependable technology partner.

Co-Founder Graham Tillotson, Tandem, Chicago

Mugo maintains and develops new features for the Rasmussen Reports website, www.rasmussenreports.com. We are impressed with how efficiently they deliver high quality solutions that exactly fit our needs. The Mugo team understands the complexity of our high traffic website and was able to improve our site's overall performance, as well as its search engine rating. For our site's subscribers, Mugo quickly and efficiently developed many new features for our Premium Section.

The Mugo team is great to work with, and I look forward to a long and productive relationship.

Stephen W Smith, Interim CEO, Rasmussen Reports

If you ask me what is the first thing you think of about the Mugo team, I would say that they listen.

For a customer, the worst thing is to work with a partner that doesn't listen to you. That doesn't understand your points. That simply doesn't listen and try to help you.

Daniel Iribarren, ClearCap

Mugo Web is not another service provider. They are your partners.
One of the things I really like about the Mugo team is that they care about my project and myself. That is why I call them my partners.

Daniel Iribarren, ClearCap

Mugo Web is not just a group of geeks. They are a team of highly knowledgeable technology and business people.
They understand that they are helping you to design solutions to satisfy or solve business problems. And not every developer is able to deliver that. I have worked with more than 10 different let's says production centers and what they delivered to me was geek stuff. Not business solutions.
Mugo Web will help you to use geek stuff to solve business problems.

Daniel Iribarren, ClearCap

It's been a pleasure working with Mugo Web. They are fast, efficient and always helpful. They respond positively to questions and offer great solutions to technical problems.

Susan Wright, Director of Operations, Toronto Arts Council and Foundation

We've been extremely pleased with the work Mugo has done for us. They have been responsive and understanding in dealing with the complexities of our needs.

Wendy Prugh, Program Manager, The Christian Science Monitor

The team members we work with at Mugo have demonstrated a high caliber of competency in the work they do, and it instills great confidence in us to know that we have such quality professionals in our corner. Their consistent delivery has helped us develop a fluid system for enacting change and improvements on our website. We certainly look forward to continuing this relationship!

Wendy Prugh, Program Manager, The Christian Science Monitor

Thank you very much Mugo Web for the website work you've done for our company. You valued & respected our time. You produced quality work. You paid attention to detail and understood the JPLradio concept. Most importantly, we appreciate the good business ethic of our contact person your company provided. For that, I/we thank you.

Troy B. Williams, Founder & Program Director, Just Positive Lyrics Radio

We thoroughly enjoy our working relationship with Mugo Web. They are customer-focused, take the time to listen, give good solid advice with our best interests in mind, and have a quick turnaround time. We've had a number of compliments on the new website, which looks goods, functions well, and performs solidly.

Paul O'Sullivan, IT Specialist, New Society Publishers

From our first contact, the team at Mugo has shown an unprecedented level of commitment to our web projects... ending almost 4 years of struggling! In the three months Mugo worked on our new version -- which had stalled with our previous developers -- we have made more progress than ever before. They are fast, precise and thorough, and definitely stand out in the industry!

Sébastien Michel, Director, Frogs-in-NZ

Tweets

Follow Mugo on Twitter