After a very long day I have managed to get all of the information and coding on my site and it all appears to work but the reviews will not display when I preview or view live. All data has been synced. The review has been saved in the review database but as per the last picture none of the ratings or review information displays. Can anyone help me with what I am doing wrong or what the issue may be… please, pretty please. At 61 years of age I think I have done not too bad considering I’ve no experience in this field whatsoever - that was why I chose Wix to create my website. However this has me bambuzzled!
I followed the Wix example - www.wix.com/code/home/example/Reviews
There are no errors in the code. A few warnings which I have checked and according to Wix are ok (Parameter not used). The same errors appear in the Wix example but the review and ratings data displays with no issue.
The code on my dynamic page is;
import wixWindow from “wix-window”;
import wixData from “wix-data”;
export function addReview_onClick(event) {
let recipeId = $w(‘#dynamicDataset’).getCurrentItem()._id;
wixWindow.openLightbox(‘Post a Review’, {id: recipeId});
}
export function dynamicDataset_onReady(event) {
let recipe = $w(‘#dynamicDataset’).getCurrentItem();
loadReviews(2);
}
function loadReviews(limit) {
let recipe = $w(‘#dynamicDataset’).getCurrentItem();
wixData.query(‘reviews’)
.eq(‘recipeId’, recipe._id)
.find()
.then(res => {
if (res.length > 0) {
renderRating(res.items);
renderReviews(res.items, limit);
$w(‘#numberOfReviews’).text = ${res.length} Reviews;
$w(‘#numberOfReviews’).show();
if (res.length > 2) {
$w(‘#seeAllReviews’).show();
$w(‘#seeAllLine’).show();
}
}
else {
$w(‘#rating’).hide();
$w(‘#numberOfReviews’).text = ‘No Reviews’;
$w(‘#numberOfReviews’).show();
}
});
}
function renderRating(reviews) {
// compute the average rating
let stats = reviews.reduce((agg, item) => {
return {
sum: agg.sum+item.rating,
count: agg.count+1
};
}, {sum: 0, count: 0});
let rating = Math.round(stats.sum * 2 / stats.count) / 2;
$w('#rating').show();
// setting the rating as HTML to have fine grained control over the formatting
$w('#rating').html = `<p style="font-size:15px; line-height:1.2em; text-align:center"><span class="color_11">
Rating ${rating}
/5
`;
}
function formatDaysAgo(date) {
var ago = new Date().getTime() - date.getTime();
if (ago < 44 * 1000)
return “a few seconds ago”;
else if (ago < 89 * 1000)
return “a minute ago”;
else if (ago < 44 * 60 * 1000)
return Math.round(ago / 60 / 1000) + ’ minutes ago’;
else if (ago < 89 * 60 * 1000)
return “an hour ago”;
else if (ago < 21 * 60 * 60 * 1000)
return Math.round(ago / 60 / 60 / 1000) + ’ hours ago’;
else if (ago < 35 * 60 * 60 * 1000)
return “a day ago”;
else if (ago < 25 * 24 * 60 * 60 * 1000)
return Math.round(ago / 24 / 60 / 60 / 1000) + ’ days ago’;
else if (ago < 45 * 24 * 60 * 60 * 1000)
return ‘a month ago’;
else if (ago < 319 * 24 * 60 * 60 * 1000)
return Math.round(ago / 29 / 24 / 60 / 60 / 1000) + ’ months ago’;
else if (ago < 547 * 24 * 60 * 60 * 1000)
return ‘a year ago’;
else
return Math.round(ago / 365 / 24 / 60 / 60 / 1000) + ’ years ago’;
}
const stars = [‘★’, ‘★★’, ‘★★★’, ‘★★★★’, ‘★★★★★’];
function renderStars(num) {
if (num >= 1 && num <=5)
return stars[num-1];
return stars[0];
}
function makeBrief(about, breakFrom) {
if (!about)
return “”;
var regex = /(<([^>]+)>)/ig;
var plainText = about.replace(regex, “”);
var dotPos = plainText.indexOf(‘.’, breakFrom);
var exclamationPos = plainText.indexOf(‘!’, breakFrom);
var wordBreak = plainText.indexOf(" ", breakFrom);
if (dotPos < 0) dotPos = 500;
if (exclamationPos < 0) exclamationPos = 500;
if (wordBreak < 0) wordBreak = 500;
var lineEnd = Math.min(Math.min(dotPos, exclamationPos), wordBreak);
if (lineEnd !== 500)
return plainText.substring(0, lineEnd) + “…”;
else
return plainText;
}
function renderReview (review) {
return `
${review.name}
${formatDaysAgo(review._createdDate)}
${renderStars(review.rating)}
${makeBrief(review.review, 20)}
`;
}
const reviewSeparator = ‘
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
’;
const reviewEnd = ‘
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
’;
function renderReviews(reviews, limit) {
let reviewsToRender = reviews.slice(0, limit);
let odd = reviewsToRender.filter((element, index, array) => (index % 2 === 1));
let even = reviewsToRender.filter((element, index, array) => (index % 2 === 0));
if (odd.length > 0) {
let oddRendered = odd.map(renderReview).join(reviewSeparator) + reviewEnd;
$w('#reviewsOdd').html = oddRendered;
$w('#reviewsOdd').show();
$w('#oddReviewContainer').show();
}
else {
$w('#reviewsOdd').hide();
$w('#oddReviewContainer').hide();
}
if (even.length > 0) {
let evenRendered = even.map(renderReview).join(reviewSeparator) + reviewEnd;
$w('#reviewsEven').html = evenRendered;
$w('#reviewsEven').show();
$w('#evenReviewContainer').show();
}
else {
$w('#reviewsEven').hide();
$w('#evenReviewContainer').hide();
}
}
export function seeAllReviews_onClick(event) {
loadReviews();
}
I have managed to get
