Квиз по товарам в интернет-магазине wix
- Julia Sememova
- 13 февр. 2022 г.
- 1 мин. чтения
Помогите клиентам найти идеальный подарок с помощью викторины и рекомендаций по продуктам. Функционал реализуется с помощью панели разработчика Wix Velo.
Описание
В этом примере посетитель предоставляет информацию о том, для кого он хочет купить подарок, и сайт дает рекомендации на основе его ответов.
Пример кода
Gift Quiz
import wixData from 'wix-data';
let keywordsArray = [];
let color;
$w.onReady(function () {
});
/********* first quiz selection *********/
export function whoTags_change(event) {
keywordsArray.push(event.target.value[0]);
$w('#quizStates').changeState('whatState');
}
/********* second quiz selection *********/
export function whatTags_change(event) {
keywordsArray.push(event.target.value[0]);
$w('#quizStates').changeState('colorState');
}
/********* third quiz selection *********/
export async function colorTags_change(event) {
color = event.target.value[0];
await keywordsArray.push(event.target.value[0]);
$w('#quizStates').changeState('productState');
getProducts(keywordsArray, color);
}
/********* getting products and setting the repeater data function *********/
function getProducts(keywordsArray, color) {
let image;
wixData.query('productsKeywords')
.hasAll('keywords', keywordsArray)
.include('product')
.find()
.then((results) => {
if (results.items.length > 0) {
let resItems = results.items;
let products = resItems.map(item => {
if (color === 'surpriseMe2') {
image = item.product.mainMedia
} else {
image = item[color]
}
return {
_id: item.product._id,
productName: item.product.name,
url: item.product.productPageUrl,
price: item.product.formattedPrice,
image: image
}
})
shuffle(products)
$w('#productsRepeater').data = products.slice(0, 2);
} else {
$w('#loadingImage').hide();
$w('#noItemsText').show();
}
});
}
/********* shuffle products array *********/
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// Wwile there remain elements to shuffle
while (0 !== currentIndex) {
// pick a remaining element
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// swap it with the current element
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
/********* setting the repeater elements to corresponding data *********/
export function productsRepeater_itemReady($item, itemData, index) {
$item('#productTitle').text = itemData.productName;
$item('#productImage').src = itemData.image;
$item('#productImage').link = itemData.url;
$item('#productImage').tooltip = '';
$item('#productPrice').text = itemData.price;
$w('#loadingImage').hide();
$w('#productsRepeater').show();
}
Коллекция, которую мы добавили: productsKeywords
Коллекция productsKeywords содержит следующие поля:
product: поле ссылки, указывающее на элемент в коллекции продуктов.
keywords: список ключевых слов, относящихся к продукту.
Добавление викторины
Мы добавили поле с несколькими состояниями на странице викторины о подарках. Каждый слайд содержит вопрос викторины. Слайд-шоу настроено так, что при ответе на вопрос появляется следующее состояние.
Отображение рекомендаций
Когда вся форма заполнена, происходит сравнение коллекции productsKeywords для всех продуктов с ключевыми словами, соответствующие ответам пользователя. В каждом повторяющемся элементе есть элементы, отображающие изображение, название и цену рекомендуемых подарков.
Comments