Ratings by User

Ask the community
,
1

I’m using the “RatingsInput and RatingsDisplay Display Example” that Yisrael posted on January 17, 2019, for a customer project. I’ve modified the code in the example located at https://www.grampsworkbench.com/Examples/Ratings . None of the repeater items appear to be connected via a dataset to extract information from the two data collections being accessed in the example. After setting up a dynamic page, I modified the code. The data in my collection didn’t populate in the repeater, so I added a dataset and connected the elements in the repeater to my collection, and everything displayed properly. The repeater items didn’t respond to the onClick event handler, so I added a button to submit the data to my lightbox. I also had to create a lightbox field in my collection to be able to access the lightbox. Only the first item in the repeater will appear in the lightbox after the “submit” button is pressed. Once the record is in the lightbox, I can add a new rating, but the display element isn’t updating. Lacking a coding background, I’ve tried to follow the logic in the example’s code as best I can, but right now, I’m stumped. If someone could take a look at my code and tell me what I am doing wrong, I would be appreciative.

Dynamic page code:

import { getExperts, getSearch } from 'backend/queries';
import wixWindow from 'wix-window';

$w.onReady(function () {
    $w('#photo').src = null; 

    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#title").text = itemData.title;
        let photo = itemData.photo;
        $item('#photo').src = itemData.photo;

        if (typeof itemData.numRatings === "undefined") {
            $item('#ratingsDisplay').avg = null; 
            $item('#ratingsDisplay').numRatings = 0;
        } else {
            if (itemData.numRatings === undefined || itemData.numRatings === null || itemData.numRatings === 0) {
                $item('#ratingsDisplay').avg = null; 
                $item('#ratingsDisplay').numRatings = 0;
            } else {
                $item('#ratingsDisplay').avg = itemData.avg;
                $item('#ratingsDisplay').numRatings = itemData.numRatings;
            }
        }
    });

    $w("#container2").onClick((event) => {
        let ratingIdData = {
            'expertId': event.context.itemId
        };
        wixWindow.openLightbox("Ratings", ratingIdData)
            .then((data) => {
                let receivedData = data;
                if (receivedData.changed === true) {
                    populateRepeater();
                }
            });
    });

    populateRepeater();
});

function populateRepeater() {
    getExperts().then(function (resp) {
        console.log('list of experts', resp.items);
        let items = resp.items;
        let experts = [];
        items.forEach(async function (item) {
            let expert = { "_id": item._id, "title": item.title, "photo": item.photo, "rating": item.rating, "numRatings": item.numRatings };
            experts.push(expert);
        });

        $w("#repeater1").data = []; 
        $w("#repeater1").data = experts; 
        $w('#repeater1').show(); 
    });
}

export function iCategory_change(event) {
    let newValue = event.target.value;
    console.log('filter value', newValue);
    if (newValue === 'all') {
        populateRepeater();
    } else {
        getSearch("expertise", newValue).then(function (resp) {
            let items = resp.items;
            let experts = [];
            items.forEach(function (item) {
                let expert = { "_id": item._id, "title": item.title, "photo": item.photo, "avg": item.avg, "numRatings": item.numRatings };
                experts.push(expert);
            });
            $w("#repeater1").data = []; 
            $w("#repeater1").data = experts; 
        });
    }
}

Lightbox code:

import { getExpert, rateExpert, getExpertRating, getUserExpertRating } from 'backend/queries';
import wixWindow from 'wix-window';

let expertID;

$w.onReady(function () {
    $w('#photo').src = null; // trick to prevent placeholder picture from displaying
    expertID = wixWindow.lightbox.getContext();

    getExpert(expertID).then(function (resp) {
 let item = resp.items[0];
        $w('#photo').src = item.photo;
        $w("#expertise").text = item.expertise;
        $w('#title').text = item.title;
        });
    loadStatistics(expertID);
});

async function loadStatistics(id) {
    getRating(id)
        .then(function (response) {
 let stats = response.items[0];
 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);
 // Get the ratings element.
 let ratings = $w('#ratingsDisplay');
 // 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;
                $w('#ratingsDisplay').show();
            } else {
 // if there is no statistics data for the product:
                $w('#ratingsDisplay').numRatings = 0;
            }
        })
        .catch(e => {
            console.log(e);
 // if there is no statistics data for the product:
            $w('#ratingsDisplay').numRatings = 0;
        });
}

export function ratingsInput1_change(event) {
 const newRating = $w('#ratingsInput1').value;
    rateExpert(expertID, newRating).then(function (resp) {
        loadStatistics(expertID); // refresh ratings display        
    });
}
2

This post can be closed. I ended up creating a table and modifying the Velo Tutorial: Capturing and Displaying Ratings code. The ratings are posting to my collection and calculating properly.