QuizChat

Входные параметры

type TStep = {
  id?: string
  title?: string,
  description?: string,
  type?: string,
  answerOptions?: string[],
  backgroundImageUrl?: string,
  backgroundPosition?: string,
  startButtonText?: string
}

interface Props {
  quizSteps?: TStep[];
  managerName?: string;
  managerAvatar?: string;
  greeting?: string;
  questionsIntro?: string;
  formName?: string;
}

let quizData: TStep[] = [];

// Загружаем данные из quiz.json, если quizSteps не передан
if (!Astro.props.quizSteps || Astro.props.quizSteps.length === 0) {
    try {
        const { default: data } = await import('@/data/site/quiz.json');
        quizData = data || [];
    } catch (err) {
        console.warn('Failed to load quiz.json:', err);
        quizData = [];
    }
}

const { 
    quizSteps = quizData, 
    managerName = "Александр", 
    managerAvatar = "https://cdn.alexsab.ru/people/user-691x691.webp", 
    greeting = `Здравствуйте! Меня зовут ${managerName}, я руководитель отдела продаж официального дилера ${brand} в ${legal_city_where}!`,
    questionsIntro = `Ответьте на несколько вопросов, и я смогу подобрать для Вас наиболее выгодное персональное предложение.`,
    formName = "Чат Квиз" 
} = Astro.props;

// Получаем вопросы из quiz.json
const questions = quizSteps.filter(step => step.id && step.type);
const lastStep = quizSteps[quizSteps.length - 1];

Подключение

---
import Chat from '@/blocks/forms/chat/Chat.astro';
---

<Chat />

Название формы

Название формы по умолчанию: Чат Квиз. Но можно передавать через пропс: <Chat formName='Some form name' />.

Поля данных

В массиве данных первый и последний слайд отличаются от остальных, поэтому в коде есть проверка на индекс перебираемого слайда. Т.е. предлагать варианты ответов можно в любых слайдах, кроме первого и последнего.

Пример JSON

[
  {
    "title": "Подберите <b>АВТО</b> с&nbsp;максимальной выгодой от&nbsp;официального дилера в&nbsp;<b>ГОРОДЕ!</b>",
    "description": "<ul><li><span class=\"text-red-500 text-lg\">✓</span>&nbsp;Пишем здесь все, что угодно</li></ul>",
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/x90plus/sections/1.webp",
    "backgroundPosition": "center",
    "startButtonText": "Начать подбор авто"
  },
  {
    "id": "model",
    "type": "checkbox",
    "title": "Выберите модель:",
    "answerOptions": [
      "TIGGO 4 PRO",
      "TIGGO 7 PRO",
      "TIGGO 7 PRO MAX",
      "TIGGO 7 PRO MAX AWD",
      "Новый TIGGO 8",
      "TIGGO 8 PRO",
      "TIGGO 8 PRO MAX",
      "Новый TIGGO 8 PRO MAX",
      "ARRIZO 8"
    ],
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/t2/sections/1.webp",
    "backgroundPosition": "left center"
  },
  {
    "id": "transmission",
    "type": "radio",
    "title": "Выберите коробку передач:",
    "answerOptions": [
      "Механическая",
      "Автоматическая",
      "Любая"
    ],
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/t2/sections/1.webp",
    "backgroundPosition": "right"
  },
  {
    "id": "color",
    "title": "Выберите цвет авто:",
    "type": "radio",
    "answerOptions": [
      "черный",
      "белый",
      "синий",
      "красный",
      "еще не определился"
    ],
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/t2/sections/1.webp",
    "backgroundPosition": "20% 50%"
  },
  {
    "id": "tradein",
    "title": "Планируете ли сдавать свой авто в Трейд-ин (обмен старого авто на новый)",
    "type": "radio",
    "answerOptions": [
      "Да",
      "Нет",
      "Еще не определился"
    ],
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/t2/sections/1.webp",
    "backgroundPosition": "center"
  },
  {
    "id": "purchaseMethod",
    "title": "Выберите способ покупки:",
    "type": "radio",
    "answerOptions": [
      "Внесу сразу всю сумму",
      "Кредит",
      "Лизинг",
      "Рассмотрю все варианты"
    ],
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/t2/sections/1.webp",
    "backgroundPosition": "center"
  },
  {
    "title": "Спасибо! Оставьте номер вашего телефона, чтобы получить подробную консультацию по выбранному автомобилю.",
    "description": "<ul><li><span class=\"text-red-500 text-lg\">✓</span>&nbsp;Честная авторассрочка</li><li><span class=\"text-red-500 text-lg\">✓</span>&nbsp;Переплата 0%</li></ul>",
    "backgroundImageUrl": "https://cdn.alexsab.ru/b/jetour/img/models/t2/sections/1.webp",
    "backgroundPosition": "center"
  }
]