Important forum update

This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.

Members

To see this working, head to your live site.

Create Reviews in Wix Stores product pages - Beginner friendly

Code Queen Nayeli · 2022-02-11T09:07:21.544Z

Create product reviews for Wix Stores product page - Velo Tutorial 2022 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

in Tips, Tutorials, Examples

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,

10 comments

10 Comments

leslehill

Feb 20, 2023

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

Unknown member

Jul 06, 2022

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

TerranMade

Apr 06, 2022

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!

TerranMade

Jan 16, 2023

Replying to

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

Unknown member

Mar 02, 2023

Replying to

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

Unknown member

Mar 02, 2023

Replying to

Did you get this fixed ?

Federico Gaspari

Feb 11, 2022

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

Code Queen Nayeli

Feb 11, 2022

•

Replying to

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

How can we make the product better?

Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.