Welcome to part two of our miniseries of how to use the Star Rating visual element in Bubble. In the previous video you can see how we pick Bootstrape Star Rating Input out of the Bubble plugin catalogue. How we insert it into a page and set it so that a user can input a value say 3.5 and how that value is saved into the database and displayed on the page when it reloads.
How to display an average star rating
Now the shortcomings of this are that if another user come along and rate it 1.5 then that value is saved into the database and becomes the rating. Whereas really we want to display an average.
Now we could use make rating into a list and say we could have had the 4.5 value and the 2.5 value in that list and then displayed an average. But the reason that's not so great is that whatever user came along and changed their value, there's no way in Bubble to match the value that the user gave and then update that. So we would just end up with another value added in to the ratings. So what do we do?
Well I think we need another data type to do this because we need to be able to identify the user who leaves the value. So we can call this rating. And then rating only needs to have a few fields. We know who created it User and then we also need to have a value which is a number. And then we need to have the Product as type Product.
So look at the workflow we currently have. This just saves the change into the database.
So let's start somewhere. So when the Star ratings value is changed then we need to create a new data type and product is going to be created. New rating. There we go. Product is current page product. I can recall that value because my page is set to product and you can see that when my page loads I get the products unique ID up here in the slug.
Then rating value, this Star ratings value. Okay, so let's see what that does.
Allow users to change their star rating
Let's say I change my mind and give it five. Okay. Hopefully in our database we now have two rating entries, four and five. Now we don't want that to happen.
We want to be able to update our previous ratings so we can add in only when statements here. So do when search for rating where product equals current page product and created by equals current user. And then we can do account and only when this is 0. So we only wanted to create a new rating if the current user hasn't already created the rating for that product. So we then need to account for the other eventuality which is that they're making an update. So I've copied and pasted my workflow and this time I'm going to say is not 0.
Instead of creating a rating we need to update a rating. So things to update. And we get this with a do a search for rating where product equals current page product and created by equals current user. And then there's only going to be one result. So we can refer to the first item and then we change the value to this star rating's value.
And now I'm just going to delete these two so they don't cause issues.
Okay, now let's see what happens. So current user makes it 4. Let's have a look in our database. Yes, there we go. We have a new ratings with value 4, but then they change their mind.
So the same user says actually 2 instead and refresh the data. There we go, value of two. Now how do we display that on the front end?
So I think we're going to end up with two star ratings. Here one that displays the average and one that displays what an individual user has input it.
So I'm going to copy and paste it. And then let's make this one's the one that our workflows are attached to. So I'm actually going to put that below because that's the one that I want to change just to put user input and then we'll call this one average.
Okay. And we'll just make this one a little bit smaller. So this one is the average. So we want to disable it so that users don't get confused by putting their mouse over it. It's just literally going to display a star rating value.
Displaying average and the star rating input field
And then we need to input initial content. So what's initial content? Well, it's do a search for rating where product equals page. This will display all of the ratings for that particular product. And then we want each item as a value and then average.
Let's test that.
Okay, so let's change this to 4. And it goes up to 4. That's because only one user is making the changes. Let's change this back down to 0.5 and becomes 0.5. And because we're using an average, this then means that when other users were to come along and they would update this bottom value, obviously you need to label it really clearly which ones which to avoid confusion. But it means that this top value accurately displays an average of all of the ratings, all of the entries in the database for ratings for that product.