Display Wix Comments Average Rating on Dynamic pages

Ask the community
, , ,
1

Question: How to Display Average Rating from Wix Comments app, on Dynamic pages
Product: Wix editor

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.

Screenshot 2025-02-21 111254
Screenshot 2025-02-21 111254989×556 35.3 KB

[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}`;
});

:warning: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

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

2

This was FINALLY SOLVED. Detailed here Wix Comments App rating summaries on Dynamic List repeaters

3

Thanks for taking the time to share the solution :purple_heart: