Hello can anyone please advise on how to display individual company ratings within a repeater either with code or via datasets? i’ve tried numerous ways to achieve this but failed every time
Hi Stevo,
Have you seen this example?
[https://www.grampsworkbench.com/Examples/Ratings-by-User](https://www.grampsworkbench.com/Examples/Ratings-by-User
You)
You can open it as a template in the Editor to see the working code. Make sure to turn on Dev Mode first…
We also have a tutorial that may be of assistance: https://support.wix.com/en/article/corvid-tutorial-capturing-and-displaying-ratings
Hope it helps!
thanks for this, i have since got a step further, but not quite there yet, not sure if your could help its code related?
Stevo Amigo, Try this…
Assuming you have a Number field in the database, which have the ratings
#repeater1 - repeater
#myRatingsDisplay - rating display
ratingsField - field of rate in database.
$w (“#repeater1”). onItemReady (($item, itemData , index ) => {
$item (“#myRatingsDisplay”).numRatings =itemData. ratingsField ;
});
hi thanks for your reply, i have a dynamic profile page which has different reviews of a various companies, the ratings are all averaged within a secondary review-stats db and made into a single overall rating which doesn’t get fed back to the MemberProfile Db i want it to! so not sure this method would work, i have implemented code to bypass this problem where the overall rating gets fed back to the db i need it to go! but the problem i have is that the ratings won’t save unless the user is logged in, however the permissions are all set to anyone? also when the user is logged in, the ratings conflict with one another where if the logged in user visits another business profile the owner of the rating they have gets replaced for the previous company’s and vice versa?
page code
export function busName1_viewportEnter(event) {
let user = wixUsers.currentUser;
let userId = user.id;
let values;
const overallRatings = ($w('#generalRatings').rating);
const numRatings = ($w('#generalRatings').numRatings);
wixData.query("MemberProfile")
.eq("_owner", userId)
.find()
.then((results) => {
values = results.items[0];
let Ratings = overallRatings;
let nRatings = numRatings;
let items = results.items;
items.forEach((item) => {
item.overallRatings = Ratings;
item.numRatings = nRatings;
wixData.save("MemberProfile", item) .then((results2) => { console.log(results2);
});
});
}
)}
video for you to understand whats happening
Finally i have fixed my ratings after all this time i just changed what the id was set to in the code, i linked an invisible piece of text to a dataset connected to ID then altered this bit of code and bam it worked
I’m going to celebrate now with a drink because Ive been trying to fix this for ages aha
export function busName1_viewportEnter(event) {
let user = wixUsers.currentUser;
let userId = $w('#idText').text; // line i changed and set to the invisible id text the dataset is connected to, this now stops it from just updating the first Db Row
let values;
const overallRatings = ($w('#generalRatings').rating);
const numRatings = ($w('#generalRatings').numRatings);
wixData.query("MemberProfile")
.eq("_owner", userId)
.find()
.then((results) => {
values = results.items[0];
let Ratings = overallRatings;
let nRatings = numRatings;
let items = results.items;
items.forEach((item) => {
item.overallRatings = Ratings;
item.numRatings = nRatings;
wixData.update("MemberProfile", item) .then((results2) => { console.log(results2);
});
});
}
)}
I hope this helps someone
Hi Stevo
I hope you don’t mind me asking you for help.
I have been searching for a solution on Wix forums for over a week and I am glad that I found your post.
I am a coding novice, so please bear with me.
I am also working on a website very much similar to the one you created.
I have dynamic pages - Supplier (All) and Supplier(SUPPLIER NAME) .
Its a directory of recommended suppliers.
I have one database of suppliers.
I have followed Wix’s example and was able to include the reviews and ratings on each supplier page.
I have the same problem, I can’t add the ratings and the % that will recommend the supplier to the Supplier (All) page which has the repeater.
There are two databases for reviews, which are: reviews and review-stats .
I don’t have membership, so no one needs to log in.
I am very impressed with the different types of stars rating you have for each review i.e. cleanliness, reliability, cost etc.
I would very much like to have this too, but I am limited to only having one overall rating as per the Wix example.
I tried to follow your code whereby you solved the issue, but I am unable to fully understand it, as I don’t have users etc.
I just want to (hopefully simple coding) to reflect the % and rating that appears on each supplier page to the main suppliers’ directory/listing where each supplier is individually listed.
Are you able to help, please?
Here is the link to the website and the code under the dynamic supplier page.
https://pt-tips.wixsite.com/my-site-2/suppliers
//-------------Imports-------------//
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
//-------------Global Variables-------------//
// Current product.
let product ;
//-------------Page Setup-------------//
$w . onReady ( async function () {
// Set the global product variable to the currently displayed product.
product = await $w ( ‘#dynamicDataset’ ). getCurrentItem ();
// Load the current product’s reviews using the initReviews() function.
initReviews ();
});
// Loads the current product’s reviews.
async function initReviews ( ) {
// Filter the “Reviews” dataset to contain only the reviews on the currently displayed product.
await $w ( ‘#Reviews’ ). setFilter ( wixData . filter (). eq ( ‘productId’ , product . _id ));
// Show the reviews after the filter was set and applied on the dataset
showReviews ();
// Load the current product’s statistics using the loadStatistics() function.
loadStatistics ();
}
// Load the current product’s statistics.
async function loadStatistics ( ) {
// Get the statistics data based on the current product’s ID.
const stats = await wixData . get ( ‘review-stats’ , product . _id );
// If statistics data for the product was found:
if ( stats ) {
// Compute the product’s average rating by dividing the total points by the number of ratings.
let avgRating = ( Math . round ( stats . rating * 10 / stats . count ) / 10 );
// Compute the percentage of reviewers that recommend the product.
let percentRecommended = Math . round ( stats . recommended / stats . count * 100 );
// Get the ratings element.
let ratings = $w ( ‘#generalRatings’ );
// Set the ratings element’s average rating to the value calculated above.
ratings . rating = avgRating ;
// Set the ratings element’s number of ratings to the count value from the statistics data.
ratings . numRatings = stats . count ;
// Set the text for the recommended percentage element.
$w ( ‘#recoPercent’ ). text = ${ percentRecommended } % would recommend
;
// Show the ratings element.
$w ( ‘#generalRatings’ ). show ();
// If there is no statistics data for the product:
} else {
// Set the text for the recommended percentage element to reflect the fact that there are no reviews.
$w ( ‘#recoPercent’ ). text = ‘There are no reviews yet’ ;
}
// Show the recommended percentage element only after it is populated to avoid flickering.
$w ( ‘#recoPercent’ ). show ();
}
//-------------Repeater Setup -------------//
// Set up each item in the reivews repeater as it is loaded.
export function reviewsRepeater_itemReady ( $w , itemData , index ) {
// If the reviewer recommends the item:
if ( itemData . recommends ) {
// Set the "recommend text.
$w ( ‘#recommendation’ ). text = ‘I recommend this supplier.’ ;
// If the reviewer does not recommend the item:
} else {
// Set the “don’t recomend” text.
$w ( ‘#recommendation’ ). text = “I don’t recommend this supplier.” ;
}
// If a photo was uploaded for the review:
if ( itemData . photo ) {
// Set the image URL from the item data.
$w ( '#reviewImage' ). src = itemData . photo ;
// Expand the image.
$w ( '#reviewImage' ). expand ();
}
// Set the ratings element's rating value.
$w ( '#oneRating' ). rating = itemData . rating ;
// Get the date that the review was entered.
let date = itemData . _createdDate ;
// Format the date according to the date format settings on the user's computer.
$w ( '#submissionTime' ). text = date . toLocaleString ();
}
//-------------Data Setup -------------//
// Perform some setup when the dataset filter was completed.
export function showReviews ( ) {
// If at least one review has been submitted:
if ( $w ( ‘#Reviews’ ). getTotalCount () > 0 ) {
// Expand the strip that displays the reviews.
$w ( ‘#reviewsStrip’ ). expand ();
// If there are no reviews:
} else {
// Collapse the strip that displays the reviews.
$w ( ‘#reviewsStrip’ ). collapse (); //otherwise, hide it
}
}
//-------------Event Handlers -------------//
// Set the action that occurs when a user clicks the “Write a Review” button.
export async function addReview_click ( event , $w ) {
// Create an object containing the current product’s ID to be sent to the review writing lightbox.
const dataForLightbox = {
productId : product . _id
};
// Open the “Review Box” lightbox, send it the object created above, and wait for it to close.
let result = await wixWindow . openLightbox ( ‘Review Box’ , dataForLightbox );
// After the review lightbox is closed, refresh the reviews dataset so the new review appears on the page.
$w ( ‘#Reviews’ ). refresh ();
// Reload the current products statistics to reflect the new rating.
setTimeout (() => {
loadStatistics ();
}, 2000 );
// Show a thank you message.
$w ( ‘#thankYouMessage’ ). show ();
}
I am at the moment trying to change from my current setup which uses Wix shop module and Fera.ai review app.
I find the shop feature to be very limited for the type of data I want to show.
Although Fera has been Ok to use. But they can’t add reviews to dynamic pages.
Will you be able to also help me add the review rating only to the suppler page near the supplier name please?
Like this:
Sorry if I am asking for a lot here, do let me know if its too much trouble or if you can help but it would mean that you can’t do your work, then please let me know, happy to pay.
As you have a similar website that I am wanting.
Many thanks
Hi Stevio, help please.
Hi Marlow, the grampsworkbench example does not seem to be available anymore
Hi, Sammy, it’s been a while and I’ve probably forgotten alot of steps how I managed to set my website up with the ratings I haven’t touched it in 2 years lol, but leave it with me and i will have a look into it later.
Thank you Stevo. I looked at your website and it has amazing features… especially the multiple types of ratings, missed appointments feature… I am impressed. Thank you for taking the time to help me.
I am suprised that there is so little in terms of examples and tutorials by Wix for the reviews.
Ahh thanks, and yes i know i went to great lengths to build my website however it isn’t still completely finished, i haven’t touched it in a while due to having other commitments. but i’ll do my best to point you in the right direction.
I have posted it here as well if it helps with more info.
Hi Sammy you need to add this piece of code to the main profile dynamic page of the single supplier, then you need to add an invisible text label named (idText) to that page linked with a dataset to your suppliers id and Database
add code to this page circled =
export function page1_viewportEnter ( event ) {
let user = wixUsers . currentUser ;
let userId = $w ( ‘#idText’ ). text ;
let values ;
// const views = ($w(‘#profileViewsCount’).value);
wixData . query ( “Suppliers” )
. eq ( “_owner” , userId )
. find ()
. then (( results ) => {
values = results . items [ 0 ];
//let views2 = views;
**let** items = results . items ;
items . forEach (( item ) => {
item . views ++
wixData . update ( "Suppliers" , item ). then (( results2 ) => {
console . log ( results2 );
});
});
})
}
this is mine
Then once you have done that navigate to the page where the dynamic repeater is with the review ratings attached,
then add an invisible text label named (idText) to the repeater linked to the suppliers database via dataset, like in this pic
Lastly connect the star ratings in the repeater to a dataset linked to the suppliers db. like this
Thank you, I will give it a try. Just wanted to check first. I dont have users/members for this website like you do, does that make a difference to the code.
Im unsure on that, i doubt it would effect the code, as long as all the id matches up within all the databases, reviews, review stats and the suppliers db. datasets should sort this out for you
Thank you. I am unable to enlarge the code photos… The circled screenshot is working fine.
I am not sure if I am allowed to post my email here? it will be easier
What does your rating-stats database look like?
The columns in mine has rating = total number of stars (not the average), and then there is count (number of reviews for each supplier) and recommended
Im unsure on the rules now, The code in the pictures above you can ignore, just see what the dataset is linked too in the picture and how its all connected and laid out, the code above you need for the job, make sure to had an element to page1, onViewportEnter to the main profile page, then. the code will work