OK, so I will try to explain how I did it
My website is Skippertools.app, you can have a look there under harbour guide.
What I do there is showing harbors on the harbor guide page, the harbors are stored in the database. By clicking on a harbor the details are shown on a dynamic page. On this page one can rate and comment on the harbor.
For the comments I created a table “Ratings”. The table “ratings” contains a reference field to the table “harbours”
Now, on the harbour guide page I show a list of harbors like a table. However I didn’t use a table, since it’s useless in terms of design. Therefore I used a repeater.
So this is how you add a repeater, further down are the tables. Choose any repeater and work on the design as desired.
Of course you have to add a dataset (in my case harbors) and connect it to the repeater and the fields inside the repeater.
Next to the dynamic page where the details of the harbor is shown. I assume it is clear how to do that.
Below the harbor info I show ratings and comments.
First of all I show the average rating and the total number of ratings. I already had the dataset for the harbor on the page, next I added a dataset for the ratings. And then of course a rating display.
In the code I load the rating as follows:
$w.onReady(function () {
$w('#harbouritem').onReady(() => {
harbouritem = $w('#harbouritem').getCurrentItem()
loadrating()
})
});
export function loadrating() {
let ratings;
wixData.query('Ratings')
.eq('harbours',harbouritem._id)
.find()
.then(result => {
ratings = result.items
let sumrating = 0
let countrating = 0
let rating = 0
countrating = result.totalCount
result.items.forEach(res => {
sumrating += res.rating
})
if (sumrating,countrating) {rating = sumrating/countrating}
$w('#harbourrating').numRatings = countrating
if (rating > 0) {
$w('#harbourrating').rating = rating
}
else {
$w('#harbourrating').rating = undefined
}
})
}
Note: you will get a warning by setting the rating to undefined, but according to the documentation this is correct and it works accordingly.
Add a comment
To allow a visitor to add a comment, I chose a Lightbox as solution.
Clicking on the + Symbol calls the Lightbox and enables the user to enter the comment and rating.
So add a Lightbox which will finally look like this.
Now, to connect the comment with the harbor, the Lightbox needs to now the harbor. Therefore, my + Symbol is not directly linked to the Lightbox, but I have to do that in the code and communicate the harbor to the Lightbox.
export function addrating_click(event) { //addrating is the + symbol
wixWindow.openLightbox('Bewertung', { // Name of Lightbox
'harbouritem' : harbouritem
})
.then(() => {
$w('#harbourratings').refresh()
})
}
And in the Lightbox I receive the harbouritem like this
$w.onReady(function () {
let received = wixWindow.lightbox.getContext();
harbourrecord = received.harbouritem
})
Display the comments on the Dynamic Page
First you add a repeater for the Comments on the Dynamic Page. This repeater is connected to the ratings table. The fields inside the repeater can easily be connected to the respective table fields.
And now it works, since I already did the code for the query of ratings before.
I hope this helps. I know, I read some posts with explanations myself and was clueless afterwards. So anybody needs more help, just send a reply.
