Rating in Repeater

Ask the community
,
1

Hi to all,
I would like to add a rating system to a repeater call back from a table of users.

I used the rating widget from wix but I can’t make it work.

Can anyone help me with the set up please.
Thank you

2
  1. Your DATABASE ?
  2. Your Project-Setup?
  3. Your CODE ?

Where are all these infos ???

3

Hi, thank you for the interest,
The database comes from a registration form that is being pulled to a repeater where I added a rating wix “widget” and the code looks like this:

2032×1684 456 KB

4

@vascoemail were you able to sort out the code?
I also need to display the ratings on the repeater of Item list from item page. (dynamic)
Three collections/data sets
Suppliers
Reviews
review-stats

This is my code in the item page using Wix example. Are you able to help me please?
Thank you

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

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

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

// Current product.
let product ;

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

$w . onReady ( async function () {
// Set the global product variable to the currently displayed product.
product = await $w ( ‘#dynamicDataset’ ). getCurrentItem ();
// Load the current product’s reviews using the initReviews() function.
initReviews ();
});

// Loads the current product’s reviews.
async function initReviews ( ) {
// Filter the “Reviews” dataset to contain only the reviews on the currently displayed product.
await $w ( ‘#Reviews’ ). setFilter ( wixData . filter (). eq ( ‘productId’ , product . _id ));
// Show the reviews after the filter was set and applied on the dataset
showReviews ();
// Load the current product’s statistics using the loadStatistics() function.
loadStatistics ();
}

// Load the current product’s statistics.
async function loadStatistics ( ) {
// Get the statistics data based on the current product’s ID.
const stats = await wixData . get ( ‘review-stats’ , product . _id );
// If statistics data for the product was found:
if ( stats ) {
// Compute the product’s average rating by dividing the total points by the number of ratings.
let avgRating = ( Math . round ( stats . rating * 10 / stats . count ) / 10 );
// Compute the percentage of reviewers that recommend the product.
let percentRecommended = Math . round ( stats . recommended / stats . count * 100 );
// Get the ratings element.
let ratings = $w ( ‘#generalRatings’ );
// Set the ratings element’s average rating to the value calculated above.
ratings . rating = avgRating ;
// Set the ratings element’s number of ratings to the count value from the statistics data.
ratings . numRatings = stats . count ;
// Set the text for the recommended percentage element.
$w ( ‘#recoPercent’ ). text = ${ percentRecommended } % would recommend ;
// Show the ratings element.
$w ( ‘#generalRatings’ ). show ();
// If there is no statistics data for the product:
} else {
// Set the text for the recommended percentage element to reflect the fact that there are no reviews.
$w ( ‘#recoPercent’ ). text = ‘There are no reviews yet’ ;
}
// Show the recommended percentage element only after it is populated to avoid flickering.
$w ( ‘#recoPercent’ ). show ();
}

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

// Set up each item in the reivews repeater as it is loaded.
export function reviewsRepeater_itemReady ( $w , itemData , index ) {
// If the reviewer recommends the item:
if ( itemData . recommends ) {
// Set the "recommend text.
$w ( ‘#recommendation’ ). text = ‘I recommend this supplier.’ ;
// If the reviewer does not recommend the item:
} else {
// Set the “don’t recomend” text.
$w ( ‘#recommendation’ ). text = “I don’t recommend this supplier.” ;
}

// If a photo was uploaded for the review: 
**if**  ( itemData . photo ) {  
    // Set the image URL from the item data. 
    $w ( '#reviewImage' ). src  =  itemData . photo ; 
    // Expand the image. 
    $w ( '#reviewImage' ). expand (); 
} 

// Set the ratings element's rating value. 
$w ( '#oneRating' ). rating  =  itemData . rating ;  

// Get the date that the review was entered. 
**let**  date  =  itemData . _createdDate ;  
// Format the date according to the date format settings on the user's computer. 
$w ( '#submissionTime' ). text  =  date . toLocaleString ();

}

//-------------Data Setup -------------//

// Perform some setup when the dataset filter was completed.
export function showReviews ( ) {
// If at least one review has been submitted:
if ( $w ( ‘#Reviews’ ). getTotalCount () > 0 ) {
// Expand the strip that displays the reviews.
$w ( ‘#reviewsStrip’ ). expand ();
// If there are no reviews:
} else {
// Collapse the strip that displays the reviews.
$w ( ‘#reviewsStrip’ ). collapse (); //otherwise, hide it
}
}

//-------------Event Handlers -------------//

// Set the action that occurs when a user clicks the “Write a Review” button.
export async function addReview_click ( event , $w ) {
// Create an object containing the current product’s ID to be sent to the review writing lightbox.
const dataForLightbox = {
productId : product . _id
};
// Open the “Review Box” lightbox, send it the object created above, and wait for it to close.
let result = await wixWindow . openLightbox ( ‘Review Box’ , dataForLightbox );
// After the review lightbox is closed, refresh the reviews dataset so the new review appears on the page.
$w ( ‘#Reviews’ ). refresh ();
// Reload the current products statistics to reflect the new rating.
setTimeout (() => {
loadStatistics ();
}, 2000 );
// Show a thank you message.
$w ( ‘#thankYouMessage’ ). show ();
}

5

I have also asked for help here with full screenshots.