How to display an average rating with the Star Rating plugin

Understanding the Star Rating Plugin in Bubble

Welcome to part two of our mini-series on how to use the star rating visual element in Bubble. In the previous video, we covered how to select this element from the Bubble plugin catalog, insert it into a page, and set it up so that a user can input a value (e.g., three and a half stars) which is then saved into the database and displayed on the page when it reloads.

Limitations of the Basic Star Rating Implementation

The shortcomings of this approach are that if another user were to come along and rate it one and a half stars, that value is saved into the database and becomes the rating, whereas we really want to display an average. We could use a "make rating into a list" approach, so we could have had the 4.5 value and the 2.5 value in that list and then displayed an average. However, the reason that's not ideal is that when a user changes 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 to the ratings.

Creating a New Data Type for Ratings

To solve this, we need to create another data type. We'll call this "rating," and it only needs to have a few fields: the user who created it, the value (which is a number), and the product (of type product).

Setting Up the Workflow

Let's look at the workflow we currently have. This just saves the change into the database. We need to start somewhere, so when the star rating's value is changed, we need to create a new data type. We'll set the product to the current page product, and the rating value to the star rating's value.

Implementing Conditional Rating Creation

To prevent multiple ratings from the same user, we can add an "only when" statement. We'll do a search for ratings where the product equals the current page product and created by equals the current user. We'll only create a new rating if the count of this search is zero.

Updating Existing Ratings

For the case where a user is updating their existing rating, we'll create another workflow. This time, we'll update the rating when the count is not zero. We'll search for the rating where the product equals the current page product and created by equals the current user, then change the value to the new star rating value.

Displaying the Average Rating

To display the average rating on the front end, we'll need two star ratings: one that displays the average and one that displays what individual users have input. For the average rating, we'll disable it so users don't get confused. We'll set its initial content to do a search for ratings where the product equals the current page product, then take each item's value and average it.

Testing the Implementation

Let's test our implementation. When we change the rating to four stars, the average updates to four. When we change it back to 0.5 stars, the average becomes 0.5. This setup means that when other users come along and update the bottom value, the top value will accurately display an average of all the ratings for that product.

Conclusion

By implementing this system, we've created a more robust and accurate star rating feature in our Bubble app. Remember to label the two star ratings clearly to avoid confusion for your users. This approach allows for individual user ratings while maintaining an accurate average display for all users.