How to display an average rating with the Star Rating plugin
In this Bubble.io tutorial video we demonstrate the extra steps you'll need to take in order to display an average star ratings value that users can return to and update using the Bootstrap Star Rating Input visual element.
Unlock the power of star ratings: Learn how to display accurate averages and handle user inputs like a pro!
Master Bubble's database magic: Discover how to create a robust rating system that updates dynamically with each user interaction.
Transform your app's UX: Implement a dual star rating display that showcases both individual and average ratings effortlessly.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.