Question: How to Display Average Rating from Wix Comments app, on Dynamic pages
Requirement Background: I’m using Wix Comments as a workaround to Wix Reviews, as the latter can only be integrated with Wix Stores & not other listing types like services, properties etc
Below is a Wix Comments Widget showing the exact component I need. However I want to show that info elsewhere; on the same page or another, via a text box or ideally a Ratings Display element.
[I’m not a coder but have built many features with online resources. I’ve been trying this for months but hitting walls, if y’all can find the way that would be mean a lot.]
Specific requirement & attempts:
The main challenge of querying & displaying the average rating was finally achieved & confirmed possible. But it only works for 1 comments widget. This is the working code:
// Working code for ***backend web module
import { Permissions, webMethod } from "wix-web-module";
import { comments } from "wix-comments.v2";
import { elevate } from "wix-auth";
const COMMENTS_APP_ID = "91c9d6a7-6667-41fb-b0b4-7d3b3ff0b02e"
export const getAverageRating = webMethod(
Permissions.Anyone,
() => {
return queryComments()
}
);
async function queryComments() {
const elevatedQueryComments = elevate(comments.queryComments)
const { items } = await elevatedQueryComments(COMMENTS_APP_ID).find();
console.log("items", items);
const totalRatings = items.reduce((a, b) => a + b.rating, 0);
const averageRatings = totalRatings / items.length;
return averageRatings;
}
// Working code for frontend
import { getAverageRating } from 'backend/comments.web'
$w.onReady(async function () {
const averageRating = await getAverageRating();
$w("#textbox").text = `Average Rating: ${averageRating}`;
});
⚠️However, the requirement is not yet solved. Now I'm stuck at the following point; as I need this on dynamic pages, all that's needed, is to show the average rating **based on each dynamic page** (using resource Id?) For a coder this should be a very basic modification of a few lines.
**1) How can this bit be modified properly?
*2) Also, if you can make a substitution to use a Ratings Display instead of a text box that'd be great❤️
GPT's attempt at modifying the basic working code, doesn't work:
// specialized GPT's reply to 'Modify the previous code to query comments based on resourceId by querying resourceId'
import { Permissions, webMethod } from "wix-web-module";
import { comments } from "wix-comments.v2";
import { elevate } from "wix-auth";
const COMMENTS_APP_ID = "91c9d6a7-6667-41fb-b0b4-7d3b3ff0b02e";
export const getAverageRating = webMethod(
Permissions.Anyone,
(resourceId) => {
return queryComments(resourceId);
}
);
async function queryComments(resourceId) {
const elevatedQueryComments = elevate(comments.queryComments);
// Query comments filtered by resourceId
const { items } = await elevatedQueryComments(COMMENTS_APP_ID)
.eq("resourceId", resourceId) // Querying based on resourceId
.find();
if (!items || items.length === 0) {
return { averageRating: 0, totalComments: 0 }; // Handle case when no comments are found
}
console.log("Filtered Comments:", items);
const totalRatings = items.reduce((sum, comment) => sum + (comment.rating || 0), 0);
const averageRatings = totalRatings / items.length;
return { averageRating: averageRatings, totalComments: items.length };
}
**Additional info:** API ref: [Velo Deps Wix Comments V 2 Comments Introduction | Velo](https://dev.wix.com/docs/velo/apis/wix-comments-v2/comments/introduction)
All this can be tested on your end. All that's needed is the Wix Comments app with Ratings on.
Querying is all done from the API directly, & has no connection to CMS collections. Wix Comments doesn't natively have a 'CMS collection', but only a simple page under apps.
When leaving comments, better login & do, rather than entering username which can mess up if not proper