Hello! I’m having a little bit of trouble with some of my code and I’m hoping someone out there may be able to help me out. I’ve looked through the forum and haven’t been able to find a similar issue, so I apologize if I missed someone else’s answer to my problem.
So, I’m attempting to use Wix’s “Gift Quiz” (ie a recommended products quiz) that they have a video and a few posts on. I believe that I have worked my way through all of the other problems with the quiz (included some code errors that were mistakenly left in by the writer, it seems), but have arrived at one that I just can’t seem to figure out! For those not familiar with it, it’s basically a slideshow with buttons, that advances slides when you press one of said buttons. When you reach the end of the “quiz”, it displays a results page based on which buttons your pressed. My problem is that the repeater in the final slide of the quiz just won’t show any of my products or information, although it does load in with the default placeholder text, pictures, and such.
I believe I have found the main issue, but I’m not sure how to fix it. Based on my amateur level deduction, it seems that, although I have an “onitemready” event handle on the repeater, it won’t properly run the function when the user reaches the final slide of the slideshow, which holds the repeater. I determined this by adding the console.log (“It works”), and running a preview. However, “It works” never shows up in the log, leading me to believe that the function isn’t running in the first place. Please note that the repeater is embedded in the last slide of a slideshow, so this may have something to do with the problem.
I expect that once the user reaches the last slide, the repeater should load and trigger the “onitemready” once it is finished, and this should run the following code (which of course, doesn’t happen). The very last section of code is as follows (I’ll post the entire code at the end):
export function recommendedproducts_itemReady($item, itemData, index) {
$item('#name').text = itemData.name;
$item('#image').src = itemData.mainMedia;
$item('#image').link = itemData.productPageUrl;
$item('#price').text = itemData.formattedPrice;
console.log("It works");
}
As I mentioned, although the default repeater is displayed, none of the respective parts of the repeater are replaced with this new information. “It works” does not show up in the console log, either.
Thank you very much for taking the time to read through this! I would greatly appreciate any help! I’ll post the entire code here:
import wixData from 'wix-data';
const selectedAnswers = [];
const quizAnswersIds = ["80s","90s","00s","10s","current","collect","hang","both","low","medium","high","veryhigh","nolimit"];
let numberOfSlides;
$w.onReady(function () {
numberOfSlides = $w('#quizSlides').slides.length;
quizAnswersIds.forEach(answer => {
$w(`#${answer}`).onClick (() => {
selectedAnswers.push(answer);
$w('#quizSlides').next();
})
})
});
export async function quizSlides_change(event) {
if (isQuizFinished()) {
let quizProducts = await getKeywordsPerProduct();
selectedAnswers.forEach(answer => {
quizProducts = filterProductsPerAnswer (quizProducts, answer)
});
quizProducts = quizProducts.map(quizProduct => quizProduct.productId);
quizProducts = getRandomItemsFromArray (quizProducts, numberOfSlides)
$w("#recommendedproducts").data = await getProductsData(quizProducts);
}
}
function isQuizFinished(){
return $w('#quizSlides').currentIndex === numberOfSlides - 1;
}
async function getKeywordsPerProduct() {
let ProductKeywords = await wixData.query("ProductKeywords").find();
ProductKeywords = ProductKeywords.items;
ProductKeywords = ProductKeywords.map(item => {
return {
productId: item.product,
keywords: item.keywords.split(",")
}
});
return ProductKeywords;
}
function filterProductsPerAnswer(quizProducts,answer){
const filteredProducts=quizProducts.filter(quizProduct => {
return quizProduct.keywords.includes(answer)
});
return filteredProducts;
}
function getRandomItemsFromArray(productsArr, numberOfItems){
const productsIds = [];
let numberOfProducts = productsArr.length;
for (let i=0; i<numberOfItems && i<numberOfProducts; i++) {
const randomIndex = getRandomInt(0,numberOfProducts - 1);
productsIds.push(productsArr[randomIndex]);
productsArr.splice(randomIndex,1);
}
return productsIds;
}
function getRandomInt(min,max) {
return Math.floor(Math.random() + (max - min +1) + min);
}
async function getProductsData(productsIds) {
const productsData = await wixData.query("Stores/Products")
.hasSome("_id", productsIds)
.find();
return productsData.items;
}
export function recommendedproducts_itemReady($item, itemData, index) {
$item("#name").text = itemData.name;
$item('#image').src = itemData.mainMedia;
$item('#image').link = itemData.productPageUrl;
$item('#price').text = itemData.formattedPrice;
console.log("It works");
}
