Hello I am trying to do a product specific rating and review system. I followed this https:// www. youtube. com/watch?v=-wyVxDNU3Uk video on how to set it up. my website is ecopeakco. com. When I go on to my product page I can see reviews, and write a review but nothing else pops up. Also I cannot open the write a review button which pops open a light box. I do not have any red dots in the dev mode so I am not sure where my bug is. I have attached the code I used for both the light box and rotator.
Again I do not have any flags saying anything is wrong. So I am trying to figure out how I can get the write a review button to open the lightbox and then successfully submit and show the star rating, review, and % recommended.
THANK YOU SO MUCH FOR THE HELP!!!
//-------------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();
}
And also this for the 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();
}