# Example: Store Reviews & Rating

**URL:** <https://forum.wixstudio.com/t/example-store-reviews-rating/10512>\
**Category:** Show and tell\
**Tags:** tips, wix-members-area, wix-stores, code\
**Created:** [July 4, 2018, 12:06pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512 "2018-07-04T12:06:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yoav-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yoav-wix/32/674_2.png) [@yoav-wix](https://forum.wixstudio.com/u/yoav-wix)\
**Post date:** [July 4, 2018, 12:06pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/1 "2018-07-04T12:06:55Z")

</div>

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](https://www.wix.com/code-examples/shop-reviews)  
[Open in Editor](https://editor.wix.com/html/editor/web/renderer/new?siteId=a68e3807-9df0-45f9-96db-ff89b2ba20b6&metaSiteId=9a345397-cb5a-4f9c-828e-289c0b60d30f)

# **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.

---

<div class="post-metadata">

**Author:** ![pawan](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pawan/32/1572_2.png) [@pawan](https://forum.wixstudio.com/u/pawan)\
**Post date:** [July 4, 2018, 1:01pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/2 "2018-07-04T13:01:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dafna-kotzer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dafna-kotzer/32/981_2.png) [@dafna-kotzer](https://forum.wixstudio.com/u/dafna-kotzer)\
**Post date:** [July 4, 2018, 3:08pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/3 "2018-07-04T15:08:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![josh-gulewitsch](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/josh-gulewitsch/32/832_2.png) [@josh-gulewitsch](https://forum.wixstudio.com/u/josh-gulewitsch)\
**Post date:** [July 4, 2018, 4:34pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/4 "2018-07-04T16:34:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alan-huang](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan-huang/32/1901_2.png) [@alan-huang](https://forum.wixstudio.com/u/alan-huang)\
**Post date:** [July 5, 2018, 2:45am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/5 "2018-07-05T02:45:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rogermty](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@rogermty](https://forum.wixstudio.com/u/rogermty)\
**Post date:** [July 5, 2018, 10:15pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/6 "2018-07-05T22:15:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vitor](https://avatars.discourse-cdn.com/v4/letter/v/c89c15/32.png) [@vitor](https://forum.wixstudio.com/u/vitor)\
**Post date:** [July 5, 2018, 10:57pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/7 "2018-07-05T22:57:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![athanasios-spachos](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/athanasios-spachos/32/876_2.png) [@athanasios-spachos](https://forum.wixstudio.com/u/athanasios-spachos)\
**Post date:** [July 6, 2018, 2:46am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/8 "2018-07-06T02:46:10Z")

</div>

Vitor, you can contact me at [support@futurevisionweb.co.uk](mailto:support@futurevisionweb.co.uk) if you need code assistance!

---

<div class="post-metadata">

**Author:** ![vitor](https://avatars.discourse-cdn.com/v4/letter/v/c89c15/32.png) [@vitor](https://forum.wixstudio.com/u/vitor)\
**Post date:** [July 6, 2018, 4:25am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/9 "2018-07-06T04:25:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![athanasios-spachos](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/athanasios-spachos/32/876_2.png) [@athanasios-spachos](https://forum.wixstudio.com/u/athanasios-spachos)\
**Post date:** [July 6, 2018, 4:37am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/10 "2018-07-06T04:37:42Z")

</div>

![](https://us1.discourse-cdn.com/wix/original/3X/d/6/d6057a26c16aabe5ae1083cd3d4a0f94939cde43.png)  
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.

---

<div class="post-metadata">

**Author:** ![athanasios-spachos](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/athanasios-spachos/32/876_2.png) [@athanasios-spachos](https://forum.wixstudio.com/u/athanasios-spachos)\
**Post date:** [July 6, 2018, 4:41am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/11 "2018-07-06T04:41:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vitor](https://avatars.discourse-cdn.com/v4/letter/v/c89c15/32.png) [@vitor](https://forum.wixstudio.com/u/vitor)\
**Post date:** [July 6, 2018, 4:44am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/12 "2018-07-06T04:44:34Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![athanasios-spachos](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/athanasios-spachos/32/876_2.png) [@athanasios-spachos](https://forum.wixstudio.com/u/athanasios-spachos)\
**Post date:** [July 6, 2018, 4:49am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/13 "2018-07-06T04:49:15Z")

</div>

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.​

---

<div class="post-metadata">

**Author:** ![vitor](https://avatars.discourse-cdn.com/v4/letter/v/c89c15/32.png) [@vitor](https://forum.wixstudio.com/u/vitor)\
**Post date:** [July 6, 2018, 4:54am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/14 "2018-07-06T04:54:03Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![evoessentials](https://avatars.discourse-cdn.com/v4/letter/e/3d9bf3/32.png) [@evoessentials](https://forum.wixstudio.com/u/evoessentials)\
**Post date:** [July 20, 2018, 11:14pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/15 "2018-07-20T23:14:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![blairamirez8](https://avatars.discourse-cdn.com/v4/letter/b/67e7ee/32.png) [@blairamirez8](https://forum.wixstudio.com/u/blairamirez8)\
**Post date:** [July 24, 2018, 9:32pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/16 "2018-07-24T21:32:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![grajalesmauro](https://avatars.discourse-cdn.com/v4/letter/g/d07c76/32.png) [@grajalesmauro](https://forum.wixstudio.com/u/grajalesmauro)\
**Post date:** [July 29, 2018, 8:17pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/17 "2018-07-29T20:17:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![queneljiang](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/queneljiang/32/5767_2.png) [@queneljiang](https://forum.wixstudio.com/u/queneljiang)\
**Post date:** [August 11, 2018, 11:20pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/18 "2018-08-11T23:20:26Z")

</div>

Not matured enough…

---

<div class="post-metadata">

**Author:** ![billmacdonald](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/billmacdonald/32/972_2.png) [@billmacdonald](https://forum.wixstudio.com/u/billmacdonald)\
**Post date:** [September 6, 2018, 6:35pm UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/19 "2018-09-06T18:35:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hakimzadeh\_95](https://avatars.discourse-cdn.com/v4/letter/h/ee7513/32.png) [@hakimzadeh\_95](https://forum.wixstudio.com/u/hakimzadeh_95)\
**Post date:** [October 2, 2018, 3:48am UTC](https://forum.wixstudio.com/t/example-store-reviews-rating/10512/20 "2018-10-02T03:48:03Z")

</div>

Is there a tutorial for this?

[Next page](https://forum.wixstudio.com/t/example-store-reviews-rating/10512.md?page=2)
