Hello there!
I was exploring WixCode example on Recipe/Review and kind of adopting it to my website.
Of particular interest was the ‘Add a Review’ Light box where a user can post a review on a recipe or a product etc…
But, every time I try to ‘Add review’ in the Preview mode I’m getting a ‘Typeerror’ on the console. It says ‘TypeError: $w(…).onClick is not a function’ . (See below)
I’m guessing this refers to following lines in the code as it doesn’t allow me to select a star.
$w.onReady(function () {
// set star events and init the stars
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("#reviewsDataset").onBeforeSave(reviewsBeforeSave);
$w("#reviewsDataset").onAfterSave(reviewsAfterSave);
});
What is weird is that it was working perfectly fine last night, it only started showing this error this morning.
Is there a fix? Thanks very much in advance!
The full ‘Page code’ for the lightbox is pasted below:
import {lightbox} from “wix-window”;
const starsId = [‘#starGray1’, ‘#starGray2’, ‘#starGray3’, ‘#starGray4’, ‘#starGray5’];
const starsActiveId = [‘#starBlue1’, ‘#starBlue2’, ‘#starBlue3’, ‘#starBlue4’, ‘#starBlue5’];
let selectedStar = 0;
$w.onReady(function () {
// set star events and init the stars
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("#reviewsDataset").onBeforeSave(reviewsBeforeSave);
$w("#reviewsDataset").onAfterSave(reviewsAfterSave);
});
function starClick(index) {
return function(event) {
selectedStar = index+1;
checkEnablePostButton();
showSelectedStars();
};
}
function showSelectedStars() {
showStars(selectedStar);
}
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 clearStarHover() {
showSelectedStars();
}
function reviewsBeforeSave() {
$w(“#reviewsDataset”).setFieldValue(‘rating’, selectedStar);
let reviewId = lightbox.getContext().id;
$w(“#reviewsDataset”).setFieldValue(‘recipeId’, reviewId);
}
function reviewsAfterSave() {
lightbox.close();
}
function checkEnablePostButton() {
let item = $w(“#reviewsDataset”).getCurrentItem();
if (selectedStar > 0 && !!item.name && !!item.review)
$w(‘#postButton’).enable();
else
$w(‘#postButton’).disable();
}
export function closeButton_onClick(event) {
lightbox.close();
}
export function clearStarsHoverHotspot_onMouseIn(event) {
clearStarHover();
}
export function reviewsDataset_onItemValuesChanged(event) {
checkEnablePostButton();
}
