Star-Rating

Hy Chris,
thanks for the Plugin its awesome and i have been looking for somethink like it for a lon time.

Since i also needed the Star rating funktionality i made myself a little quick ad dirty Javascript Workaround and want to share it, because by searching for it i realised, that many others would like it aswell.

Here is what i did:

• add a custom field type “text” fith the name “rating” to your form
• in your view add the “rating”-field type “text” with class “testimonial-rating-stars”
• add the following code on the page where your form is displayed:

  <script type="text/javascript">
  	jQuery( document ).ready(function() {
  		//FORM
  		var feedback_rating_field = jQuery('#wpmtst_rating');
  		feedback_rating_field.before('<div class=""><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="1"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="2"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="3"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="4"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="5"></a></div>');
  		feedback_rating_field.css({
  			'visibility' : 'hidden',
  			'height' : '0',
  			'margin' : '0',
  			'padding' : '0',
  		});
  		jQuery(document).on("click","a.rating-star",function() {
  			var clicked_star_value = jQuery(this).attr('data-ratingstar');
  			feedback_rating_field.val(clicked_star_value).attr('value',clicked_star_value);
  
  			jQuery('a.rating-star').removeClass('active');
  			jQuery.each( jQuery('a.rating-star'), function( key, value ) {
  				if(jQuery(this).attr('data-ratingstar') <= clicked_star_value){
  					jQuery(this).addClass('active');
  				}
  			});
  		});
  	});
  </script>

• add the following code on the page where your output is displayed:

  <script type="text/javascript">
  			jQuery( document ).ready(function() {
  				//OUTPUT
  				var stars_output_wrapper = jQuery('.testimonial-rating-stars');
  				var stars_output_value = stars_output_wrapper.text();
  				stars_output_wrapper.empty();
  				var arr = [1,2,3,4,5];
  				var output_stars = '';
  				jQuery.each(arr, function (index, value) {
  					if(value <= stars_output_value){
  						var star_class = ' active';
  					} else{
  						var star_class = '';
  					}
  					output_stars += '<a href="javascript:void(0)" class="fa fa-star rating-star'+star_class+'" data-ratingstar="'+value+'"></a>';
  				});
  				stars_output_wrapper.append(output_stars);
  				stars_output_wrapper.fadeIn();
  			});
  		</script>

• give the stars some css

i hope this helps even if it’s just quick and dirty and might not be for everyone.

luckyluggi,
good, but if i leave more than one review, rating gets one at all. How resolve it, or Chris Dillon plans to make it in future?