HELP - Highest Rated Product to work with Product ratings & Reviews

Ask the community
, ,
1

Hello,

I have implemented both the Highest Rated (wix article https://www.wix.com/code/home/example/Highest-Rated-Products) and Product reviews and ratings (wix article https://www.wix.com/code/home/example/Shop-Reviews) code largely successfully.

The product ratings and reviews are working on product pages.

The issue is with Highest Rated element - when I query Database productRatings (as instructed in article) to get the 4 highest rated items the page just fills with all products with no ratings (I guess this is because the productRatings database is empty when I would have expected this to be filled - if i manually add some it works). I then tried to query the the ratings from the reviews database which worked somewhat (I get 3 products reviewed but this ratings are not averaged and it doesn’t show any with same rating).

Code i changed to get this far:

$w.onReady(async function () {
 // Query the "productRating" collection to find the top rated products.
 let highestRated = await wixData.query('productRating').descending('rating').limit(NUMBER_OF_PRODUCTS_TO_SHOW).find(); 

$w.onReady(async function () {
 let highestRated = await wixData.query('reviews').descending('rating').limit(NUMBER_OF_PRODUCTS_TO_SHOW).find();

With all the backend .js associated with this it’s out of my depth. So either there is something in there that needs altering so it populates or maybe i need to query it from the review-stats database and run some async code to calculate stats like done the product reviews and ratings code (example below) but i’m not sure how to make this work:

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 ratings = $w('#generalRatings');
        ratings.rating = avgRating;
        ratings.numRatings = stats.count;
}

here is my whole page code:

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

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

//-------------Global Variables-------------//

// Number of top rated products to show.
const NUMBER_OF_PRODUCTS_TO_SHOW = 4;

//-------------Page Setup-------------//

$w.onReady(async function () {
 // Query the "productRating" collection to find the top rated products.
 let highestRated = await wixData.query('reviews').descending('rating').limit(NUMBER_OF_PRODUCTS_TO_SHOW).find();
 // Extract the returned products from the query results.
    highestRated = highestRated.items;
 // Extract the IDs from the returned products.
 const highestRatedIDs = highestRated.map(item => item.productId);
 // Query the "Products" collection to find the full product data for the products with the extracted IDs.
 let correspondingProducts = await wixData.query('Stores/Products').hasSome('id', highestRatedIDs).find();
 // Extract the returned product data from the query results.
    correspondingProducts = correspondingProducts.items;
 
    console.log(highestRated);
    console.log(correspondingProducts);

 // Match the highest ratings to their corresponding products.
 // For each product collection item:
 for (let i = 0; i < correspondingProducts.length; i++) {
 // For each top rated product:
 for (let j = 0; j < highestRated.length; j++) {
 // If the product IDs match:
 if (correspondingProducts[i]._id === highestRated[j].productId) {
 // Set a rating property in the product item to be the products corresponding rating. 
                correspondingProducts[i].rating = highestRated[j].rating;
            }
        }
    }
 // Populate the repeater with the product and rating information.
    $w('#repeater1').data = correspondingProducts;
});

//-------------Repeater Setup-------------//

// Set up each item in the repeater when it is populated with data.
export function repeater1_itemReady($w, itemData, index) {
 // If the site is being viewed on a mobile site:
 if (wixWindow.formFactor === 'Mobile') {
 // Show the "Add to Cart" button because there is no hover on mobile.
        $w('#addToCart1').show();
    }
 // Populate the item's elements from the item data.
    $w('#productName').text = itemData.name;
    $w('#price').text = itemData.formattedPrice;
    $w('#productImg').link = `/product-page/${itemData.slug}`;
    $w('#productImg').src = itemData.mainMedia;
    $w('#ratingsDisplay1').rating = itemData.rating;
 // Set the action that occurs when a user clicks the "Add to Cart" button.
    $w('#addToCart1').onClick(() => {
 // Add the current item to the shopping cart.               
 if (isProductOptions(itemData)) {
            $w("#shoppingCartIcon1").addToCart(itemData._id, 1, { choices: { Color: 'red' } });
        } else {
            $w("#shoppingCartIcon1").addToCart(itemData._id);
        }
    });
}

//-------------Hover Functionality-------------//

// Set the action that occurs when a user mouses into the product image.
export function productImg_mouseIn(event, $w) {
 // Show the "Add to Cart" button.
    $w('#addToCart1').show();
}

// Set the action that occurs when a user mouses out of the item's container box.
export function productImg_mouseOut(event, $w) {
 // Hide the "Add to Cart" button.
    $w('#addToCart1').hide();
}

//Checking if the product added has product options (color for example)
function isProductOptions(productData){
 return Object.keys(productData.productOptions).length;
}

I feel I am really close so any help would be appreciated.

Regards,

Lee