Example: RatingsInput and RatingsDisplay

# RatingsInput #RatingsDisplay #Lightbox #Repeater

Use the RatingsInput components to rate recipes, and display the results using the RatingsDisplay component. The main page displays all of the recipes in a Repeater, and a Lightbox displays the full recipe and rating.

Go to the Ratings Example page.

See more examples at Gramp’s Workbench .


Can you please share the code you used to calculate the average? I’m trying desperately to follow the tutorial on Wix about capturing and displaying ratings, but I want to be able to also show things like company name, reviewer name, comments, etc. along with the rating AND average rating + total number of ratings. I tried to careful modify the code, but it’s not working. This is the code I used:

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

$w.onReady( () => { ////// I added this extra bit of code to make sure visitors are logged in before reviewing
if (wixUsers.currentUser.loggedIn) {
$w(“#text141”).text = “Share Your Experience”;
else {
$w(“#text141”).text = “Please Login First”;
} );

export function button2_click(event) {
$w(“#dataset1”).onReady(() => {
// get the current item from the dataset
const currentItem = $w(“#dataset1”).getCurrentItem();

// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem.avg;
const count = currentItem.numRatings;
const total = currentItem.totalRatings;

// get the new rating from the ratings input
const newRating = $w(‘#ratingsInput1’).value;

// calculate the new average rating based on the current
//average and count
const newAverageLong = (total + newRating) / (count +1);
// Round the average rating to 1 decimal point
const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);

// set the dataset fields to the new average, total
// ratings, and number of ratings
‘venueName’: $w(‘#input2’).value,
‘reviewersName’: $w(“#input1”).value,
‘weddingDate’: $w(“#datePicker1”).value,
‘rating’: $w(“#ratingsInput1”).value,
‘comments’: $w(“#textBox1”).value,
‘avg’: newAverageShort,
‘numRatings’: total + newRating,
‘totalRatings’: (count + 1)

////// I’d also like visitors to be able to upload a photo with their review, but haven’t been successful yet

// save the dataset fields to the collection
. catch ((err) => {

$w.onReady( function () { ///// this bit of code is to disable the review submit button after review is sent
$w(“#button2”).onClick( (event) => {
let $item = $w.at(event.context);
$item(“#button2”).label = “SENT!”;
$item(“#button2”).style.backgroundColor = “#D1D4E0”;
.then( () => {
console.log(“Button now disabled”);
} );
} );

Open the example’s template in your editor to see all of the code.

@yisrael-wix Hi. I can’t load this and some other templates through your site.

Hello @yisrael-wix , so after about 2 hours of looking at this code I think I started to understand every part of the code and its function. Using the template editor, I removed and renamed a lot of stuff to fit with my website, and so far it works (on the test editor).

My concern is that I want this to work with a dynamic page on my official site, rather than a Lightbox. When the the page loads, It needs to identify the page and give it an ID, after that it I loads the ratings statistics. In the Lightbox version the code looks something like this:

let gameID;
   gameID = wixWindow.lightbox.getContext();

But what would I place instead of lightbox.getContext(); as its only for lightboxes, not pages, or dynamic pages.

(Also the website I’m referring to is https://www.kompotgames.com)


Hello @Yisrael (Wix), I’m trying to understand how your example works to use RatingsDisplay and RatingsInput on my website… in the test editor everything works properly, but when I publish the site the RatingsDisplay in the Lightbox does not update to the new values chosen with the RatingsInput … I can’t understand why, can you help me?
Thank you so much

1 Like

I had similar problems with the wish list, check that the permissions of the database are open because if only the admin can delete or write to the database it brings problems on the published page, remember that when you are in the editor so You are generally logged in as admin.