Sucess Message Showing w/o Form Submission

Ask the community
,
1

Hi there! I followed this link (https://www.wix.com/corvid/example/product-reviews and was able to put reviews on each of my product pages.

I just need help with one last thing and I’m set! I click a button that brings up the Review Form lightbox, but even if I don’t submit a form (meaning I just close the lightbox), it still shows my Thank You message for submitting a review.

What’s the best way to go about this so that my site only shows the Thank You message if and only if a Review Form was submitted?

How the Reviews Work:

  • Product page shows reviews, total star ratings, and if product is recommended or not
  • Customer clicks on Add Review button on the product page
  • Review Form lightbox is brought up, customer fills up the fields, and clicks submit
  • Databases are refreshed and new star rating and recommendation stats are updated along with new review / Thank You message is shown on the product page when lightbox closes (this is where my problem starts, even if the lightbox is closed w/o form submission, the Thank You message appears)

Code for Review Form Lightbox

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

let productId;

$w.onReady(function () {

    productId = wixWindow.lightbox.getContext().productId;

    $w('#SubmitReviews').onBeforeSave(() => {
 if ($w('#radioRating').value === '') {
            $w('#rateError').show();
 return Promise.reject();
        }

        $w('#SubmitReviews').setFieldValues({
            productId,
            rating: $w('#radioRating').value
        });
    });
});

$w.onReady(function () {

    productId = wixWindow.lightbox.getContext().productId;

    $w('#SubmitReviews').onBeforeSave(() => {
 if ($w('#radioGroup1').value === '') {
            $w('#rateError2').show();
 return Promise.reject();
        }

        $w('#SubmitReviews').setFieldValues({
            productId,
            recommends: $w('#radioGroup1').value
        });
    });
});

$w('#SubmitReviews').onAfterSave(async () => {
 await updateStatistics($w('#radioGroup1').value);
    wixWindow.lightbox.close();
});

async function updateStatistics(isRecommended) {
 let stats = await wixData.get('review-stats', productId);

 if (stats) {
        stats.rating += parseInt($w('#radioRating').value, 10);
        stats.count += 1;
        stats.recommended += (isRecommended === "true") ? 1 : 0;
 return wixData.update('review-stats', stats)
    }

    stats = {
        _id: productId,
        rating: parseInt($w('#radioRating').value, 10),
        count: 1,
        recommended: (isRecommended === "true") ? 1 : 0
    }
 return wixData.insert('review-stats', stats)
}

export function radioRating_change(event, $w) {
    $w('#rateError').hide();
}

Code for Product Page

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

let product; 

$w.onReady(async function () {
    product = await $w('#productPage1').getProduct(); 
    initReviews(); 
});

async function initReviews() {
 await $w('#Reviews').setFilter(wixData.filter().eq('productId', product._id));
  showReviews();
  loadStatistics();
}

async function loadStatistics() {
 const stats = await wixData.get('review-stats', product._id);
 if (stats) {
 let avgRating = (Math.round(stats.rating * 10 / stats.count) / 10);
 let percentRecommended = Math.round(stats.recommended / stats.count * 100);
 let ratings = $w('#generalRatings');
        ratings.rating = avgRating;
        ratings.numRatings = stats.count;
        $w('#recoPercent').text = `${percentRecommended}% say you need to try this!`;
        $w('#generalRatings').show();
    } else {
        $w('#recoPercent').text = 'No reviews yet!';
    }
    $w('#recoPercent').show();
}

export function reviewsRepeater_itemReady($w, itemData, index) {
 if (itemData.recommends) {
        $w('#recommendation').text = 'I recommend this product!';
    } else {
        $w('#recommendation').text = "I don't recommend this product.";
    }
    $w('#oneRating').rating = itemData.rating;
 let date = itemData._createdDate;
    $w('#submissionTime').text = date.toLocaleString();
}

export function showReviews() {
 if ($w('#Reviews').getTotalCount() > 0) {
        $w('#reviewsStrip').expand();
        $w('#button1').expand();
    } else {
        $w('#reviewsStrip').collapse();
        $w('#button1').collapse();
    }
}

export async function addReview_click(event, $w) {
 const dataForLightbox = {
        productId: product._id
    };
 let result = await wixWindow.openLightbox('Review Form', dataForLightbox);
    $w('#Reviews').refresh();
    loadStatistics();
    $w('#thankYouMessage').show();
}
2

You didn’t share your code so it’s sorta hard helping. How do you submit a review? How do you close the Lightbox?

Share your code and explain what you are doing so we are able to assist.

3

Hi, Yisrael! Sorry about that, was kinda hasty about posting and forgot to add in the code. I updated my post with the code for both the product page and the lightbox. I hope this makes it clearer!

4

Some observations:

Your Lightbox code has multiple onReady() functions which could lead to unpredictable behavior. You should put all of the code that needs to run when the page is ready in one onReady() function, in the order that you want it to run.

You need to check the returned result when you close the Lightbox to see if a review was submitted or not. You can close the Lightbox, something like this to show that a review was submitted:

wixWindow.lightbox.close({"review" : "true"});

In the page code check for {“review” : “true”} as the returned value from the Lightbox.