Hello, I have been working with the WIX code tutorial: Capture and Display ratings. I need to rate the page where I propose my affiliate program. I got stock because I don’t get if I need 2 DB collections with 2 DataSets and how I connect them with the rating display and the rating input. I have search for videos but didn’t find one that works for me. Maybe there is someone who has already set up both ratings (display and input)? thanks !
I have added my code so maybe someone can check it and mention where it is wrong:
Export function ratingsInput1_change(event) {
//Add your code for this event here:
$w(“#dataset4”).onReady(() => {
// get the current item from the dataset
const currentItem = $w(“#dataset4”).getCurrentItem();
// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem.avgRating;
const count = currentItem.ratingsSubmited;
const total = currentItem.ratingsSum;
// 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
$w(‘#dataset4’).setFieldValues({
‘avgRating’: newAverageShort,
‘ratingsSubmited’: total + newRating,
‘ratingsSum’: (count + 1)
});
// save the dataset fields to the collection
$w(‘#dataset4’).save()
. catch ((err) => {
console.log(‘could not save new rating’);
});
});
}
Here is a very simple example of the RatingsInput and RatingsDisplay components:
-
View the Live demo in a browser page
-
Open the Example template in the Wix Editor
Note : The RatingsInput component is on the RECIPE Lightbox page.
1 Like
Hi Yisrael,
tks for the reply, I have already checked that example, but the page code is not working for my case … anyway tks!
@francois69997 What isn’t working? Note that you can’t just copy page code to another page without making the necessary modifications (component IDs, collection names, etc).
If you continue to have problems, please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.
@yisrael-wix yes of course, I have followed the WIX code tutorial and make the changes accordingly to point 2 of the tutorial:
- Make sure to make these substitutions:
- ‘#myDataset1’: the ID of your dataset
- avg: the field key of the field in your collection that holds the average rating
- numRatings: the field key of the field in your collection that holds the total number of ratings received
- totalRatings: the field key of the field in your collection that holds the sum of all ratings received’
#ratingsInput1’: the ID of your Dropdown element
These substitutions have been made:
- Dataset name: #dataset4 (connected to Data Base collection, Mode: Read & Write)
- avg: field key = averageRating
- numRating field key = ratingsSubmited
- totalRatings field key = ratingsSum
One thing that I’m wondering is: Is it necessary to add some numbers in the const newAverageLong ?
// calculate the new average rating based on the current
//average and count
const newAverageLong = (total + newRating) / (count +1);
You still have not stated what isn’t working? What happens when you enter a rating? When you display?
Have you tried out the example I posted? It’s a fully tested and working example.
@yisrael-wix When I try the Rating Input, i can hover over the options and select one. However, the Rating Display stays at default. In the page code I get a message “script error”. When I return to the data base collection there is no input. Now just to clarify, I have created:
- 1 data base collection with 3 number fields; average, count, total
- 1 data set connects to the collection above; mode read & write (number of items to display 20)
- 1 Rating Display connects to the dataset (rating value connects to: count - Number of ratings connects to total)
- 1 Rating Input with 5 ratings : Now here is the thing that I found strange, in the tutorial Velo Tutorial: Capturing and Displaying Ratings | Help Center | Wix.com it reads: 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.
So maybe I’m missing one element or missed to connect the Rating Input? My webpage is: https://www.finlandweeks.com/affiliate-program
Voilà. Looking to your comments, tks
You do not need Dataset.onReady() - that is only needed if you need to do something in the page’s onReady() event handler and need to make sure the the dataset is ready when the page is.
The reason that you are getting a “script error” is because you getting the dataset’s current item, but there is no current item. Since you want to create a new rating, you will need to create a new item in the dataset for this rating. Something like this:
let currentItem = $w(‘#dataset4’).new();
This will add a new item to the dataset on which you can save the details of this new user rating.
@yisrael-wix well I’m no sure I get it. Maybe it is easier for me if you can type the changes directly in the code. Bellow, I have added my code:
export function ratingsInput1_change(event) {
$w(“#dataset4”).onReady(() => {
// get the current item from the dataset
const currentItem = $w(“#dataset4”).getCurrentItem();
// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem.averageRating;
const count = currentItem.ratingsSubmited;
const total = currentItem.ratingsSum;
// 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
$w(‘#dataset4’).setFieldValues({
‘averageRating’: newAverageShort,
‘ratingsSum’: total + newRating,
‘ratingsSubmited’: (count + 1)
});
// save the dataset fields to the collection
$w(‘#dataset4’).save()
. catch ((err) => {
console.log(‘could not save new rating’);
});
});
}
@francois69997 Get rid of:
$w(" #dataset4 ").onReady(() => {
And add this:
let currentItem = $w(’ #dataset4 ').new();
@yisrael-wix yes I did but now I get a parsing error: Identifier ‘currentItem’ has already been declared. Bellow the code w the changes you mentioned:
export function ratingsInput1_change(event) {
let currentItem=$w(‘#dataset4’). new ();
// get the current item from the dataset
const currentItem = $w(“#dataset4”).getCurrentItem();
// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem.averageRating;
const count = currentItem.ratingsSubmited;
const total = currentItem.ratingsSum;
// 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
$w(‘#dataset4’).setFieldValues({
‘averageRating’: newAverageShort,
‘ratingsSubmited’: total + newRating,
‘ratingsSum’: (count + 1)
});
// save the dataset fields to the collection
$w(‘#dataset4’).save()
. catch ((err) => {
console.log(‘could not save new rating’);
});
});
}
Now I get parsing error: unexpected token?
export function ratingsInput1_change(event) {
let currentItem=$w(‘#dataset4’). new ();
// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem. averageRating;
const count = currentItem. ratingsSubmited;
const total = currentItem. ratingsSum;
// 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
$w(‘#dataset4’).setFieldValues({
‘averageRating’: newAverageShort,
‘ratingsSum’: total + newRating,
‘ratingsSubmited’: (count + 1)
});
// save the dataset fields to the collection
$w(‘#dataset4’).save()
. catch ((err) => {
console.log(‘could not save new rating’);
});
});
}
We appreciate your interest in getting the most out of Wix Code and how much you want to learn. Please understand that if you are going to work with code extensively in the product and not just the features in the user interface, you will need to familiarize yourself with basic coding concepts to accomplish what you want. We are happy to get you pointed in the right direction and get you started with what the code should look like, but you’ll need to take it from there.
You may also want to check out the WixArena - it’s a hub where you can look for Wix Code (and other) experts for hire.
@yisrael-wix Hi Yisrael, I appreciatie you posting the example Ratings code. I have a question: why is the database empty? For instance, if you click on “Mexican Hot Cocoa” there are 81 reviews on it. But when I go to your database there are no Review Number Fields. Where are the Reviews stored? That’s the issue im running into. I posted a screenshot of what I mean
@joelsf15 Are the rating on the Preview or the Live site? If on the Live site, you will see the data in the Live database.
Having similar issues. I have a display and a user input ratings system. Not sure if the Code is right but the dataset/collection is there. Difference is i have and want 3 ratings on same page. So i have 3 displays and 3 inputs. Please help?
Here is my code:
$w.onReady(function () {
//TODO: write your page related code here…
});
export function ratingsInput1_change(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.averagerating;
const count = currentItem.number;
const total = currentItem.sum;
// get the new rating from the ratings input
const newRating = $w(‘#ratingsInput3’).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
$w(‘#dataset1’).setFieldValues({
‘averagerating’: newAverageShort,
‘sum’: total + newRating,
‘number’: (count + 1)
});
// save the dataset fields to the collection
$w(‘#dataset1’).save()
.catch((err) => {
console.log(‘could not save new rating’);
});
});
}
how does it work for modalyst dropshipping products that have no productID ? I tried replacing productID with InventoryItem which Modalyst provides but doesn’t work at all.