Hi, I am making a gift quiz and have a problem. As you can see below photo it is a problem with "await" word. What is the solution?

Ask the community
, ,
1

FULL CODE:

import wixData from ‘wix-data’;
const selectedAnswers = ;
const quizAnswersIds = [“3m2”, “6m2”, “9m2”,
“more9m2”, “house”, “apartment”, “other”,
“fullrenovation”, “withwalls”, “withoutwalls”, “tilesbath”, “alltiles”, “floortoilet”, “wallhungtoilet”
];
let numberOfSlides;
$w.onReady(() => {
numberOfSlides = $w(‘#quizSlides’).slides.length;
quizAnswersIds.forEach(answer => {
$w(#${answer}).onClick(() => {
selectedAnswers.push(answer);
$w(‘#quizSlides’).next();
})
})
});
export 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 productsKeywords = await wixData.query(“productsKeywords”).find();
productsKeywords = productsKeywords.items;
productsKeywords = productsKeywords.map(item => {
return {
productId: item.product,
keywords: item.keywords.split(“,”)
}
});
return productsKeywords;
}
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, productsArr.length -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($w, itemData, index) {
$item(‘#name’).text = itemData.name;
$item(‘#image’).src = itemData.mainMedia;
$item(‘#image’).link = itemData.productPageUrl;
$item(‘#price’).text = itemData.formattedPrice;
}

2

Change line number 20 to:

export async function quizSlides_change(event) {
3

Do you know why I get a blank page after choosing all the answers?
I mean repeater is not showing the products

4

http://prntscr.com/pzow9m

5

@kkalviai no. I’m not sure what you mean, I don’t see any quiz in the link you posted, and you didn’t post enough details.

6

@jonatandor35 https://www.kbrebuilding.dk/quiz-for-bathroom

Try to use the quiz. The problem is that in the end of the quiz code should choose a bathroom for you.

7

@kkalviai post your code.

8

@jonatandor35

import wixData from ‘wix-data’;
const selectedAnswers = ;
const quizAnswersIds = [“3m2”, “6m2”, “9m2”,
“more9m2”, “house”, “apartment”, “other”,
“fullrenovation”, “withwalls”, “withoutwalls”,
“tilesbath”, “alltiles”, “floortoilet”, “wallhungtoilet”
];
let numberOfSlides;
$w.onReady(() => {
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 productsKeywords = await wixData.query(“productsKeywords”).find();
productsKeywords = productsKeywords.items;
productsKeywords = productsKeywords.map(item => {
return {
productId: item.product,
keywords: item.keywords.split(“,”)
}
});
return productsKeywords;
}
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, productsArr.length -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) {
// Query the “Products” collection for products whose ID is one of the specified IDs.
const productsData = await wixData.query(“Stores/Products”)
.hasSome(“_id”, productsIds)
.find();
// Return the matching products.
return productsData.items;
}
export function recommendedProducts_itemReady($item, itemData, index) {
// Populate the elements from the current item’s data.
$item(‘#name’).text = itemData.name;
$item(‘#image’).src = itemData.mainMedia;
$item(‘#image’).link = itemData.productPageUrl;
$item(‘#price’).text = itemData.formattedPrice;
}

9

@kkalviai sorry too long. I don’t have time to gover over all of it. But basically I’d write something like:

import wixData from 'wix-data;
let allAnswers =  ['answer1', 'answer2'/*etc*/], selected = [], numberOfQuestions = 5;
$w.onReady(() => {
    allAnswers.forEach(e => {
    $w(`#${e}`).onClick(event => {
        selected.push(event.target.id);
        $w('#quizSlides').next();
        if (selected.length === numberOfQuestions) {runSearch(selected);}
    })
})
    $w('#repeater1').onItemReady(($i, iData, inx) => {
        [$i('#name').text, $i('#image').src, $i('#image').link,         $i('#price').text] = [iData.name, iData.mainMedia,  iData.mainMedia, iData.productPageUrl,iData.formattedPrice ];
    })
function runSearch(keywords){
wixData.query('Products')
.hasAll('productKeywords', keywords)//or maybe you prefer hasSome() ?
.find()
.then(r => {
    let items = r.items;
    if(r.items.length > 0) {
        $w('#repeater1').data = items;
    }
})
.catch(err => console.log(err));
}
10

Sorry if it’s not helping. Maybe some one else will be able to review your code.