Интерактивный квиз для подбора секс-игрушек на Shop Express

Техническое задание: Интерактивный квиз для подбора секс-игрушек на Shop Express

1. Общий обзор

Необходимо разработать интерактивный квиз для сайта на платформе Shop Express. Квиз должен помочь пользователям подобрать интимные игрушки на основе их ответов на несколько вопросов. Результатом квиза должна быть рекомендация одного основного товара и нескольких похожих, которые выбираются из XML-файла или через подключение по API.

2. Требования к функционалу

2.1. Этапы квиза (Вопросы и ответы)

• Количество шагов: 10-15 вопросов.
• Типы вопросов:
  • Одиночный выбор (пользователь выбирает только одну опцию).
  • Множественный выбор (пользователь может выбрать одну или несколько опций).
• Анимация переходов: Плавные анимации появления/исчезновения вопросов и опций при переходе между шагами.

2.2. Загрузка и обработка товаров

• Источник данных: XML-фид товаров с сайта или API
• Парсинг XML: На фронтенде (JavaScript) необходимо загрузить и распарсить XML-фид, преобразовав его в объекты JavaScript для дальнейшей работы.
•  Учитывая возможные ограничения при загрузке XML, рассмотреть варианты решения 

2.3. Логика подбора товаров 

• Определение релевантности: Для каждого товара из XML-фида необходимо рассчитать "балл релевантности" на основе ответов пользователя. Чем выше балл, тем лучше товар соответствует критериям.
• Критерии скоринга (примеры, для уточнения):
  • Пол (gender): Учитывать ключевые слова в названии или категории товара ("женские", "мужские", "для двоих").
  • Тип стимуляции (stimulation_type): Учитывать ключевые слова в описании или названии товара ("вибрация", "пульсация", "анальный").
  • Материал (material): Искать точное вхождение значения материала в описание товара.
  • Бюджет (budget): Товары, находящиеся в выбранном ценовом диапазоне, получают более высокий балл. Товары вне диапазона получают отрицательный балл или снижение балла.
  • Другие параметры: Другие ответы пользователя также должны влиять на скоринг (например, уровень опыта, форма/дизайн, цель использования).
• Результат скоринга: Вернуть отсортированный список товаров от наиболее к наименее релевантному.

2.4. Отображение результатов

• Основной рекомендованный товар: Отобразить товар с самым высоким баллом.
  • Изображение, название, краткое описание, цена.
  • Кнопка "Купить" или "Перейти к товару" с ссылкой на страницу товара.
• Похожие товары: Отобразить 5-10 следующих по релевантности товаров.
  • Изображение, название, цена, ссылка на страницу товара.
  • Представить в виде адаптивной сетки.
• Отсутствие результатов: Если ни один товар не соответствует критериям или фид не загрузился, показать соответствующее сообщение и ссылку на общий каталог магазина.

3. Технические требования

• HTML, CSS, JavaScript: Весь функционал должен быть реализован с помощью этих трех технологий.
• Чистый JavaScript: Не использовать сторонние фреймворки (React, Vue, Angular и т.д.), так как это Shop Express.
• Адаптивный дизайн: Квиз должен корректно отображаться и функционировать на всех устройствах (десктоп, планшеты, мобильные телефоны).
• Оптимизация производительности: Код должен быть оптимизирован для быстрого загрузки и плавной работы.
• Оформление: Встроенные стили CSS в <style> и JavaScript в <script> внутри одного блока (для удобства вставки в Shop Express).
• Семантический HTML: Использовать соответствующие HTML5 теги.

4. Структура кода (рекомендуется)

• HTML: Основная структура квиза, включая контейнеры для вопросов, опций, прогресс-бара и результатов. Использовать <template> для динамически создаваемых элементов (вопросы, опции, карточки товаров).
• CSS:
  • Использовать CSS-переменные для цветов, отступов, теней, скруглений, чтобы упростить кастомизацию.
  • Медиа-запросы для адаптивности.
  • Стили для анимаций переходов.
• JavaScript:
  • Объект QUIZ_QUESTIONS: Массив объектов, каждый из которых описывает вопрос (id, текст, пояснение, тип, опции).
  • userAnswers: Объект для хранения ответов пользователя.
  • allProducts: Массив для хранения распарсенных товаров.
  • Функции для:
    • updateProgressBar(): Обновление прогресс-бара.
    • renderQuestion(): Отображение текущего вопроса и его опций.
    • handleOptionClick(): Обработка выбора опции (одинарный/множественный).
    • nextStep(): Переход к следующему шагу или отображение результатов.
    • loadProducts(): Асинхронная загрузка и парсинг XML-файла.
    • calculateProductScores(): Логика скоринга товаров на основе ответов.
    • showResult(): Отображение рекомендованных и похожих товаров.
  • Инициализация квиза при загрузке DOM.
    Если нужен референс, то есть похожий проект, предоставлю лично. 
    

  •