Hi All,
I am trying to combine Repeaters with Reviews (https://www.wix.com/code/home/example/Reviews). I just want people to be able to give reviews on multiple items at once. Before I start digging into this and trying to build a web of code, does anyone know if this even possible?
Even if I can get the review interface working, I feel like I am going to run into issues trying to save the rating to each item back to the dataset.
Here is a snippet of the code. I just included the repeater section, since virtually everything else is the same functions as the Reviews Article. Right now, when I highlight over one of the Repeater’s ratings, it highlights all other repeaters as well, not just the individual one.
Any thoughts?
$w("#acceptedAppRepeater").onItemReady( ($w, itemData, index) => {
$w("#image1").src = itemData.profile_picture;
$w("#acceptedAppName").text = itemData.name;
$w("#clearStarsHoverHotspot").onMouseIn( (event, $w) => {
console.log(itemData.name);
clearStarHover();
});
for (let i=0; i < 5; i++) {
$w(starsId[i]).onClick(starClick(i));
$w(starsActiveId[i]).onClick(starClick(i));
$w(starsId[i]).onMouseIn(starHover(i));
$w(starsActiveId[i]).onMouseIn(starHover(i));
}
showSelectedStars();
});
$w("#acceptedAppRepeater").data = applicantRepeater;
Hi,
It seems that you ran into a classic Javascript closure issue.
To my understanding, you assigned the same onClick and onMouseIn functions for all repeated items. The meaning of it that if you hover or click one, all will be affected.
If, However, you create an inline onClick and onMouseIn function for each item, each such event will be handled by the specific element that triggered the event.
Ohad – Huge help, I think I’ve “solved” it, but my brain hurts and I am nervous I coded a web of inefficiency. Any chance you’d be able to give me a quick logic check?
I followed your direction and created an inline function for each item’s onClick & onMouseIn. Additionally, I discovered that I had to add all of the other functions, "starClick, “starHover”, etc inline as well. They would not work otherwise, which I found odd. I then modified the reviewsBeforeSave so that upon save, it filters the dataset to each respective item, then setsFieldValue of the rating. It works, but at times it does lag, which is why I think I did it slightly wrong.
Final question aside from your logic check. Is there any way I can build off this, to also allow for a user to add an actual written review with a repeater? I assume until Wix releases the User Inputs into repeaters, it really is not possible.
Here’s the code I have:
$w("#acceptedAppRepeater").onItemReady( ($w, itemData, index) => {
$w("#image1").src = itemData.profile_picture;
$w("#acceptedAppName").text = itemData.name;
$w("#container10").onMouseIn( (event, $w) => {
let selectedStar = 0;
showSelectedStars();
$w("#submitRatings").onClick( (event, $w) => {
reviewsBeforeSave(itemData.application_id);
});
for (let i=0; i < 5; i++) {
$w(starsId[i]).onClick(starClick(i));
$w(starsActiveId[i]).onClick(starClick(i));
$w(starsId[i]).onMouseIn(starHover(i));
$w(starsActiveId[i]).onMouseIn(starHover(i));
}
$w("#clearStarsHoverHotspot").onMouseIn( (event, $w) => {
clearStarHover();
console.log("Clear Star Hover");
});
function showStars(numberOfStars) {
for (let i=0; i < 5; i++) {
if (i < numberOfStars)
$w(starsActiveId[i]).show();
else
$w(starsActiveId[i]).hide();
}
}
function starHover(index) {
return function(event) {
showStars(index+1);
};
}
function starClick(index) {
return function(event) {
selectedStar = index+1;
showSelectedStars();
};
}
function showSelectedStars() {
showStars(selectedStar);
console.log("selectedStar: " + selectedStar);
}
function clearStarHover() {
showSelectedStars();
}
function reviewsBeforeSave(application_id) {
$w("#reviewsDataset").setFilter( wixData.filter()
.eq("_id", application_id)
)
.then( async () => {
$w("#reviewsDataset").setFieldValue('userRating', selectedStar);
await $w("#reviewsDataset").save();
});
}
});
});
$w("#acceptedAppRepeater").data = applicantRepeater;
}