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