Example: Store Reviews & Rating

Show and tell
, , ,
1

We took a site with Wix Stores and added Ratings and Reviews functionality to it.

Site members can go to a product’s page and add a rating and a written review, and recommend the product. The Product page displays average rating and recommendation information for the product and the details of each rating.
If a visitor isn’t a site member and wants to add a review they are prompted to sign in.

To view the Example:

Example Site
Open in Editor

How we built it

The collections

review-stats collection

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

reviews collection

The reviews collection has fields that match the review information the member provides and a field that references the product in the Products collection.

Adding ratings and reviews

Members add their review in a lightbox. The lightbox has input fields for the member’s review, including the member’s details, a written review, a photo upload button, and clickable stars for their rating. There are also radio buttons that let them recommend the product.

To create the clickable stars we created two groups of stars of different colors and placed the blue stars over the gray stars. When a member hovers over a blue star, that star and all the ones to its left are shown and the review rating is set to the number star that was clicked. Soon we’ll have an element that will make this even easier.

When a member posts their review, the details of that review are saved to the reviews collection, the review statistics for the product are added or updated in the review-stats collection, and the lightbox closes.

Displaying ratings and reviews

The Product page displays the number of ratings, average rating, the percentage of raters who recommend the product, and the details of each rating. There is also a Write a Review button which opens the lightbox and passes it information about the current product.

We added the necessary elements to display the average star rating for the product, the number of reviews it received, and the percentage of people who recommend the product. The data for these elements is retrieved from the review-stats collection.

The details of each review are retrieved from the reviews collection and displayed in a repeater. We also display how long ago the review was submitted. We get this information by using JavaScript’s getTime function to retrieve the time in the createdDate field for the review and then comparing it to today’s time. Based on the difference, we display a general message describing how long ago the rating was submitted.

7 Likes
2

You guys are doing great stuff. :+1:t2: :clap:t2:
But why not WiX makes this as a standard feature of WiX Store.
For every new customer it is going to be duplication of efforts for ppl like us.

3

I understand that the review is not connected to the order?? Thanks

4

Wow amazing!! Thank you I was going to ask for this!

5

Just what I am looking for. Great stuff! Would be great if the nicknames and email addresses would connect to Wix Users Database. This makes the comments and everything much more manageable and prevents trols.

6

This is great! Is this possible if my page has no membership?

7

I agree wix should offer this by default. It sucks that I have to find a developer and take $$ out from my own wallet to make such a basic feature.

I pay well if someone can implement this to my wix bookings.

8

Vitor, you can contact me at support@futurevisionweb.co.uk if you need code assistance!

9

Athanasios why do you think wix bookings cannot be modified that way? Yoav can you do a example for wix bookings please?

10


Highlighted in Red is the WixStores product page, on which you code the ratings & reviews.
WixBookings have 1 page and changes the content within the same page.
Simply put, there is no “Booking Info Page” on which you would put those reviews.

11

Maybe if you kept checking the URL with a setInvertal and then show/hide the ratings, but this would be really impractical.

12

If you check the wix bookings database you’ll see a service page, that is the domain + URL of each booking service you have added. each page in the flow has it’s own url. I really would like a official word on this because i cannot launch my business without reviews and ratings!

Is it possible to do this with dynamic pages and retain a interface similar to wix bookings, with the calendar to select the booking, the payment button, etc?

13

On your editor, you will see that the /bookname page does not exist.There is one page called “Book Online” only, which has many “pages” in it(the one that displayes all bookings, the one that has a specific booking on it, the booking flow etc.),so the problem is that if you added on the page “Book Online” the reviews, they would also display on all the other pages which obiously you don’t want that.
A work arround would be to check each 1sec if the link is /*… and only then display the reviews element.However a workarround like that would be impractical and even be buggy aswell.​

14

I just checked here, published my website and wrote my domain + wix bookings “Service Page URL” and it took me exactly to the page I want to display the ratings and comments. I don’t care if it’s impractical or not if it works…it’s the difference between launching my business or not because no one will take serious a booking website you can’t review and comment!

My idea would be somehow store somewhere that comment and rating X is of this wix bookings and only display it on it’s own service page url.

This examples works with dynamic pages, https://www.wix.com/code/home/example/Reviews.

I can’t stop using wix bookings because of features like google agenda sync, the calendar interface which is great, and other features.

15

I have been trying to get this to work since it was first launched and I cannot get it to work no matter what I do. Can someone from the wix team please take a look at my site and tell me what I am doing wrong. Ill give you access just let me know. thank you.

16

Hey! I could manage to make this code work buuut I don’t know why my review-stats database is not working. I mean, it’s working on the first review, but then when someone adds another review the lightbox is not closing and the information of the review is not being added to the review-stats database (it does to the Reviews database.

Anyone of u know what should I do? I have the same names for the fields and the different elements…

Thank you!

17

Hello, I haven’t been able to make it work and in the product page code there is a mistake on the line 20.

Thank you!

18

Not matured enough…

19

Just tried and it does not work. I cannot do a rating and review on a product?

20

Is there a tutorial for this?