Ajax starrating gadget

Een tijdje geleden heb ik met behulp van een CMSMS plugin en Jquery script een Ajax starrating gadget op mijn website toegevoegd.

Bezoekers van mijn website kunnen na het lezen van een pagina of blog een waardering [1.. 5] sterren geven. 5 sterren ik vind de pagina top .... 1 ster ik vind de pagina niks. Over het totaal van de beoordelingen wordt een gemiddelde berekend en weergegeven. Wil je ook een Ajax starrating gadget op je website hebben lees dan verder.

Bestaande oplossingen

Voordat ik van start ging met het schrijven van een eigen programma heb ik naar de CGFeedback en AjaxStarRatingBar module gekeken. In een kant-en-klare oplossing vond ik niet helemaal wat ik wilde daarom de volgende oplossing.

Een eigen implementatie

Voordat je begint zorg ervoor dat je pretty url's werkend hebt.

Een plugin om starrating data uit te lezen en op te slaan

• Ga naar de CMSMS forge
• Download: 'function.starrating.php'
• Plaats: 'function.starrating.php' in $document_root/plugins

Een database om starrating data in op te slaan

Bovenstaande plugin leest en schrijft data in een mysql database. Je moet deze tabel met de hand aanmaken er wordt geen installer bijgeleverd.

CREATE TABLE IF NOT EXISTS `starrating` (
  `slot` varchar(11) NOT NULL,
  `total_votes` int(11) NOT NULL DEFAULT '0',
  `total_value` int(11) NOT NULL DEFAULT '0',
  `average` float(5,2) NOT NULL DEFAULT '0.00',
  `used_ips` longtext,
  `id` int(11) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=0;

starrating.js

• Plaats de volgende code in /js/starrating.js

function star_rating() {
        
        // set the current rating
    
        var rating_container = $('.rating-container');

        $(rating_container).each(function() {
                
                var slot = $(this).children("ul.rating-list").attr('id');                
                var star_rating = $('#'+slot);  
                var rating = $(star_rating).children("li:first-child");

                var init_data = {
                    slot : slot
                };   
   
        });
        
        // hover functions 
        
        $('.rating-list .rating').hover(
            // mouseover
            function() {
                
                var rating_text = $(this).text();
                var rating_id = $(this).closest('.rating-list').attr('id');
                
                $('#' + rating_id + ' ~ span.legend').text(rating_text);
            
            },
            // mouseout
            function() {

                var rating_text = $(this).text();            
                var rating_id = $(this).closest('.rating-list').attr('id');
            
                $('#' + rating_id + ' ~ span.legend').text('');
                
            }
            
        ); // /hover functions 
        
       // clickable stars
        
        $('.rating').bind('click', function() {
                
                var rating = this;
                var star_rating = $(this).parent();
         

                var rating_class = $(rating).attr('class');
                var rating_text = $(rating).text();
                var slot = $(star_rating).parent().attr('id');

                 
                var clicked_data = {
                    action : 'vote',
                    vote : $(rating).attr('title'),
                    slot : slot
                };
       
                
                // vote
                $.post(
                    '/starrating/',
                    clicked_data,
                    function(INFO) {
                        $(star_rating).data('json', INFO);
                        set_votes(star_rating);
                    },
                    'json'
                );
                
                
                
        }); // /clickable stars


}

function set_votes(star_rating) {
        
        var slot = $(star_rating).parent().attr('id'); 
        var text_slot = '#text-' + slot;       
        var total_votes = $(star_rating).data('json').total_votes;
        var rating_word = $(star_rating).data('json').rating_word;
        var percentage = $(star_rating).data('json').percentage + '\%';

        // update rating-list-text 
        $(text_slot).text(
            '[ ' + total_votes + ' ' + rating_word + ' ]'
           );
        
        // update current-rating style 
        $('ul#'+ slot + ' li:first-child').css('width', percentage);
                     
}

Voeg jquery en starrating.js toe aan je CMSMS pagina

<script src="/js/starrating.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>

<script type="text/javascript">
    google.load("jquery", "1.4.2");
</script>

<script type="text/javascript">    
    $(document).ready(function() {
        star_rating();
    });
</script>

CSS code voor het stylen van de starrating gadget

.star-rating {
    display: inline;
    float: left;
    width: 308px;
    padding: 10px 10px 0px 10px;
    background-color: #FFFFFF;
    border-top-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-bottom-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    height: 80px;
    display: inline;
    float: left;
}

.star-rating h3,
.social-media h3 {
    margin-bottom: 8px;
}

.rating-container {
    display: inline;
    float: left;
    width: 100%;
}

.rating-list-text {
    display: inline;
    float: left;
    width: 200px;
    height: 20px;
    color: #000000;
    padding-left: 5px;
}

.legend {     
    position: relative;
    top: -20px;
    left: -75px;
    width: 200px;
    height: 25px;
    color: #0086ad;
}

/* rating-list */

ul.rating-list,
ul.rating-list a:hover,
ul.rating-list a:active,
ul.rating-list a:focus,
ul.rating-list .current-rating,
ul.rating-list .rating-name {
    background: url('/images/star.gif') left -1000px repeat-x;
}

ul.rating-list {
    position: relative;
    width: 125px;
    height: 25px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    background-position: left top;
}

ul.rating-list li {
    display: inline;
}

ul.rating-list a,
ul.rating-list .current-rating {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -1000em;
    height: 25px;
    line-height: 25px;
    outline: none;
    overflow: hidden;
    border: none;
}

ul.rating-list a:hover,
ul.rating-list a:active,
ul.rating-list a:focus {
    background-position: left bottom;
}

ul.rating-list a.one-star {
    width: 20%;
    z-index: 6;
}

ul.rating-list a.two-stars {
    width: 40%;
    z-index: 5;
}

ul.rating-list a.three-stars {
    width: 60%;
    z-index: 4;
}

ul.rating-list a.four-stars {
    width: 80%;
    z-index: 3;
}

ul.rating-list a.five-stars {
    width: 100%;
    z-index: 2;
}

ul.rating-list .current-rating {
    z-index: 1;
    background-position: left center;
}

Voeg starrating plugin toe aan een lege pagina

• Maak een template aan met hierin alleen de {content} tag

Opmaak sjablone -> Sjabloon toevoegen
"template-empty" : {content} [Versturen]

• Maak een nieuwe pagina aan met hierin de {starrating} plugin

Inhoud -> Pagina's -> Nieuwe inhoud toevoegen

titel: starrating
menutext: starrating
inhoud: {starrating}
opties -> sjabloon: template-empty

Koppeling van starrating aan CGBlog

Aan de hand van CGBlog laat ik zien hoe je starrating kunt activeren op een blog artikel. Uiteraard ook toe te passen op andere modules of CMSMS pagina's:

Inhoud -> Calguys Blog module [Detail Sjablonen]

Sjabloon tekst: [Verstuur]

<div class="star-rating">
<h3>Beoordeel deze blog</h3>

{capture assign='slot'}blog-{$entry->id}{/capture}
{capture assign='rubish'}{starrating slot=$slot silent='1'}{/capture}

    <span class="rating-container">  
        <ul class="rating-list" id="{$slot}">
            <li class="current-rating" style="width:{$starrating.percentage}%;">{$starrating.total_value} / {$starrating.total_votes} ({$starrating.average})</li>
            <li><a title="1 star out of 5" class="one-star rating">Niks</a></li>
            <li><a title="2 stars out of 5" class="two-stars rating">Redelijk</a></li>
            <li><a title="3 stars out of 5" class="three-stars rating">Ok</a></li>
            <li><a title="4 stars out of 5" class="four-stars rating">Goed</a></li>
            <li><a title="5 stars out of 5" class="five-stars rating">Top</a></li>
        </ul>

        <span class="rating-list-text" id="text-{$slot}">[ {$starrating.total_votes} {$starrating.rating_word} ]</span>
  
        <span class="legend"> </span>

    </span><!-- /.star-rating -->

Afbeelding van een ster

Maak een plaatje van 25 x 75 pixels plaats deze in: '/images/star.gif'.

In star.gif komen 3 sterren deze worden over de breedte (5 maal) herhaald:

Video

Voor een werkend voorbeeld bekijk onderstaande video.

Documentatie

• Komodomedia CSS StarRating