Hey community,
I’m having an issue with reviews for products on my page. I have a repeater element that I want closed when there are no reviews and also for a box to show when there are no reviews that holds the text “there are no reviews” while at the same time when there are reviews to expand the repeater and if there are more than 12 reviews to be able to load more with the use of a button. This is what I currently have.
If you are using the Wix Stores Ratings/Review tutorial, then it does that already as stated in the tutorial workings.
https://support.wix.com/en/article/corvid-tutorial-adding-ratings-and-reviews-to-a-wix-stores-site
Step 2: Set up the Shop Product Page
On the Shop Product Page we added:
//…
“load more” text at the bottom of the page for loading additional reviews.
Step 6: Create the loadStatistics Function on the Product Page
The loadStatistics function gets and displays statistics for the current product.
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();
}
Understanding the Code
Line 2: Use the current product’s ID to get the product’s statistics from the review-stats collection and assign them to the stats variable.
Line 3: Check whether there are any statistics related to the current product, indicating that one or more users have rated the product. If there are stats, do the following:
Line 4: Calculate the average rating of the product by dividing the sum of all ratings the product received from all reviewers by the number of times the product was rated, multiplying by ten, and rounding the number.
Line 5: Calculate the percentage of people who recommended the product by dividing the total number of recommendations the product received by the number of times the product was rated, multiplying by 100, and rounding the number.
Line 6: Get the generalRatings ratings element and assign it to the ratings variable.
Line 7: Set the ratings element’s rating value to the average rating calculated above.
Line 8: Set the ratings element’s total number of ratings from the count field in the review-stats collection for the current product.
Line 9: Set the text that displays the recommended percent.
Line 10: Show the ratings element.
Lines 11-14: If there are no stats (indicating that no reviewers have rated the product yet), display text stating that there are no reviews yet.
Step 8: Create the showReviews Function on the Product Page
showReviews expands or collapses the review strip that displays the reviews depending on whether any reviews were submitted.
export function showReviews() {
if ($w('#Reviews').getTotalCount() > 0) {
$w('#reviewsStrip').expand();
} else {
$w('#reviewsStrip').collapse();
}
}
Understanding the Code
Line 2: Use the getTotalCount function to check whether there are any reviews in the Reviews dataset for the current product.
Lines 3-5: If there are reviews, expand the review strip. If there are no reviews, collapse the review strip.
Step 10: Create the resultsPages_click Function on the Product Page
resultsPages_click runs when the reviewer clicks the “load more” text at the bottom of the Product page. We selected the “load more” text and, in the Properties panel, added an onClick event handler.
When the visitor clicks the text, the resultsPages_click event handler loads another page (chunk) of reviews into the reviewsRepeater.
Note
The number of reviews displayed in each page (chunk) of the repeater is defined in the Reviews dataset. Click the dataset, click Manage Dataset and enter the Number of items to display.
export function resultsPages_click(event, $w) {
$w('#Reviews').loadMore();
}
Understanding the Code
Lines 1-2: When the event handler is triggered, the Reviews dataset loads the next page (chunk) of reviews using the loadMore function.
Yeah I followed this tutorial but now the add review button doesn’t open the lightbox. The review appears while the page is loading but once it’s finished, the review vanishes.