Create Reviews in Wix Stores product pages - Beginner friendly

code-queen · February 11, 2022, 9:07am

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

fedrodigital · February 11, 2022, 10:14am

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

code-queen · February 11, 2022, 1:38pm

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

admin69419 · April 6, 2022, 10:14pm

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!

code-queen · April 6, 2022, 10:56pm

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!

sparklewebdesigns · July 6, 2022, 4:18pm

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

hello17743 · January 16, 2023, 11:20am

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

admin69419 · January 16, 2023, 6:25pm

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();
}

leslehill · February 20, 2023, 9:06pm

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

gavin110222834 · March 2, 2023, 8:42pm

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

gavin110222834 · March 2, 2023, 8:52pm

Did you get this fixed ?

Ryan_B · January 13, 2024, 10:11pm

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?

codequeen · January 13, 2024, 10:30pm

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

russian-dima · January 13, 2024, 10:33pm

Did’t have seen you for a long time.

codequeen · January 13, 2024, 10:48pm

Hi @russian-dima !

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.

russian-dima · January 13, 2024, 11:01pm

Congrats! Will be a → CODER !

codequeen · January 13, 2024, 11:07pm

Yes he will because his Dad is a programmer also

russian-dima · January 13, 2024, 11:10pm

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

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

I started with YOUR videos!