SOLUTION: Adding Separate Ratings and Reviews to Individual Dynamic Pages

Hi,

I finally figured out some kind of solution for adding ratings and reviews to individual dynamic pages and wanted to share it.

It's not perfect - there is one bit where you have to enter some content into a collection manually, but this was the only solution I could figure, so....

Hope this helps everyone, especially other total beginners like me!

Thank you to Lytude channel on Youtube for his videos, which really helped, and all the other forum members who posted about this topic!!

(This is going to be a bit of a complicated/long explanation - hope it's not too confusing and please read the whole post to see the final combined/edited code)

This is what my final page looks like now:

The Ratings Display element showing the Average Rating and the Total Number of Ratings is circled in red:

Below the grey strip with the Activity's information/content, I added another strip to hold the Ratings and Comments Input Fields and the Repeater that displays all the ratings and comments:

HOW I MANAGED TO CREATE THIS WAS:

I first found these videos on Youtube and followed what is shown and edited the code he shows and links to in the description of the Part 3 and 4 videos...

(there is a Part 5 as well, which I didn't need/use)

PLEASE SEE THE BOTTOM OF THE POST FOR THE EMBEDED VIDEOS :)

Like he shows in the videos, I created a Comments collection with a Reference field that references the collection that contains all the items shown on my dynamic pages (In my case, Activities, like 1.1 What is Collaborative Learning?, 1.2 Developing Collaborative Perspective, etc.)

Comments Collection:

Activities Collection - referenced in the Page Reference field above in the Comments collection:

When creating the Comments collection - my screens and where I had to go to select the Permissions on who can view, add, delete, and update content were a little different from what is shown in the video.

The Permissions is not shown/available to select on the Create Collection window:

So after entering the info, you need to click Create and then when the collection window opens (or you go to the side menu and open the collection)

There you click on More Actions > Permissions and Privacy, which will open that tab in the Edit Collection Settings window:

Since, unlike in the videos, I want to allow anyone to add a comment, and not just site members/people who are logged into my site (I do not have this option on my website), I selected Anyone for view, Anyone for add, Admin for delete and Admin for update content, as shown in the screenshot.

Also, in addition to the fields mentioned in the video, I added an additional field called Rating with the field type set to Number to collect the rating values that users input and another field called User Name to collect the name that users input in the Name Input element/box(shown above my comments input box).

Also, in the repeater element that displays all the comments entered, I added a Ratings Display element and made sure to attach it to the item, so it repeats in each item in the repeater.

I then clicked Settings and turned off the Show the number of ratings option (since I am showing the individual rating entered by each user here) - see the screenshot below:

I also then edited the code provided in the description of the PART 3 video, to take out all the elements/features I did not need, like member's profile id or picture etc, the loader icon, disabling comments if the user is not logged in and enabling them if they are, etc. and added in the code to insert the rating value that the user selects into my Comments Collection.

NOW, HERE IS WHERE THIS MIGHT GET A LITTLE COMPLICATED/CONFUSING (it was for me when I was figuring it out, lol!):

TO ADD THE AVERAGE RATING AND TOTAL NUMBER OF RATINGS:

I first created a second collection following the first part of this tutorial and then combined the code from this tutorial with the code from the videos:

https://support.wix.com/en/article/velo-tutorial-capturing-and-displaying-ratings

support.wix.com

The Wix Support Center has tons of videos, tutorials and demos available to help you create your free website. Just type in your question and go!

I called the second collection CommentRatings, and added the three Number type fields for the average rating, the total number/count of ratings, the total sum of ratings.

To keep it simple, I just named my fields avg, numRatings, and totalRatings, so I would not need to do too much substitution in the code.

In addition to what is in the tutorial article, I also added a Text type field called pageId and Reference type field called Page Reference and linked this reference field to my dynamic page collection (in my case the Activities collection), the same way shown in the Youtube video for the first Comments collection:

CommentsRating collection with arrows pointing to the 2 extra fields I added:

I then added a dataset, with the settings shown in the screenshot, to my page to link to the CommentRatings collection and linked the parts of the Ratings Display element to the avg and numRatings field:

And connected the top of the page RatingsDisplay element to the dataset as shown in this screenshot:

And edited the settings of the Ratings Display element so the Ratings text label shows "ratings", not "Product ratings". This is optional, you don't have to change it if you don't want to.

SO, AT THIS POINT, WE HAVE CREATED ALL THE COLLECTIONS AND DATASETS ETC. Now we can add the code.

After all the editing and combining of the code from the videos and the Velo tutorial article, my final code looks like this:

import wixData from 'wix-data';

$w.onReady(function () {

// TODO: write your page related code here...

setTimeout(function() {

let totalCount = $w("#dataset1").getTotalCount();

$w('#commentsCountBox').text = totalCount.toString() + " comments"

}, 5000);

});

export function addCommentButton_click(event) {

// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4

// Add your code for this event here:

//$w('#loader').show()

$w('#addCommentButton').disable()

let page = $w("#dynamicDataset").getCurrentItem();

let pageId = page._id;

wixData.insert('comments',{

'comment': $w('#commentsInput').value.replace('Nigga', '').replace('nigga',

'').replace('Nigger', '').replace('nigger', '').replace('Fuck',

'').replace('fuck', ''),

'userName' : $w('#nameInput').value,

'rating' : $w('#commentsRatingsInput').value,

'pageId' : pageId,

'pageReference' : pageId,

})

.then( () => {

$w('#commentsInput').value = ''

$w('#nameInput').value = ''

$w('#dataset1').refresh()

setTimeout(function() {

$w('#addCommentButton').enable()

//$w('#loader').hide()

let totalCount = $w("#dataset1").getTotalCount();

$w('#commentsCountBox').text = totalCount.toString() + " comments"

}, 2000);

})

//wixData.insert('CommentRatings', {

//'pageId' : pageId,

// 'pageReference' : pageId,

//})

$w("#commentRatingsdataset").onReady(() => {

// get the current item from the dataset

const currentItem = $w("#commentRatingsdataset").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('#commentsRatingsInput').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('#commentRatingsdataset').setFieldValues({

'avg': newAverageShort,

'totalRatings': total + newRating,

'numRatings': (count + 1)

});

// save the dataset fields to the collection

$w('#commentRatingsdataset').save()

.catch((err) => {

console.log('could not save new rating');

});

});

}

function filterComments () {

let page = $w("#dynamicDataset").getCurrentItem();

let pageId = page._id;

$w('#dataset1').setFilter(

wixData.filter()

.contains("pageId", pageId)

).then(() => {

setTimeout (function() {

}, 1500);

});

}

export function dataset1_ready() {

// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4

// Add your code for this event here:

filterComments()

}

function filterCommentRatings () {

let page = $w("#dynamicDataset").getCurrentItem();

let pageId = page._id;

$w('#commentRatingsdataset').setFilter(

wixData.filter()

.contains("pageId", pageId)

).then(() => {

setTimeout (function() {

}, 1500);

});

}

export function commentRatingsdataset_ready() {

// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4

// Add your code for this event here:

filterCommentRatings ()

}

(Tip for beginners like me: everything with // before it is commented out, this means this code will not run or they are just used to enter text describing/adding notes to the code - basically this is not part of the code that runs on your website)

Explanation for what the different element ids are referring to in the code, so you know what to substitute in your code:

#dataset1 is the id for Comments dataset that is connected to the Comments collection (the first collection I created by following the videos; this id is the same as the one used in his code)

#commentsCountBox is the id for the text box (above the comment display repeater) that shows the number of comments:

So, in the code above, the piece of code shown below, is basically saying get the total count/number of items in the Comments collection (using dataset1) and return that number/value in the text box that shows the number of comments (commentsCountBox) and then put a space and the word comments after the number:

let totalCount = $w("#dataset1").getTotalCount();

$w('#commentsCountBox').text = totalCount.toString() + " comments"

}, 5000);

#dynamicDataset is the dataset that brings the content on the dynamic page, so in my case this is the Activities dataset, which is connected to the Activities collection - the red arrow is pointing to the id:

In the code

wixData.insert ('comments'

'comments' is the id for the Comments Collection

and under that 'comment', 'userName', 'rating', 'pageId', 'pageReference' are all the ids for each field in the Comments Collection.

You can see I added the following code in between the code from the video to insert the name users type into the Name Input box and the rating they select into the Comments Collection:

'userName' : $w('#nameInput').value,

'rating' : $w('#commentsRatingsInput').value,

Here #nameInput is the id for Name Input box and #commentsRatingsInput is the id for the Comments Input box - red arrows below:

#commentsInput is the id for the Comment Input box - red arrow below

#commentRatingsdataset is the id for the CommentRatings dataset that is connected to the second collection CommentRatings which has the avg, numRatings, totalRatings fields used to calculate the Average Ratings and Number of Ratings values for the Ratings Display element at the top of the page:

NOW, HERE COMES THE MANUAL PART I MENTIONED:

For the top Ratings Display element to correctly show the Average Rating and the total number of ratings, I needed to manually add in some content in the CommentRatings collection:

For each item in my Activities collection that the Page Reference field in my CommentRatings collection is referring to, I had to add a line/row, and enter a beginning/dummy values for the avg, numRatings, and totalRatings field.

As you can see in the screenshot above:

For the Page Reference field, I selected each item title in order, in my case, the activity from the dropdown - if you start typing the name of the item, it will show up and you can click on it.

For the pageId text field, I entered each item (in my case activity's) ID, which I copied from the Activities collection, by doing the following:

I opened the Activities Collection, clicked on Manage Fields, scrolled down till I found the ID field and clicked the checkbox next to it so it becomes visible in my collection.

I opened the Activities Collection, clicked More Actions > Export to CSV

I then opened this .csv file and saved it as an Excel file and deleted all the fields in between my Activity Title and the ID field

Then I sorted the whole worksheet by the Activity title (basically so rows in the excel file would be in the same order as the Page Reference field values in CommentRatings Collection)

I then selected all the values/rows in the ID field in my excel file, did crtl + C to copy, came to my CommentRatings collection window, selected all the rows under pageId and did ctrl + V to paste in all the ID values for each item, in my case, next to the corresponding Activity title selected in the Page Reference field

Then,

I just added 5 for avg (the average rating), 1 for numRatings (the total number of rating - here just 1) and 5 for totalRatings (since there is only one rating of 5 - this dummy rating) for every row/item, in my case every activity.

Without this one row for each item, in my case activity, the average ratings value and total number of ratings value just don't display on the top of the page Ratings Display element.

Now, this means that it will show 1 rating at the top, even if there are no comments entered yet by users/visitors and the count at the top will sometimes be 1 more than the actual number of comments (I don't know why)....but it was the best solution I could figure out :)

After all this, each dynamic page should now display the average ratings, total number of ratings at the top and each individual name, rating and comment at the bottom of the page entered for each item on each item and only those entered for that item on that page and not any other items.

For example, on my dynamic item pages...

It shows 3.3 average rating and 3 ratings for the Activity 1.2 page at the top, and each individual rating and comment at the bottom:

and for the Activity 1.3 page - it is showing something different, i.e. the average rating = 3.7 and total ratings = 3 and individual ratings and comments only for this Activity 1.3 and no other Activities:

I really hopes this helps out others who are I struggling with getting these ratings and reviews like I was :)

Thank you again for everyone's posts that helped me figure out this solution!

VIDEOS:

Add comment section to wix dynamic page videos:

PART 1

PART 2 (even though it says Part 3 on the image)

PART 3

PART 4