Hi! I recently setup ratings on my site, using some videos to help. I created a dataset with products using a reference to Shop/Products (shown below). I am running into two issues.
Please reply with a snippet of the code you added to your site to set this up, so we could take a look.
I see you mentioned you set this up following some videos you seen online. We also have a tutorial for setting up a review and ratings system just in case you haven’t seen it yet it might help you out.
Hi Dara - splitting the code into two parts (the Product page and the Review lightbox). Each were built following guidelines provided in this guide.
Product Page:
//-------------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} % 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 product.';
// If the reviewer does not recommend the item:
} else {
// Set the "don't recomend" text.
$w('#recommendation').text = "I don't recommend this product.";
}
// 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.
loadStatistics();
// Show a thank you message.
$w('#thankYouMessage').show();
}
// Set the action that occurs when a user clicks the "Load More" text.
export function resultsPages_click(event, $w) {
// Load additional reviews into the reviews repeater.
$w('#Reviews').loadMore();
}
Review Lightbox:
//-------------Imports-------------//
import wixWindow from 'wix-window';
import wixData from 'wix-data';
//-------------Global Variables-------------//
// Current product's ID.
let productId;
//-------------Lightbox Setup-------------//
$w.onReady(function () {
// Get the data passed by the page that opened the lightbox.
productId = wixWindow.lightbox.getContext().productId;
// Set the action that occurs before the review is saved.
$w('#SubmitReviews').onBeforeSave(() => {
// If no rating was set:
if ($w('#radioRating').value === '') {
// Display an error message.
$w('#rateError').show();
// Force the save to fail.
return Promise.reject();
}
// If a rating was set, set the element values into the fields of the dataset item.
// These values will be saved in the collection.
$w('#SubmitReviews').setFieldValues({
productId,
rating: $w('#radioRating').value,
recommends: $w('#radioGroup1').value
});
});
// Set the action that occurs after the review is saved.
$w('#SubmitReviews').onAfterSave(async () => {
// Update the product's statistics using the updateStatistics() function.
await updateStatistics($w('#radioGroup1').value);
// When the statistics have been updated, close the lightbox to return the user to the product page.
wixWindow.lightbox.close();
});
});
// Update (or create) the product statistics.
async function updateStatistics(isRecommended) {
// Get the review statistics for the current product from the "review-stats" collection.
let stats = await wixData.get('Review-stats', productId);
// If statistics data already exist for this product:
if (stats) {
// Add the new rating to the total rating points.
stats.rating += parseInt($w('#radioRating').value, 10);
// Increase the ratings count by 1.
stats.count += 1;
// Increase the recommendations by one if the user recommends the product.
stats.recommended += (isRecommended === "true") ? 1 : 0;
// Update the new product statistics in the "review-stats" collection.
return wixData.update('review-stats', stats)
}
//If no statistics data exists for this product, create a new statistics item.
stats = {
// Set the statistics item's ID to the current product's ID.
_id: productId,
// Set the statistics item's rating to the rating entered by the user.
rating: parseInt($w('#radioRating').value, 10),
// Set the statistics item's ratings count to 1 because this is the first rating.
count: 1,
// Set the statistics item's recommended property to 1 if the user recommends the product.
recommended: (isRecommended === "true") ? 1 : 0
};
// Insert the new product statistics item into the "review-stats" collection.
return wixData.insert('review-stats', stats)
}
//-------------Event Handlers-------------//
// Set the action that occurs when a rating is chosen.
export function radioRating_change(event, $w) {
// Hide the error message.
$w('#rateError').hide();
}
