@amandam Thank you so much for your response!
The front product page itself works just fine. But the reviews and the ratings portion aren’t functioning properly. They don’t always load properly, the ratings say that no products have been reviewed even though there are reviews for that product. I also cannot submit reviews any more after making some changes recommended by someone.
I’ve included codes for both components: product page and Lightbox.
Product page code:
//-------------Imports-------------//
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;
//-------------Global Variables-------------//
// Current product.
let product ;
//-------------Page Setup-------------//
$w . onReady ( async function () {
console . log ( ‘testproduct’ )
// 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 ();
wixLocation . onChange ( **async** ( location ) => {
product = **await** $w ( '#productPage1' ). getProduct ();
$w ( "#generalRatings" ). hide ()
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 ( ) {
const stats = await wixData . get ( ‘review-stats’ , product . _id );
if ( stats ) {
let avgRating = ( Math . round ( stats . rating * 10 / stats . count ) / 10 );
let percentRecommended = Math . round ( stats . recommended / stats . count * 100 );
let ratings = $w ( ‘#generalRatings’ );
ratings . rating = avgRating ;
ratings . numRatings = stats . count ;
$w ( ‘#recoPercent’ ). text = ${ percentRecommended } % would recommend ;
$w ( ‘#generalRatings’ ). show ();
} else {
$w ( ‘#recoPercent’ ). text = ‘There are no reviews yet’ ;
}
$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 ) {
console . log ( ‘load more click’ )
// Load additional reviews into the reviews repeater.
$w ( ‘#Reviews’ ). loadMore ()
. then ( results => {
console . log ( results )
})
}
/*
$w.onReady(function () {
trackProductInventory();
wixLocation.onChange(() => {
trackProductInventory();
})
});
async function trackProductInventory() {
const product = await $w(‘#productPage1’).getProduct();
const productQuantity = product.quantityInStock;
if (product.inStock && productQuantity <= 10) {
// $w(‘#stockNotification’).show();
} else {
// $w(‘#stockNotification’).hide();
}
}
*/
/**
/**
- Adds an event handler that runs when the element is clicked.
Read more
- @param {$w.MouseEvent} event
*/
Lightbox code:
//-------------Imports-------------//
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;
//-------------Global Variables-------------//
// Current product’s ID.
let productId ;
let getButtonRating ;
//-------------Lightbox Setup-------------//
$w . onReady ( function () {
console . log ( ‘testlightbox’ )
// 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.
console . log ( 'radio button value before submitting' , getButtonRating )
stats . rating += parseInt ( getButtonRating , 10 );
console . log ( 'upadted stats.rating' , stats . rating );
// 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 ( getButtonRating , 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-------------//
/**
- Adds an event handler that runs when an input element’s value
is changed.
- @param {$w.Event} event
*/
export function radioRating_change ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
// Set the action that occurs when a rating is chosen.
getButtonRating = $w ( ‘#radioRating’ ). value ;
console . log ( ‘getButtonRating’ , getButtonRating );
// Hide the error message.
$w ( ‘#rateError’ ). hide ();
}
/**
- Adds an event handler that runs when the element is clicked.
Read more
- @param {$w.MouseEvent} event
*/
I’m fairly certain that I have some other problems too but one thing at a time I guess!