New Video - Create a Gift Quiz

Show and tell
, ,
1

Hi everyone,

We have a new video,
Learn how to create a gift-buying quiz for your online shoppers using a slideshow and repeater. In this video, you’ll create a new database collection to manage keywords for all of your products. This collection will reference your store’s “Products” collection. With the wixData API and a few functions, these two collections will work together to help customers find the perfect gift. Once customers complete the quiz, they will be presented with a recommended product in your repeater.

1 Like
2

Hi, thank you for posting this video I tried tried to stimulate the same scenario but my code is not working can you help please.

3

Hi Gladdys67,
I would happy to help, can you please elaborate on your code and the problem?

4

thank you for responding, I watched the video (thank you for that it was very helpful) and follow the transcript provided in the link I created my product database and gave each product a keyword. My goal same as yours in the video was to recommend the best product for my customer based on their answers to the quiz questions. If I send you a copy of the code I am using can you tell me what I did wrong?

5

hey is the code I used similar to your except for the key words

import wixData from ‘wix-data’;
const selectedAnswers = ;
const quizAnswersIds = [“stress”, “anxiety”, “depression”, “chocolate”, “mint”, “veryoften”, “often”, “rarely”, “sleep”,“insomnia”,
“pain”,“inflammation”,
];
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) {
//Add your code for this event here:
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($item, itemData, index) {
//Add your code for this event here:
$item(‘#name’).text = itemData.name;
$item(‘#image’).src = itemData.mainMedia;
$item(‘#image’).link = itemData.productPageUrl;
$item(‘#price’).text = itemData.formattedPrice;
}

this is the error message
Loading the code for the Find My CBD page. To debug this code, open v6one.js in Developer Tools.TypeError: $w(…).onClick is not a function
please let me know if I need to try something else this will really help my customers experience

6

the bug, '$w(…).onClick is not a function ’ … seems to me that you are trying to put an onClick event on an item that is not existing.
since you are doing it on the array:

const quizAnswersIds = [“stress”, “anxiety”, “depression”, “chocolate”, “mint”, “veryoften”, “often”, “rarely”, “sleep”,“insomnia”, “pain”,“inflammation”, ];

I guess that one of items in the array is either misspelled or, more correctly, not the matching the id’s in your editor.
make sure each element that in this array is also matching an id of the elements in the editor (case sensitive) and also drop the last , in the array :slight_smile:

Hope you manage! keep me posted!

7

@liorwi it worked! thank you for helping me with that ‘you are the G.O.A.T’

8

I’m having a similar issue, except the product isn’t showing on the last slide ( https://sparkedcoffeeroast.wixsite.com/mysite/home )

import wixData from ‘wix-data’;
const selectedAnswers = ;
const quizAnswersIds = [“11”, “12”, “13”, “14”, “15”, “16”, “21”, “22”, “23”, “24”, “25”, “26” ];
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) {
//Add your code for this event here:
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($item, itemData, index) {
//Add your code for this event here:
$item(‘#name’).text = itemData.name;
$item(‘#image’).src = itemData.mainMedia;
$item(‘#image’).link = itemData.productPageUrl;
$item(‘#price’).text = itemData.formattedPrice;
}

9

Is it because of the numbers?