Product Ratings & Reviews combined with Related Products - Review/ratings do not update to new product without refresh

Ask the community
, ,
1

Hello,

I have implemented the product ratings and reviews to and related products to my product page.

All working great accept one small issue;

  • If you follow a product displayed in the Related Items Repeater the ratings and reviews from the originating product a displayed. It is resolved if you refresh but of course can’t leave it like that.

I’m sure there is something simple I can do but can’t figure it.

my code:

//-------------Imports-------------//

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

//-------------related products Setup-------------//

$w.onReady(function () {
    loadRelatedProducts();
});

async function loadRelatedProducts() {
 let product = await $w('#productPage').getProduct();
 let relatedProductResults = await Promise.all([
            relatedProductsByTable(product),
            relatedProductsByPrice(product)
        ]);
 if (relatedProductResults[0].length > 0)
        showRelatedProducts(relatedProductResults[0]);
 else
        showRelatedProducts(relatedProductResults[1]);
}

async function relatedProductsByTable(product) {
 let productId = product._id;

 let relatedByTable = await Promise.all([
  wixData.query('relatedProducts')
  .eq('productA', productId)
  .include('productB')
  .find(),
  wixData.query('relatedProducts')
  .eq('productB', productId)
  .include('productA')
  .find()
 ]);

 let relatedProducts = [
  ...relatedByTable[0].items.map(_ => _.productB),
  ...relatedByTable[1].items.map(_ => _.productA)
 ];
 return relatedProducts;
}

async function relatedProductsByPrice(product) {
 let productId = product._id;

 let relatedByPrice = await wixData.query('Stores/Products')
        .between('price', product.price * 0.8, product.price * 1.2)
        .ne('_id', productId)
        .find();
 
 return relatedByPrice.items;
}

function showRelatedProducts(relatedProducts){
 if(relatedProducts.length > 0){
     relatedProducts.splice(4, relatedProducts.length);
  $w('#relatedItemsRepeater').onItemReady(relatedItemReady);
  $w("#relatedItemsRepeater").data = relatedProducts;
  $w("#relatedItems").expand();
 }
 else {
  $w("#relatedItems").collapse();
 }
}

function relatedItemReady($w, product){
 $w("#productImage").src = product.mainMedia;
 $w("#productName").text = product.name;
 $w("#productPrice").text = product.formattedPrice;
 $w('#productImage').onClick(() => {
  wixLocation.to(product.productPageUrl);
 });
}

//-------------reviews setup-------------//

let product;

$w.onReady(async function () {
    product = await $w('#productPage').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} % would recommend`;
        $w('#generalRatings').show();
    } else {
        $w('#recoPercent').text = 'There are 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.";
    }
 if (itemData.photo) {
        $w('#reviewImage').src = itemData.photo;
        $w('#reviewImage').expand();
    }
    $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();
    } else {
        $w('#reviewsStrip').collapse();
    }
}

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

export function resultsPages_click(event, $w) {
    $w('#Reviews').loadMore();
}
2 Likes
2

I have the same problem… I would like to have answer

3

Can someone drop me a tutorial on how can I connect the productId to the database? And also I cannot trigger the write a review button direct to review box (light box)

4

I have the same problem as leepage2. reviews are not updated if i choose another product from below :confused: could you guys help us out, please?

5

try this,
change the line

wixLocation.to (" https://yourwebsite.com " + product.slug);

6

I tried - It works! thank you very much!

7

I tried - It works! thank you very much!

8

Yep, tried and working. Thanks so much, really appreciated. Oh just incase anyone has issues I had to add the product page in the link to work for me:

wixLocation.to("https://yourwebsite.com/product-page/" + product.slug);
9

Hello leepage2 , the implementation of review and ratings you have done in wix store , right ?
because using a different data base i cannot apply the wix code you use. It doesn’t work with dynamic pages. thank you

10

Thanks - Works for me also !

11

@givemeawhisky I also have an issue with the Tutorial. The “Load More” button is always visible, even when you have just one review in your Repeater. How do you code the visibility of the button based on the numbers of reviews you have define to show in your repeater?
I still cannot solve this issue (you can check under any product page in www.chicdog.cl)..)

I also have a doubt regarding the star rating. It is possible to see the product rating summary beneath the product title, as is shown by Kudobuzz App? It is also possible to add the rating summary in the product Gallery item as it is done by the majority of e-commerce platforms?

I am now trying to define two flows for reviewers: Certified Client Purchase Review And Visitor Review. For the former the idea is to setup a Trigger Email 2 days after the Order is Fullfilled. Can I do this using dynamic values in a Trigger E-mail? I don’t see a value as an order.

For the Visitor Reviewers, how I can cross check if the visitor didn’t actually purchase that specific product?

12

there is an easy solution
in loadstatistics funtion in the else
just add this line to hide the rate
$w ( ‘#generalRatings’ ). hide ();