Разработка мультишагового калькулятора на 1С-Битрикс

Разработка мультишагового калькулятора на 1С-Битрикс

Мультишаговый калькулятор — это опросник, разбитый на последовательные экраны. Вместо одной длинной формы пользователь видит 2–3 вопроса на шаге, прогресс-бар и плавный переход вперёд. Психологически это проще: каждый шаг маленький, отказаться на полпути сложнее, чем бросить одну большую форму. По данным A/B-тестов, мультишаговые калькуляторы конвертируют в среднем на 30–50% лучше, чем аналогичные одностраничные формы.

Архитектура мультишагового сценария

Шаги калькулятора — это не просто страницы. Это граф: некоторые шаги пропускаются в зависимости от предыдущих ответов. Например, если на шаге 2 пользователь выбрал «физическое лицо» — шаг 3 с реквизитами организации пропускается.

Хранение конфигурации шагов — JSON или HL-блок CalculatorSteps:

{
  "steps": [
    {
      "id": "service_type",
      "title": "Что вас интересует?",
      "type": "single_choice",
      "options": [
        { "value": "moving", "label": "Переезд" },
        { "value": "storage", "label": "Хранение" },
        { "value": "both", "label": "Переезд + хранение" }
      ]
    },
    {
      "id": "area",
      "title": "Площадь помещения",
      "type": "range_slider",
      "min": 20, "max": 500, "step": 10, "default": 60,
      "unit": "м²",
      "condition": { "field": "service_type", "operator": "in", "value": ["moving", "both"] }
    },
    {
      "id": "contacts",
      "title": "Куда отправить расчёт?",
      "type": "contact_form",
      "fields": ["name", "phone", "email"]
    }
  ]
}

Frontend: управление шагами на JavaScript

class MultiStepCalculator {
    constructor(config) {
        this.steps    = config.steps;
        this.answers  = {};
        this.history  = []; // для кнопки «Назад»
        this.currentStepIndex = 0;
    }

    getCurrentStep() {
        return this.steps[this.currentStepIndex];
    }

    next(answer) {
        const step = this.getCurrentStep();
        this.answers[step.id] = answer;
        this.history.push(this.currentStepIndex);

        // Ищем следующий шаг, который не пропускается
        let nextIndex = this.currentStepIndex + 1;
        while (nextIndex < this.steps.length) {
            if (this.checkCondition(this.steps[nextIndex].condition)) {
                break;
            }
            nextIndex++;
        }

        if (nextIndex >= this.steps.length) {
            this.submit(); // все шаги пройдены
        } else {
            this.currentStepIndex = nextIndex;
            this.render();
        }

        this.updateProgress();
    }

    back() {
        if (this.history.length === 0) return;
        this.currentStepIndex = this.history.pop();
        this.render();
        this.updateProgress();
    }

    checkCondition(condition) {
        if (!condition) return true; // нет условия — шаг показывается всегда

        const value = this.answers[condition.field];
        switch (condition.operator) {
            case 'eq':  return value === condition.value;
            case 'in':  return condition.value.includes(value);
            case 'gt':  return parseFloat(value) > parseFloat(condition.value);
            case 'not': return value !== condition.value;
            default:    return true;
        }
    }

    updateProgress() {
        const visible = this.steps.filter((_, i) =>
            i <= this.currentStepIndex || this.checkCondition(this.steps[i]?.condition)
        );
        const pct = Math.round((this.currentStepIndex / (this.steps.length - 1)) * 100);
        document.getElementById('progress-bar').style.width = pct + '%';
        document.getElementById('progress-text').textContent = `Шаг ${this.currentStepIndex + 1} из ${visible.length}`;
    }

    async submit() {
        const resp = await fetch('/ajax/calculator/multistep/submit/', {
            method: 'POST',
            body: new URLSearchParams({
                answers: JSON.stringify(this.answers),
                sessid: BX.bitrix_sessid(),
            }),
        });
        const result = await resp.json();
        this.showResult(result);
    }
}

Серверный расчёт: от ответов к результату

namespace MyProject\Controllers;

use Bitrix\Main\Engine\Controller;

class MultistepCalculatorController extends Controller
{
    public function submitAction(string $answersJson): array
    {
        $answers = json_decode($answersJson, true);
        if (!$answers) {
            $this->addError(new \Bitrix\Main\Error('Некорректные данные'));
            return [];
        }

        // Валидация обязательных полей
        $required = ['service_type', 'area'];
        foreach ($required as $field) {
            if (!isset($answers[$field])) {
                $this->addError(new \Bitrix\Main\Error("Не заполнено поле: {$field}"));
                return [];
            }
        }

        // Расчёт через сервисный класс
        $calcResult = \MyProject\Services\MovingCalculator::calculate($answers);

        // Создаём лид в CRM
        $leadId = \MyProject\Services\CrmService::createLeadFromCalculator(
            $answers['name'] ?? 'Не указано',
            $answers['phone'] ?? '',
            $answers,
            $calcResult
        );

        return [
            'result'  => $calcResult,
            'lead_id' => $leadId,
        ];
    }
}

Сохранение прогресса: не терять данные

Если пользователь случайно закрыл вкладку — данные сохраняются в localStorage:

// Автосохранение при каждом ответе
saveProgress() {
    localStorage.setItem('calc_progress', JSON.stringify({
        answers:      this.answers,
        stepIndex:    this.currentStepIndex,
        savedAt:      Date.now(),
    }));
}

// Восстановление при загрузке
restoreProgress() {
    const saved = localStorage.getItem('calc_progress');
    if (!saved) return;

    const data = JSON.parse(saved);
    const ageMs = Date.now() - data.savedAt;
    if (ageMs > 24 * 60 * 60 * 1000) { // старше суток — не восстанавливаем
        localStorage.removeItem('calc_progress');
        return;
    }

    this.answers      = data.answers;
    this.currentStepIndex = data.stepIndex;
    this.render();
}

Аналитика: воронка по шагам

Каждый переход между шагами — событие в аналитике:

next(answer) {
    // ... логика перехода

    // Фиксируем шаг в Метрике
    ym(COUNTER_ID, 'reachGoal', 'calc_step_complete', {
        step:  this.getCurrentStep().id,
        value: JSON.stringify(answer),
    });
}

Воронка по шагам показывает, где уходят пользователи. Если 70% бросают на шаге 3 — он слишком сложный или неуместный.

Сроки

Мультишаговый калькулятор — наиболее эффективный формат для сложных услуг. Он снижает когнитивную нагрузку, повышает вовлечённость и даёт маркетологу данные о каждом этапе принятия решения — что именно мешает пользователю дойти до заявки.