Розробка мультикрокового калькулятора на 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) {
    // ... логіка переходу

    // Фіксуємо крок у Yandex Metrica
    ym(COUNTER_ID, 'reachGoal', 'calc_step_complete', {
        step:  this.getCurrentStep().id,
        value: JSON.stringify(answer),
    });
}

Лійка по кроках показує, де користувачі відпадають. Якщо 70% відмовляються на кроці 3 — він занадто складний або недоречний.

Строки

Багатокроковий калькулятор — найбільш ефективний формат для складних послуг. Він зменшує когнітивне навантаження, підвищує залучення та дає маркетингу дані про кожен етап прийняття рішення — що саме заважає користувачу дійти до заявки.