Hi everyone.
So after a few longggg days after work i have managed to get my reviews part up and running.
My next task is to incorporate some of that part into a new products shop page i am making to go alongside working with my reviews.
I basically need to grab the product ID from the repeater that's showing its information.
Then display it in my star rating.
I also need to link up add to cart button for the button on the repeater too.
Here is my repeater and then the code i have copied from my products page where i also have reviews set up, i have deleted all the code i don't need ( that was associated to the product page)
But now im kind of stuck on displaying the rating stars and adding to cart button on my repeater.
Here is also my website for you to see the reviews working on there and what i'm trying to achieve with my repeater.
https://www.rusticfox.co.uk/
//-------------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('#productPage1').getProduct();
// 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} % of people recommend this product`;
// 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 = 'Be the first to review this product!';
$w('#generalRatings').hide();
}
// Show the recommended percentage element only after it is populated to avoid flickering.
$w('#recoPercent').show();
}
//-------------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('#generalRatings').show();
// If there are no reviews:
} else {
}
}
This is just something i'm trying to teach myself so i can work on my own website.
The code may be a mess or totally wrong but the reviews part works quite good and im pleased with it.
I have also added an admin page for me to login from my mobile and reply directly to reviews so i don't have to input the data into the 'reviews' database collection.
I'm quite pleased with this :):)
Thanks everyone,
Any help much appreciated
Matt
Hi Mark, did you get anywhere with this.
I am wanting to display the average ratings and % recommended on the dynamic repeater too
Hey Matt Hall, I took a look at your site and you have done an amazing job! I see that you got the reviews working on the repeaters. I have been pulling my hair out trying to do exactly that and I have followed the reviews tutorial on the product page and it all works great. I just need to get the reviews working on the repeater. How did you get it to work? Thanks a million!