@russian-dima
Thank you for responding and helping.
Here are the details. I am including the working code so you can see how the rating is populated and calculated.
- Suppliers - in this collection the supplier field key is title
- Reviews - in this collection the supplier field key is productId which is a reference field to Suppliers collection.
- review-stats - in this collection there are four columns as shown in the photo below.
#rating
#count
#recommended
These are all stored as numbers.
I have shown above how these collections look.
This is the code in the supplier profile page (similar to the product page)
This code is working
//-------------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 * 5 / stats.count) / 5);
// 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();
}
This is the code in the lightbox that pops up when WRITE REVIEW is clicked.
This code is working but see two issues below
//-------------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();
}
Lightbox code issues:
a) When closing the lightbox without submitting the review, the thank you message is displayed.
b) the lightbox lets review to be submitted without any radio buttons for stars to be selected. When this is done, the review does not appear on the reviews repeater.
Supplier list page (all items - dynamic)
CODES FOR THIS DON’T WORK
Now on the Supplier list page where the repeater is, I want to insert the average ratings in each container. This average rating is correctly calculated on the supplier profile page but when the data is populated in the
review-stats collection it does not populate the average rating.
So when I reference review-stats to Suppliers collection I don’t have option to select average rating.
The repeater in Suppliers list page is connected to suppliers collection.
The repeater is called supplerlist
There are two solutions I was thinking of to get average rating into the repeater.
-
by amending the code in light box so it populates the average rating into the review-stats collection , OR
-
by adding a function in the supplier list page so that it calculates the average rating from data in the review-stats and adds it to the repeater item container.
I have not been able to do No. 1 yet.
for no. 2, I tried the codes below.
Code A - but I know it’s not correct.
import wixData from 'wix-data';
$w.onReady(async function () {
$w('#supplierlist').onItemReady(($item, itemData, index) => {
$item('#generalRatings').text = itemData.region
$item('#generalRatings2').text = itemData.recommended
})
const { items: suppliers } = await wixData.query('Suppliers').find()
$w('#supplierlist').data = suppliers
});
Alternative to code A I tried code B:
import wixData from 'wix-data';
// define what is a product
let product;
$w.onReady(function () {
$w('#supplierlist').data = product;
// Load the current product's statistics.
$w.onReady(async function loadstatistics() {
$w('#supplierlist').onItemReady(($item, itemData, index) => {
// 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();
})
//Alternative export function method
export function ReviewStatsDataset_ready() {
const stats = await wixData.get('review-stats', product._id);
let avgRating = (Math.round(stats.rating * 10 / stats.count) / 10);
let ratings = $w('#generalRatings');
$w('#supplierlist').forEachItem(($item, itemData, index) => {
ratings.rating = avgRating;
ratings.numRatings = stats.count;
})
}
So its the code on the Supplier list page that I am really stuck at.
If you can please help me figure out the right code to populate the supplier list page (item list page) with the average rating for each supplier from the supplier profile page, I will be eternally grateful.
Here is the link to the test website.
https://pt-tips.wixsite.com/website/suppliers
Thank you
