Create Reviews in Wix Stores product pages - Beginner friendly

Show and tell
, , ,
1

I have created an overview on YouTube to cover the general aspects of what to expect. All of the specific steps, configurations and code snippets are located in the tutorial article.

The tutorial explains how to:

  • Create database

  • Create a triggered email template

  • Add backend code for triggered email

  • Create a lighbox

  • Build a form inside of the lightbox

  • Add dataset connections to the form

  • Add custom code to the lightbox

  • Create a Review section on the Wix Stores product page using a Strip element

  • Design and connect a repeater element

  • Add code to Product page

  • Use the live database to approve comments and mark as verified purchaser

It includes mini videos to help with each step un case you have never coded or have experience in that specific bit.

It has a copy the code function to easily plug n play as you follow along.

Link to tutorial: https://www.totallycodable.com/post/create-filtered-product-reviews-for-wix-stores-product-page

Link to YouTube video: https://youtu.be/D0z9lPVlnkA

[Note: This is not like Wix’s existing tutorial. It has a simpler approach to collecting and displaying data. It does not do start rating average calculations. It only uses 1 database collection.]

Love,
CQ

3 Likes
2

Hello looks great, will be possible to add the reviews in structured data for SEO?

3

@fedrodigital You can use any static or dynamic variables to write your structured data code for you product page. The structured data is about the product itself not specifically about the reviews. Bits of a single review and / or aggregate rating are part of the google product reviews structured data properties, so yes you can add whatever info you want.

Any structured data you write via code will override the pages settings for structured data.

Just note that even if structured data is added ---- Google does not guarantee to publish it as so.

4

Thank you SO MUCH for this! I just added it to my site today and almost everything is working well! My only issue is that all of the reviews are showing up on ALL of the product pages, not just the ones they correspond to. Is there a fix for that? Thanks again!

5

Make sure that the reference field is correct. Each review should be ‘tagged’ to one product. So check that section to see what is happening. It could be anything — the product is not saving into the correct field, the wrong information is being saved, the filter could be wrong, etc. (Just so many possibilities. Retrace each step to make sure you didn’t miss anything)

P.s. Thanks for watching!

6

i want to link it directly like how amazonn does i.e
1> i createa automation form for feedback
2> then i want to display all those feedbacks based on what they have purchased
3> example like if they purchase a red shoe (the red shoe buyer feedback should be shown below)
please tell me a easy way to do so

7

Hi Tangi, did you get this fixed? I seem to be having the same issue.

8

Hi! I actually don’t remember what I did to get it fixed, but here’s my code if you want to compare and contrast.

import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

let id;
let name;
let image;

$w.onReady(function () {

    $w('#productPage1').getProduct()
        .then((product) => {
            id = product._id;
            name = product.name;
            image = product.mainMedia;

            wixData.query("ReviewsSubmitted")
                .eq("reference", id)
                .eq("approved", true)
                .find()
                .then((results) => {
                    if (results.items.length > 0) {
                        $w('#repeater1').expand();
                        $w('#noReviews').collapse();
                        $w("#reviews").setFilter(wixData.filter()
                                .eq("reference", id)
                                .eq("approved", true)
                            )
                            .then(() => {
                                console.log("Dataset is now filtered");
                                let cq;
                                cq = "activated";
                                $w("#repeater1").onItemReady(($item, itemData) => {
                                    let verified = itemData.verifiedPurchaser;
                                    if (verified) {
                                        $item("#verified").show();
                                    }
                                });
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    } else {
                        console.log("This item has no reviews yet");
                        $w('#repeater1').collapse();
                        $w('#noReviews').expand();
                    }
                })
                .catch((error) => {
                    let errorMsg = error.message;
                    let code = error.code;
                });
        })
        .catch((error) => {
            console.error(error);
        });

    wixLocation.onChange((location) => {
        let newPath = location.path;
        $w('#productPage1').getProduct()
            .then((product) => {
                id = product._id;
                name = product.name;
                image = product.mainMedia;

                wixData.query("ReviewsSubmitted")
                    .eq("reference", id)
                    .eq("approved", true)
                    .find()
                    .then((results) => {
                        if (results.items.length > 0) {
                            $w('#repeater1').expand();
                            $w('#noReviews').collapse();
                            $w("#reviews").setFilter(wixData.filter()
                                    .eq("reference", id)
                                    .eq("approved", true)
                                )
                                .then(() => {
                                    console.log("Dataset is now filtered");
                                })
                                .catch((err) => {
                                    console.log(err);
                                    let cq;
                                    cq = "activated";
                                    $w("#repeater1").onItemReady(($item, itemData) => {
                                        let verified = itemData.verifiedPurchaser;
                                        if (verified) {
                                            $item("#verified").show();
                                        }
                                    });
                                });
                        } else {
                            console.log("This item has no reviews yet");
                            $w('#repeater1').collapse();
                            $w('#noReviews').expand();
                        }
                    })
                    .catch((error) => {
                        let errorMsg = error.message;
                        let code = error.code;
                    });
            })
            .catch((error) => {
                console.error(error);
            });
    });

});

export async function startReview_click(event, $w) {
    const dataForLightbox = {
        productId: id,
        prodName: name,
        prodPic: image,
    };

    let result = await wixWindow.openLightbox('review', dataForLightbox);
    $w('#reviews').refresh();
}
9

Hi folks - really excited to get customer reviews up and running. New at Velo for Wix and desparate for some help. I cant get repeater to show up after I’ve added and approved reviews. Thoughts of things I could check? Txs

10

I have the same issue. Did anyone find a solution?

11

Did you get this fixed ?

12

Hi, thank you for the great tutorial! I am unable to get the ‘Write a Review’ button to work. I’ve tried added the onClick event handler startReview_click, but no luck.

Has anyone else had this issue? If so, were you able to resolve it?

13

It could be anything….

For example, are the elements labeled the same way they are listed in the code? Is the button enabled? Are there any elements accidentally covering the button preventing it from being clicked on?

Etc

1 Like
14

Did’t have seen you for a long time. :blush:

1 Like
15

Hi @CODE-NINJA !

Well hopefully you will see me more. I was teaching at a school.

But I am having a baby soon —— so I will be working from home from now on.

1 Like
16

Congrats! Will be a → CODER !

1 Like
17

Yes he will because his Dad is a programmer also :joy: :joy: :joy:

1 Like
18

Oh, that was a new information ! Fullstack CODER-FAMILY! Wow!
I already see → you are creating a CODE-CLAN :rofl:

All i wanted to say → nice to see you again after such a long time!

I started with YOUR videos! :wink:

1 Like