Помогите клиентам найти идеальный подарок с помощью викторины и рекомендаций по продуктам. Функционал реализуется с помощью панели разработчика 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 для всех продуктов с ключевыми словами, соответствующие ответам пользователя. В каждом повторяющемся элементе есть элементы, отображающие изображение, название и цену рекомендуемых подарков.

← Все руководства по WixНайти другой материал →