Displaying "Rating" from Wix Code Example in Other Page

Ask the community
,
1

Hi Everyone,

I have successfully built the “reviews” example that is displayed here on wix code in my web site. It looks awesome! Thank you to all the designers/developers that made that possible!

I display the rating something like this on my specific dynamic page:
6 Reviews. 2.5 out of 5 Traveler Rating.
Picture Below

I want to add specific product ratings to a database collection, to then display them in a repeater.

I am trying to get the rating from my Dynamic Page and populate a field in my database collection , this field’s name is “rank” . I have placed the specific Item’s Rating in an Input field in the Dynamic Page (" #input5 ").

I have tried the update function that is listed in the wix-data API with no luck so far. My idea is to populate this field with the current rating and update it in case new reviews are added.

I attach my code so far in relation to the update feature and an image of how everything is displayed on the dynamic page.

let toUpdate = {
	"rank": $w("#input5").value
};
wixData.update("alloperations", toUpdate);
});


I appreciate any help I can get with this.

Thanks in Advance!

2

Please attach screenshots of:

  1. The data collection alloperations
  2. The code that inserts the reviews in that data collection

Then I can help you.

3

Hi Andreas,

I am attaching the code that is used to render reviews, I have not yet been able to insert the data into the database collection, so far I’ve been able to populate the calculation of the reviews into an input field named “#input5”.

My idea is to insert this “#input5” value into a database under the field ‘rank’ (as shown in attached screenshot) and update it whenever new reviews change this value.

The following code is on the Dynamic Page, the last line insert the rating into “#input5”

function renderRating(reviews) {
	// compute the average rating
	let stats = reviews.reduce((agg, item) => {
		return {
			sum: agg.sum+item.rating, 
			count: agg.count+1
			};
		}, {sum: 0, count: 0});
					
	let rating = Math.round(stats.sum * 2 / stats.count) / 2;	
	$w('#text63').hide();
	$w('#rating').show();
	// HTML to have control over the formatting of the rating
	$w('#rating').html = `<p style="font-size:15px; line-height:1.2em; text-align:left"><font face="helvetica" color="gray"><span class="color_00">
<span style="letter-spacing:0em"><span style="font-weight:bold"><span style="font-size:15px">${rating} out of 5</span></span></span></span>
<span class="color_00"><span style="letter-spacing:0em"><span style="font-weight:light"><span style="font-size:15px">  traveler rating.</span></span></span>
</span></p>`;

$w("#input5").value =rating;

}

1543×918 226 KB

4

Somewhere you must get the _id field of the record where the rank record should be updated in. When you get that record from a query you will get back results and then

let item = results.item[0];
item.rank = $w("#input5").value;
wixData.update("alloperations", item);
5

Hi Andreas,

Thanks for your response,

I have tried the suggestion you gave me, however, it still does not perform the function i want it to.

I am not sure if the query is being performed correctly.

I attach my code:

function renderRating(reviews) {
	// compute the average rating
	let stats = reviews.reduce((agg, item) => {
		return {
			sum: agg.sum + item.rating,
			count: agg.count + 1
		};
	}, {
		sum: 0,
		count: 0
	});

	let rating = Math.round(stats.sum * 2 / stats.count) / 2;
	$w('#text63').hide();
	$w('#rating').show();
	// setting the rating as HTML to have fine grained control over the formatting
	$w('#rating').html = `<p style="font-size:15px; line-height:1.2em; text-align:left"><font face="helvetica" color="gray"><span class="color_00">
<span style="letter-spacing:0em"><span style="font-weight:bold"><span style="font-size:15px">${rating} out of 5</span></span></span></span>
<span class="color_00"><span style="letter-spacing:0em"><span style="font-weight:light"><span style="font-size:15px">  traveler rating.</span></span></span>
</span></p>`;


	$w("#input5").value = rating;

	wixData.query("alloperations")
		.eq("rank")
		.find()
		.then((results) => {
				let item = results.item[0];
				item.rank = $w("#input5").value;
				wixData.update("alloperations", item);
				
				});
				}

Another idea that has ocurred to me is to make a ‘form submission’ that submits the input value to the database on page load without the user having to click a button. What are your thoughts on that?

Thanks in advance!