פיתוח מחשבון רב-שלבי על 1C-Bitrix

משתמש פותח טופס עם 15 שדות וסוגר אותו אחרי 10 שניות — ההמרה צונחת. מחשבון רב-שלבי מפצל את הסקר למסכים של 2–3 שאלות עם פס התקדמות. אנו מיישמים פתרונות כאלה על 1C-Bitrix: אנו מתכננים תרחישים עם הסתעפויות, מיישמים חישוב AJAX ומשתלבים עם CRM. התוצאה — המרת הלידים גדלה ב-30–50% בהשוואה לטפסים חד-שלביים. לפי Nielsen Norman Group, ממשקים רב-שלביים משפרים את השימושיות ב-30%. בבדיקות A/B שלנו, טופס רב-שלבי ממיר פי 1.5 טוב יותר מטופס רגיל עבור אותה קהל יעד.

בעיות שאנו פותרים

• נטישה גבוהה בטפסים ארוכים. כשמשתמש רואה 15 שדות, הוא עוזב. המחשבון שלנו מציג 1–3 שאלות בכל שלב — העומס הקוגניטיבי יורד, ושיעור ההשלמה עולה. החיסכון בתקציב לייצור לידים מגיע ל-40%.
• תרחישים מורכבים עם דילוגים. שירותים תלויים בבחירות: אם לקוח בוחר "משלוח", אנו מסתירים את השלב "איסוף עצמי". אנו מיישמים מעברים מותנים באמצעות קונפיגורציית JSON. ROI — פחות מ-3 חודשים.
• אובדן נתונים. אם סוגרים את הטאב — ההתקדמות נעלמת. אנו מטמיעים שמירה ב-localStorage עם שחזור אוטומטי תוך 24 שעות.

איך ליישם הסתעפות שלבים?

שלבי המחשבון אינם רק דפים. הם גרף: חלק מהשלבים מדולגים בהתאם לתשובות קודמות. לדוגמה, אם בשלב 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"]
    }
  ]
}

צד לקוח: ניהול שלבים עם 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);
  }
}

למה מחשבון רב-שלבי מגדיל המרה?

לפי בדיקות A/B, טפסים רב-שלביים ממירים בממוצע 30–50% טוב יותר מאלטרנטיבות חד-שלביות. הסיבה היא פסיכולוגית: כל שלב קטן, וקשה יותר לנטוש באמצע מאשר לנטוש טופס גדול אחד. פס ההתקדמות מניע להשלמה, וההסתעפות הופכת את התרחיש למותאם אישית. עבור החברה "Pereezd Servis", יישמנו מחשבון 8-שלבי עם הסתעפות על סוג השירות — ההמרה עלתה מ-2.5% ל-5.8% תוך חודש אחד.

חישוב בצד השרת: מתשובות לתוצאות

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);
        $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();
}

כל מעבר שלב נרשם באנליטיקה — המשפך מראה היכן משתמשים נושרים. אם 70% עוזבים בשלב 3 — הוא מורכב מדי או לא רלוונטי.

תהליך ולוחות זמנים

1. ניתוח דרישות — זיהוי לוגיקה ותנאי הסתעפות.
2. עיצוב תרחיש — ציור גרף שלבים עם מעברים.
3. עיצוב ופיתוח צד לקוח — יצירת תבניות רספונסיביות לכל סוג שאלה.
4. צד שרת וחישוב — כתיבת בקרי PHP עם ולידציה ואינטגרציה.
5. אינטגרציה — חיבור CRM (Bitrix24, amoCRM), 1C, שערי תשלום.
6. בדיקות — אימות כל ההסתעפויות ונכונות החישוב.
7. פריסה ותיעוד — פריסה לשרת, כתיבת הוראות.

השוואה בין טופס רב-שלבי לרגיל

מה כלול

• ניתוח לוגיקה עסקית ויצירת גרף שלבים
• עיצוב ופריסה רספונסיבית לכל המצבים
• צד שרת ב-PHP (Bitrix ORM, רכיבים 2.0)
• אינטגרציית CRM (Bitrix24, amoCRM) ו-1C דרך CommerceML
• אינטגרציית מערכת תשלום (YooKassa, Sber) ושירותי משלוח (CDEK, דואר רוסי)
• שמירת התקדמות ב-localStorage
• אנליטיקה (Yandex.Metrica, Google Analytics)
• בדיקת כל התרחישים וההסתעפויות
• תיעוד והדרכת צוות
• חודש תמיכה באחריות

למה לעבוד איתנו

למעלה מ-10 שנות ניסיון בפיתוח על 1C-Bitrix, יותר מ-300 פרויקטים מוצלחים. מומחים מוסמכים. אחריות לתוצאה — אנו קובעים מדדי המרה בחוזה. ROI על מחשבון רב-שלבי הוא לרוב פחות מ-3 חודשים הודות לגידול בהמרה.

מחשבון רב-שלבי הוא הפורמט היעיל ביותר לשירותים מורכבים. הוא מפחית עומס קוגניטיבי, מגביר מעורבות, ונותן למשווקים נתונים על כל שלב החלטה — מה בדיוק מונע מהמשתמש להגיע לליד.

הזמינו פיתוח מחשבון רב-שלבי מותאם אישית — קבלו המרה גבוהה עד 50% יותר מטפסים רגילים. השאירו בקשה להערכת עלות. צרו קשר כדי לדון בפרטים ולקבל לוח זמנים ועלות מותאמים אישית. מחשבון רב-שלבי במפתח סוהר עם אחריות לגידול בהמרה.

1C-Bitrix בוויקיפדיה