Gift Quiz, Result Page Not Working

Ask the community
,
1

Hi, I’m trying to create a gift quiz that recommends site products based on results. The quiz is flowing, but when it gets to the result page, it is still showing the default repeater. Wix is showing me two error messages within these pieces of code below, and I’m not sure if that has anything to do with it. I connected the results slide to the dataset to see if that would make a difference, but it is showing me all of the products except the ones with the correct keywords. Please help!

export async function quizSlides_change ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
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 ;
}

2

Hey Imani,

To better help, have you written the function to handle the styling of the results repeater when it gets the new data?

3

This is the rest of the code I have. The bottom is what I have to display the product on the repeater “recommendedProducts.”

function filterProductsPerAnswer ( quizProducts , answer ){
const filteredProducts = quizProducts . filter ( quizProduct => {
return quizProduct . keywords . includes ( answer )
});
return filteredProducts ;
}

function getRandomItemsFromArray ( productsArr , numberOfItems ){
const productIds = ;
let numberOfProducts = productsArr . length ;

**for**  ( **let**  i  =  0 ; i  <  numberOfItems  &&  i  <  numberOfProducts ; i ++){ 
    **const**  randomIndex  =  getRandomInt ( 0 , productsArr . length  -  1 ); 
    productIds . push ( productsArr [ randomIndex ]); 
    productsArr . splice ( randomIndex ,  1 ); 
} 
**return**  productIds ;

}

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 ;

}

4

Alright.

The first thing to check is that all of the event handlers that are connec

366×537 9.74 KB

ted via the UI are setup correctly. So the recommendedProducts repeater should have this recommendedProducts_itemReady function attached as its onItemReady event handler. That event handler triggers for each of the repeater items whenever they get new data.

If that’s already setup, you can try console.log ging the results of await getProductsData ( quizProducts ), to make sure that the data being sent back there is valid. If the repeater isn’t updating at all, there’s a chance that the array of products that’s being returned by that call does not have an “id” field for each item.

Let me know if either of these works

5

@imanimgabriel1 , You wrote, “two error messages within these pieces of code”…

What error messages? On what lines of code?

6

I have a database called “productKeywords” with a product field & keywords. quizProducts is showing as declared “WixDataQueryResult” & not an array, but I want it to be the filtered selection of products. Should I create a new database? or add a new field?

7

For

quizProducts = quizProducts . map ( quizProduct => quizProduct . productId );

it’s telling me property ‘map’ does not exist on type “WixDataQueryResult”
&

quizProducts = getRandomItemsFromArray ( quizProducts , numberOfSlides )

the error is with quizProducts & it says that I’m trying to assign an object of type ‘any[ ]’ to a variable that is declared as “WixDataQueryResult”
I have a database named “productKeywords” & a dataset “productKeywords dataset”/#dataset1

I’m not sure why the code isn’t working.

8

That issue is coming because of the end of the ‘getKeywordsPerProduct’ function. It’s letting the rest of the code know the type of variable quizProducts is, which is causing those Type error messages.

That variable name seems to be making the error popup, because in the getKeywordsPerProduct function, you’re using the same variable productsKeywords to handle the query result and to return as the new array. To solve it, try changing the name of the variable from

let productsKeywords = await wixData.query //…
to: let results = await wixData.query //…

and then update the following line in the function to ‘let productsKeywords = results.items;’

That should remove those errors.