I’m seeing a lot of people having issues with the #gift #quiz and only a few were offered solutions. I hope I’m one of those.
I’ve been working on trying to figure out what’s wrong for a few weeks now, and I can’t wrap my brain around it. I’ve poured over the article several times, watched the video, and corrected mistakes but I still get nothing.
Link: https://www.intheaircandles.com/which-candle-quiz
Problem: No product recommendation is given in the repeater at the end of the quiz.
Steps taken: I triple checked my code to make sure I had everything right. Even though I did, I ended up deleting my code and copying the code from the example (which works).
Changes: I changed the items in quizAnswersIds, I added a button with the text “Shop Now” to my repeater, changed it’s name in properties to “link” and updated the the code in the last export function section.
Note: The quiz wasn’t functioning as it should before or after I added the button.
Code:
//-------------Imports-------------//
import wixData from 'wix-data';
//-------------Global Variables-------------//
// List of selected answers.
const selectedAnswers = [];
// List of IDs of all the answer buttons.
const quizAnswersIds = ["foodFavorite", "weatherFavorite", "clothesFavorite", "smellFavorite",
"appleFruit", "orangeFruit", "blackberryFruit", "noneFruit",
"blackColor", "orangeColor", "darkRedColor", "deepPurpleColor",
"applePieScent", "orangeScent", "incenseScent", "vanillaScent"
];
// Number of questions plus one for the results.
let numberOfSlides;
//-------------Page Setup-------------//
$w.onReady(() => {
// Set the global numberOfSlides variable from the slideshow length.
numberOfSlides = $w('#quizSlides').slides.length;
// For each answer button:
quizAnswersIds.forEach(answer => {
// Set the action that occurs when a user clicks the answer button.
$w(`#${answer}`).onClick(() => {
// Add the answer to the global selected answers list.
selectedAnswers.push(answer);
// Move to the next slide.
$w('#quizSlides').next();
})
})
});
//-------------Quiz Finish-------------//
// Set the action that occurs when a user is moved to the next slide.
export async function quizSlides_change(event, $w) {
// If the quiz is finished:
if (isQuizFinished())
// Get the keywords associated with each product by calling the getKeywordsPerProduct() function.
let quizProducts = await getKeywordsPerProduct();
// For each selected answer:
selectedAnswers.forEach(answer => {
// Filter out the products that do not match the answer.
quizProducts = filterProductsPerAnswer(quizProducts, answer);
});
// Extract the product IDs from the filtered product.
quizProducts = quizProducts.map(quizProduct => quizProduct.productId);
// Get a random list from the remaining filtered products.
quizProducts = getRandomItemsFromArray(quizProducts, numberOfSlides);
// Populate the recommended products repeater with the product data that corresponds to the randomly selected products.
$w('#recommendedProducts').data = await getProductsData(quizProducts);
}
}
// Checks if the quiz has been completed.
function isQuizFinished() {
// Check if the current slide is the last slide.
return $w('#quizSlides').currentIndex === numberOfSlides - 1;
}
// Get the keywords associated with each product.
async function getKeywordsPerProduct() {
// Query the "productsKeywords" collection for the product keywords.
let productsKeywords = await wixData.query("productsKeywords").find();
// Extract the items from the query results.
productsKeywords = productsKeywords.items;
// Process the returned item data to make it easier to work with.
productsKeywords = productsKeywords.map(item => {
return {
productId: item.product,
keywords: item.keywords.split(",")
}
});
// Return the processed item data.
return productsKeywords;
}
// Filter out products that don't match the specified answer.
function filterProductsPerAnswer(quizProducts, answer) {
// Use the JavaScript filter() function to filter out products that don't match the specified answer.
const filteredProducts = quizProducts.filter(quizProduct => {
return quizProduct.keywords.includes(answer)
});
// Return the filtered product list.
return filteredProducts;
}
// Get a specified number of random items from the specified array.
function getRandomItemsFromArray(productsArr, numberOfItems){
// List for storing the randomly selected products.
const productsIds = [];
// Number of products in the specified array.
const numberOfProducts = productsArr.length;
// For specified the number of items or the number of products that were specified, whichever is lower:
for (let i = 0; i < numberOfItems && i < numberOfProducts; i++){
// Get a random valid index.
const randomIndex = getRandomInt(0, numberOfProducts -1 );
// Add the product at that random index to the list of selected products.
productsIds.push(productsArr[randomIndex]);
// Remove the already selected product from the list of products to select from.
productsArr.splice(randomIndex, 1);
}
// Return the randomly selected products.
return productsIds;
}
// Get a random number between two specified values.
function getRandomInt(min, max) {
// Use JavaScript math functions to get a random number between two specified values.
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Get the product data associated with the specified product IDs.
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;
}
// Set up each item in the recommended products repeater when it receives data as the quiz is finished.
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('#link').link = itemData.productPageUrl;
$item('#price').text = itemData.formattedPrice;
}
I wasn’t able to receive any help via email and as a small business just starting out, hiring someone from Wix Arena is impossible right now.
Again, I’ve seen others get solutions to their problem with the #giftquiz. I’m really hoping someone can help me with mine.