Example Description
In this example, a site member can rate, review, and recommend products in a Wix Store. The Product page for each item displays the average rating and the recommendation percentage, as well as the details of each review.
How We Built It
The Collection We Added: review-stats
The review-stats collection has the following fields:
rating: The total stars the product received
count: The number of times the product was rated
recommended: The number of times the product was recommended
ID: The ID of the product (hidden by default)
The Collection We Added: reviews
The reviews collection has fields for the review information and a field that references the item in the Products collection.
Adding Ratings and Reviews
Members add their review in a lightbox. The lightbox has input fields for the member’s details, a written review, a photo upload button, and radio buttons for their rating. There are also radio buttons that let them recommend the product.
When a member posts their review, the details are saved to the reviews collection, the review statistics for the product are added in the review-stats collection, and the lightbox closes.
Displaying Ratings and Reviews
The Product page displays the number of reviews, the average rating, the recommendation percentage, and the details of each rating. There is also a Write a Review button that opens the lightbox.
We added the necessary elements to display the average star rating for the product, the number of reviews it received, and the percentage of members who recommended the product. These elements retrieve the data from the review-stats collection.
Each review retrieves details from the reviews collection and displays them in a repeater. We also display how long ago the review was submitted.
Next Steps
Open this example in the Editor to work with the template.
Publish the site and refresh your browser so the Stores collections appear in the Database.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Product Configurator
Let customers create one-of-a-kind products.
Advanced
Related Items
Recommend products based on price, brand and more.
Intermediate
Low in Stock Notification
Display a notification when a store product is low in stock
Beginner