Как создать конфигуратор товара?

Как создать конфигуратор товара?

Зачастую интернет магазинам необходимо использовать конфигуратор товара, это когда вы продаете товар с пользовательским выбором.

Возможно ли реализовать такую функцию в редакторе Wix? Ответ - да. Вот наш пример того как это работает. < - это шаблон рабочего конфигуратора, и кстати здесь вы можете приобрести этот шаблон и использовать для своих целей. Он полностью рабочий, а код наполнен русскими подсказками. Вам останется только наполнить конфигуратор своими товарами. Новые заказы будут поступать в базу данных.

Для реализации этого шаблона мы использовали вот этот код:

//-------------глобальная переменная-------------//

// Статический список случайных фраз, которые будут использоваться при нажатии пользователем кнопки random.
var randomPhrases = [
 "Ты мое совершенство.",
 "Ты оберегаешь меня, а я буду оберегать тебя.",
 "Ты макароны для моего сыра.",
 "Я обещаю что буду любить тебя вечно.",
 "Оставайся в безопасности. Съесть Торт.",
 "Вени, Види, Вичи."
];

//-------------Настройка Данных-------------//

// Настройка ретрансляторов цвета фона и цвета текста после завершения загрузки набора данных. 
export function dynamicDataset_ready() {
 // Получение данных о продукте из текущего элемента.
 const currentProduct = $w("#dynamicDataset").getCurrentItem().product;
 // Получите параметры продукта из данных продукта.
 const productOptions = currentProduct.productOptions;
 // Установите ретранслятор цвета фона с помощью выбора из опции цвет фона продукта. 
    $w('#bgColorRepeater').data = createColorRepeaterData('bgcolor', productOptions['Background Color'].choices);
 // Установите повторитель цвета текста с помощью выбора из опции цвет текста продукта. 
    $w('#textColorRepeater').data = createColorRepeaterData('textcolor', productOptions['Text Color'].choices);
}

// Добавьте идентификатор к данным выбора, чтобы его можно было использовать для заполнения ретранслятора.
function createColorRepeaterData(idPrefix, choices) {
 // Используйте функцию JavaScript map (), чтобы добавить поле _id к каждому элементу данных.
 return choices.map((item, index) => {
        item._id = `${idPrefix}-${index}`;
 return item;
    });
}

//-------------Установка Ретранслятора-------------//

// Настройте каждый элемент в повторителе цветов фона по мере его загрузки.
// Каждый элемент имеет коробку, которая содержит его цвет и прозрачную кнопку, наложенную поверх коробки. 
export function bgColorRepeater_itemReady($w, itemData, index) {
 // Установите цвет текущего поля таким, чтобы он соответствовал цвету данных текущего элемента.
    $w('#bgColorBox').style.backgroundColor = itemData.value;
 // Установите действие, которое происходит, когда пользователь нажимает кнопку текущего цвета фона.
    $w('#bgColorBtn').onClick(() => {
 // Вызовите функцию обновить цвет фона () с данными текущего элемента.
        updateBackgroundColor(itemData);
    });
}

// Настройте каждый элемент в повторителе цветов текста по мере его загрузки.
// Каждый элемент имеет коробку, которая содержит его цвет и прозрачную кнопку, наложенную поверх коробки.
export function textColorRepeater_itemReady($w, itemData, index) {
 // Установите цвет текущего поля таким, чтобы он соответствовал цвету данных текущего элемента.
    $w('#textColorBox').style.backgroundColor = itemData.value;
 // Установите действие, которое происходит, когда пользователь нажимает на кнопку цвета текста.
    $w('#textColorBtn').onClick(() => {
 // Вызовите функцию обновить цвет текста () с данными текущего элемента.
        updateTextColor(itemData);
    });
}

// Обновите цвет фона изображения продукта.
// Существует прозрачная маска изображения продукта, наложенная поверх коробки, которая меняет цвета. 
function updateBackgroundColor(colorItem) {
 // Установите текстовую метку в окне выбора цвета так, чтобы она соответствовала заданному цвету.
    $w('#colorText').text = colorItem.description;
 // Установите цвет фона коробки за прозрачным изображением продукта.
    $w("#bgColor").style.backgroundColor = colorItem.value;
}

// Обновите цвет пользовательского текста.
function updateTextColor(colorItem) {
 // Установите текстовую метку в окне выбора цвета так, чтобы она соответствовала заданному цвету.
    $w('#textColorName').text = colorItem.description;
 // Извлеките значение пользовательского текста и сбросьте его цвет с помощью встроенного стиля html.
    $w("#customText").html = "<h6 style='text-align:center;color:" + colorItem.value + "'>" + $w('#customText').text + "</h6>";
}

//-------------Обработчики Событий Элементов-------------//

// Измените параметры настройки, когда пользователь щелкает вкладку "пользовательский текст".". 
export function tabMenuText_click(event, $w) {
    $w("#textBox").show();
    $w("#bgBox").hide();
    $w("#tabMenuText").disable();
    $w("#tabMenuBg").enable();
}

// Измените параметры настройки, когда пользователь щелкает вкладку "фон".". 
export function tabMenuBg_click(event, $w) {
    $w("#bgBox").show();
    $w("#textBox").hide();
    $w("#tabMenuText").enable();
    $w("#tabMenuBg").disable();
}

// Обновите пользовательский текстовый слой поверх изображения продукта при вводе информации в элемент ввода текста.
export function textInput_keyPress(event, $w) {
 // Задержите обновление на десятую долю секунды, чтобы сгладить обновления.
    setTimeout(() => {
 // Получите значение из пользовательского элемента ввода текста.
 const textToShow = $w("#textInput").value;
 // Установите значение пользовательского текстового слоя поверх изображения продукта.
        $w('#customText').text = textToShow;
 // Если есть пользовательский текст:
 if (textToShow) {
 // Показать пользовательский текстовый слой.
            $w('#customText').show();
        } else {
 // В противном случае скройте пользовательский текстовый слой.
            $w('#customText').hide();
        }
    }, 10);
}

// Установите случайный пользовательский текст при нажатии случайной кнопки.
export function randomButton_click(event, $w) {
 // Выберите случайное значение индекса.
 const randomIndex = Math.floor(Math.random() * randomPhrases.length);
 // Установите пользовательский текст на изображении продукта на выбранный случайный текст.
    $w('#customText').text = randomPhrases[randomIndex];
 // Установите пользовательский текст в элементе ввода пользовательского текста на выбранный случайный текст.
    $w('#textInput').value = randomPhrases[randomIndex];
 // Отображение пользовательского текстового слоя на изображении продукта.
    $w('#customText').show();
}

// Automatically start the upload of the selected file 1 second after it is chosen.
export function uploadButton_change(event, $w) {
 // Если есть выбранный файл:
 if ($w("#uploadButton").value.length > 0) {
 //Автоматический запуск загрузки файла через 1 секунду после его выбора.
        setTimeout(() => {
            $w("#uploadButton").startUpload().then(uploadedFile => {
                $w("#print").src = uploadedFile.url;
            });
        }, 1000);
    }
}

// Добавьте настроенный товар в корзину покупок.
export function addToCartBtn_click(event, $w) {
 // Получить текущий продукт.
 const currentProduct = $w('#dynamicDataset').getCurrentItem().product;
 // Добавьте текущий товар в корзину с выбранным пользователем цветом фона, цветом текста, пользовательским текстом и пользовательским фоновым изображением.
    $w('#shoppingCartIcon1').addToCart(currentProduct._id, 1, {
 "choices": {
 "Background Color": $w('#colorText').text,
 "Text Color": $w('#textColorName').text
        },
 "customTextFields": [{
 "title": "Custom Text",
 "value": $w('#textInput').value
            },
            {
 "title": "Background Image",
 "value": $w('#print').src
            }
        ]
    });
}

function updateMenuButtons() {
    $w('#repeater1').forEachItem(($w, itemData) => {
 const currentDynamicId = $w('#dynamicDataset').getCurrentItem()._id;
 if (currentDynamicId === itemData._id) {
            $w('#button1').disable();
        } else {
            $w('#button1').enable();
        }
    });
}

export function dataset1_ready() {
    updateMenuButtons()
}

В данном случае мы также добавили возможность добавления сообщения к элементу. Вы также можете усовершенствовать этот конфигуратор простыми действиями и подсказками. Например можно указать разные размеры загружаемой фотографии (для этого просто нужно создать пять отдельных товаров и переход между ними).


Алгоритм работы следующий. Мы берем ID товара и запомнив ID переходим на динамическую страницу, на которой установлен конфигуратор. Далее мы настраиваем товар и сохраняем данные в базу данных, а пользователю предлагаем оформить товар.

Остались вопросы? Задайте их в комментариях.


Если у вас есть вопросы по работе в редакторе Wix, задавайте их нам здесь. Мы с радостью и полностью бесплатно поможем и ответим!

Просмотров: 22

Другие статьи Студии ИВА:

Название статьи 

Как определить целевую аудиторию

Название статьи 

Что такое динамическая страница в wix?

Исследование: Как цвета влияют на продажи в интернете?

Что такое ретаргетинг Вконтакте и как его настроить в Wix.

Editor X, что, зачем и когда?

Вот почему ваш сайт го##о | аудит сайта | чек лист советов

Как создать красивый одностраничный сайт

Чат бот для сайта. Увеличение продаж. Повышение эффективности.

Как создать социальную сеть в редакторе Wix?

Как разослать Email рассылку бесплатно и не попасть в спам?

 
Студия ИВА

Другое

В течении 14 дней, после покупки любой услуги на сайте Студии ИВА, вы можете отказаться от покупки и получить возврат денежных средств. Без дополнительных объяснений!

Мы разрешаем копировать любую информацию с нашего сайта (кроме премиум раздела). Только не забывайте при копировании указывать ссылку на Студию ИВА!

ООО «Очень Быстрые Люди»
ОГРН 1187746862907
ИНН 9723066190
КПП 772301001

Мы используем cookies, чтобы сайт был лучше. 

Узнать больше >>