[Resuelto] Review system how to get average rating

[Autor]

Mensajes

[willem-siebeS]

Hi,

In a earlier post I asked if I could build a review system with TVC toolset. It seemed that it has been done earlier, so I got the link to this post.
Soon I discovered I'm not alone in this journey. However, in this 'tutorial' images where used to make the review system work. In my case I managed to get the review system working with:

- jQuery star rating (hidden link)
>>> This is used on the form where they submit the rating (this are 'radiobuttons' in reality)
- FontAwesome stars + half stars + CSS
>>> On the frontend I show stars from Font Awesome instead of image.

Everything working sofar. But... as mentioned earlier, to get the average rating of all reviews on a (product)page is very important. The script below is not working for me, can it be adjusted that it also workes with this 'improved' version of the review system?

So when people submit a review they choose a radio button with one of these values:

.5
1
1.5
2
2.5
3
3.5
4
4.5
5

Alle the votes from the individual reviews should become a total value divided by the number of reviewers. This average rounding in the below code looks fine because font awesome can show half stars also.

// Adds Calculation of average and shortcode for ratings in Views Tips
add_shortcode('rating-average', 'rating_average_func');
function rating_average_func()
{
    global $post;
    $args = array(
       'post_type' => 'reviews',
        'meta_key' => '_wpcf_belongs_' . $post->post_type . '_id',
        'meta_value' => $post->ID,
    );
    $child_posts = get_posts($args);
            
    $sum = 0;
    $num = 0;
    foreach ($child_posts as $child_post) {
        $ratings = get_post_meta($child_post->ID, 'wpcf-reviewrating', true);
        if($ratings)
        {
            $sum += $ratings;
            $num ++;
        }
    }
    $average = 0;
    if($num>0)
    {
        $average = $sum/$num;
    }
    $res = $average;
    if($average==0) $res = 0;
    if($average>0.001 && $average<0.5)$res = 0.5;
    if($average>0.501 && $average<1) $res = 1;
    if($average>1.001 && $average<1.5) $res = 1.5;
    if($average>1.501 && $average<2) $res = 2;
    if($average>2.001 && $average<2.5) $res = 2.5;
    if($average>2.501 && $average<3) $res = 3;
    if($average>3.001 && $average<3.5) $res = 3.5;
    if($average>3.501 && $average<4) $res = 4;
    if($average>4.001 && $average<4.5) $res = 4.5;
    if($average>4.501 && $average<5) $res = 5;
//... here put more condition ...
    return $res;
}
 
//Calculates and displays the number of reviews in a post
add_shortcode('reviews_total', 'reviews_total_func');
 
function reviews_total__func()
{
    global $post;
    $args = array(
'posts_per_page'   => -1,
       'post_type' => 'reviews',
        'meta_key' => '_wpcf_belongs_' . $post->post_type . '_id',
        'meta_value' => $post->ID,
    );
    $child_posts = get_posts($args);
    return count($child_posts);
}

[Luo Yang Supporter Languages: Inglés (English ) Chino simplificado (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Hi willem-siebeS,

I assume we are talking about the thread:
https://toolset.com/forums/topic/how-to-get-rating-average-from-cred-for-review/

In that thread, the user is using Types create a child post type "restaurant-cafe-rev", save ratting as a custom field,
But as you mentioned above, you are using another Review system, jQuery star rating (hidden link)
It is out of the range of Toolset, I suggest you try our official Toolset Custom Development Services
hidden link
Or our certified partners:
https://toolset.com/consultant/

[willem-siebeS]

Hi Luoy,

Yes that's the thread. But I also made my review system with TVC ofcourse. I followed that tutorial.
The only difference is I did not want to work with images.

So for the radio buttons on the review form where people leave there rating I use jQuery so the radio buttons have an appearance like a star.
For the actual reviews I use FontAwesome + CSS to get the stars visible instead of the numeric value.

But for the rest it is all TVC just like the other review system, only he is working with images because he couldn't get it to work with jQuery.

I show you here what I did: hidden link

Kind regards,

Willem

[Luo Yang Supporter Languages: Inglés (English ) Chino simplificado (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

I watched the screencast you mentioned above, nice star rating system

As you mentioned above:
The script below is not working for me, can it be adjusted that it also workes with this 'improved' version of the review system?

Does the shortcode [rating-average] return correct result?
If it is correct, I assume all you need is output the average rating as a CSS class: "r-1,2,3,4,5..."
you can put the shortcode into your view content as this:
<div class=".. r-[rating-average]">

[willem-siebeS]

Hi Luoy, thanks for the compliment :-). All made possible bij TVC ofccourse :-).

OK, the [rating-average] seems to work all fine! To be honest, that was a suprise for me because the last time I did not had a positive result for that, but maybe I just did some stupid thing wrong at that time. So one problem solved here :-).

Only the other shortcode is not working, but this time I managed to solve it myself :-). You can see two errors in the code:

reviews_total : I changed to reviews-total (maybe not a real error but it is consisten with the other shortcode);
function reviews_total__func() >> one "_" to many, so I deleted that.

Thanks for your help. I know have an almost awesome review system, only waiting for an improved CRED form where reCaptcha is not necesarry and which is twitter bootstrap friendly :-).

Ciao!

[willem-siebeS]

I found my old html back, and then i was using [rating_average] instead of [rating-average], sometimes it's that simple to make an error ;-).

[triggeru571]

Hi Willem,

I will be trying to shift from images (as per my tutroial https://toolset.com/forums/topic/how-to-get-rating-average-from-cred-for-review/ which you used to partly create the above) to fontawesoms as you have done. Would you mind sharing the CSS you used? I tried to look at your site but cannot access it. There is a cached copy but it's difficult to decifer what was done. Would you mind sharing? Thanks

[willem-siebeS]

I will send you mail.

[chrisG-5]

Hi Willem,

I also have a ratings system setup using the method shared by triggeru571. It would be great if you could share your CSS here for those of us who used the excellent solution from triggeru571 and want to move away from star images.

Thanks for your time.

[willem-siebeS]

Here is the CSS/LESS I used:

					/* FONT-AWESOME STERREN */

					.reviewrating { // eigenlijk overbodige class omdat het ook onder .rating kan
						float: left;
						margin: 0 7px 0 0;
					}

					.rating {
						font-family: FontAwesome;
						position: relative;
					
						&:before {
							content: "\f005\f005\f005\f005\f005";
							color: #9b9b98;
						}

						&:after {
							color: #ff9900;
							position: absolute;
							left: 0;
						}

					} // end .rating

					.r-\.5:after {
						content: "\f0890a0";
					}

					.r-1:after {
						content: "\f005";
					}

					.r-1\.5:after {
						content: "\f005\f0890a0";
					}

					.r-2:after {
						content: "\f005\f005";
					}

					.r-2\.5:after {
						content: "\f005\f005\f0890a0";
					}

					.r-3:after {
						content: "\f005\f005\f005";
					}

					.r-3\.5:after {
						content: "\f005\f005\f005\f0890a0";
					}

					.r-4:after {
						content: "\f005\f005\f005\f005";
					}

					.r-4\.5:after {
						content: "\f005\f005\f005\f005\f0890a0";
					}

					.r-5:after {
						content: "\f005\f005\f005\f005\f005";
					}

Kind regards,

Willem
PS To use LESS I use plugin wp-less.

[vickiM]

I'm not sure if willem or triggeru571 will see this message, but I was wondering if you'd be willing to post more details about how the html/css works for this. I really appreciate the thread here: https://toolset.com/forums/topic/how-to-get-rating-average-from-cred-for-review/ and I think I've got things working, but I'm having two problems. One is displaying the radio buttons as stars in the CRED form, and two is using FontAwesome as you've described above. I started out with images, but agree that FontAwesome seems a better way to go. I'm embarrassed to say, I couldn't figure out the html you'd use for the CSS you posted willem and I don't know what LESS does. I suspect there are others following these threads for creating star ratings, so this info might help others too.

[willem-siebeS]

Hi,

I'm going to start writing a guest tutorial for TVC toolset next month, I think I split it into two:
1) How to install LESS on your WP theme;
2) How to build review system (with the needed less for the stars)

Kind regards,

Willem

[vickiM]

Yeah! I only wish you were doing it THIS month! 🙂

[willem-siebeS]

Yup, I already had two others who were hoping I did it last year and beginning 2014. But with writing tutorials I don't make a living, so I have to prioritize too ;-).

[vickiM]

I understand, just wanted to add my two cents. Will look forward to it.