This tutorial shows you how you can capture and display ratings of your items from your visitors. You will set up a Ratings Display element to display the current average rating and the total number of ratings. Then using a Ratings Input element, you'll capture your visitor's rating, calculate the new average rating and total number of ratings, and then update the collection and the Ratings Display element with the new values.
You'll need a collection with items you want to let your visitors rate and a page with a dataset connected to that collection.
This tutorial has 3 parts:
This section covers what you need to prepare in your collection and what you need to do in your page in the Editor.
A Ratings Display element connected to the new Number fields in your collection.
A Ratings Input element your visitors can use to pick a rating for the item. You can use the default setting for the ratings, or define your own. Do not connect it to the dataset.
This section has 2 parts. The first part shows you how to add the event handler to the Ratings Input element. The second part has the actual code that you can copy and paste onto your page.
An event handler adds code that only runs when your visitor performs a certain action. In our code, we used the "onChange" event, so that the rating is saved when our visitor makes their selection in the Ratings Input.
To add the event handler:
Select your Ratings Input.
In the Properties & Events panel, hover over "onChange", click the + icon, and then press Enter.
The code for the event handler is added to the bottom of the Code panel. The image below shows what it looked like on our page.
Copy Code
export function ratingsInput1_change(event) {// Add your code for this even here:}
Copy Code
$w("#dataset1").onReady(() => {// get the current item from the datasetconst currentItem = $w("#dataset1").getCurrentItem();// get the current average rating, number of ratings, and//total ratings for the current dataset itemconst average = currentItem.avg;const count = currentItem.numRatings;const total = currentItem.totalRatings;// get the new rating from the ratings inputconst newRating = $w('#ratingsInput1').value;// calculate the new average rating based on the current//average and countconst newAverageLong = (total + newRating) / (count +1);// Round the average rating to 1 decimal pointconst newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);// set the dataset fields to the new average, total// ratings, and number of ratings$w('#dataset1').setFieldValues({'avg': newAverageShort,'totalRatings': total + newRating,'numRatings': (count + 1)});// save the dataset fields to the collection$w('#dataset1').save().catch((err) => {console.log('could not save new rating');});});
First we read the current item from the dataset. Then we define variables called average
, count
and total
, and set their values to be the item's current average rating, number of ratings, and the sum of all the ratings.
Copy Code
const currentItem = $w("#myDataset").getCurrentItem();const average = currentItem.averageRating;const count = currentItem.numRatings;
We define a variable called newRating
and set its value to be the rating selected by the user in the Ratings Input.
Copy Code
const newRating = Number($w('#ratingsInput1').value);
Next we calculate the updated average rating and save it to a variable called newAverageLong
. We then round the results to 1 decimal place and assign it to the variable newAvergeShort
.
Copy Code
const newAverageLong = (total + newRating) / (count + 1);const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);
Now we save the new average rating, sum of all the ratings, and total number of ratings to the current item. We include code to deal with errors should they occur.
Copy Code
$w('#dataset1').setFieldValues({'avg': newAverageShort,'totalRatings': total + newRating,'numRatings': (count + 1)});$w('#dataset1').save().catch((err) => {console.log('could not save new rating');});});}