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

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

Калькулятор на сайте — один из немногих интерактивных элементов, который напрямую влияет на конверсию. Пользователь вводит параметры, видит итоговую цену или результат, и принимает решение здесь же, не уходя на почту или в мессенджер. Проблема типичная: стандартные формы 1С-Битрикс не умеют считать в реальном времени, а готовые плагины не покрывают специфику бизнеса.

Подходы к реализации калькуляторов на Битрикс

На 1С-Битрикс калькуляторы реализуются тремя способами, каждый со своей областью применения:

1. Компонент с AJAX-обращением к PHP-логике

Классический подход для сложных расчётов, где логика должна оставаться на сервере (актуальные цены из базы, скидки, интеграция с 1С). Компонент в bitrix/components/vendor/calculator/, шаблон отправляет AJAX на $APPLICATION->IncludeComponent или на отдельный ajax.php.

2. JavaScript-калькулятор с серверной валидацией

Расчёт прямо в браузере для мгновенного отклика, финальная проверка на сервере при отправке формы. Подходит для большинства ценовых калькуляторов, где данные статичны (тарифы, коэффициенты).

3. Битрикс Конструктор форм + кастомный JS

Быстрый вариант для простых случаев: стандартная форма Битрикс с добавленным JavaScript-обработчиком. Не масштабируется, но запускается за 1 день.

Архитектура компонента калькулятора

Структура кастомного компонента:

/bitrix/components/custom/calculator/
  component.php      # Основная логика компонента
  .parameters.php    # Параметры для настройки в админке
  templates/
    .default/
      template.php   # HTML-шаблон
      script.js      # JS-логика расчётов
      style.css

Файл component.php — сердце компонента. Здесь загружаются данные для калькулятора:

<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();

class CustomCalculatorComponent extends CBitrixComponent
{
    public function executeComponent()
    {
        // Загружаем тарифы из инфоблока
        $arFilter = [
            'IBLOCK_ID' => $this->arParams['RATES_IBLOCK_ID'],
            'ACTIVE' => 'Y',
        ];

        $rsRates = CIBlockElement::GetList(
            ['SORT' => 'ASC'],
            $arFilter,
            false,
            false,
            ['ID', 'NAME', 'PROPERTY_*']
        );

        $this->arResult['RATES'] = [];
        while ($arRate = $rsRates->GetNext()) {
            $this->arResult['RATES'][] = $arRate;
        }

        // Передаём данные в шаблон через JSON для JS
        $this->arResult['RATES_JSON'] = json_encode(
            $this->arResult['RATES'],
            JSON_UNESCAPED_UNICODE
        );

        $this->includeComponentTemplate();
    }
}

В шаблоне данные передаются в JavaScript:

// template.php
<script>
const CALCULATOR_DATA = <?= $arResult['RATES_JSON'] ?>;
</script>

AJAX-обработка для серверных расчётов

Если расчёт нельзя делать на клиенте (динамические цены, проверка наличия), используем AJAX:

// ajax.php в папке компонента
define('STOP_STATISTICS', true);
define('NO_KEEP_STATISTIC', 'Y');
define('DisableEventsCheck', true);

require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php');

if (!check_bitrix_sessid()) {
    echo json_encode(['error' => 'Invalid session']);
    die();
}

$action = $_POST['action'] ?? '';

if ($action === 'calculate') {
    $params = json_decode(file_get_contents('php://input'), true);

    // Логика расчёта
    $result = calculatePrice($params);

    header('Content-Type: application/json');
    echo json_encode(['success' => true, 'data' => $result]);
}

require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/epilog_after.php');

Вызов из JavaScript:

async function calculate(params) {
    const response = await fetch('/bitrix/components/custom/calculator/ajax.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            action: 'calculate',
            sessid: BX.bitrix_sessid(), // CSRF-токен Битрикс
            ...params
        })
    });
    return response.json();
}

Сохранение заявки из калькулятора

Результат расчёта обычно нужно привязать к заявке. Варианты:

1. Стандартная форма обратной связи (bitrix:form.result.new) — результаты калькулятора передаются скрытыми полями
2. Создание лида/сделки в CRM — через CCrmLead::Add() или REST API, если нужно сразу в воронку
3. Запись в инфоблок — для хранения истории расчётов

// Создание лида с данными калькулятора
use Bitrix\Crm;

$leadData = [
    'TITLE' => 'Заявка с калькулятора: ' . $calcTitle,
    'NAME' => $arFields['name'],
    'PHONE' => [['VALUE' => $arFields['phone'], 'VALUE_TYPE' => 'WORK']],
    'COMMENTS' => 'Параметры расчёта: ' . json_encode($calcParams),
    'UF_CRM_CALC_RESULT' => $calcResult,
];

$leadId = CCrmLead::Add($leadData, true, ['REGISTER_SONET_EVENT' => false]);

Кеширование данных калькулятора

Если калькулятор подтягивает данные из инфоблоков или внешних источников, важно кешировать:

$cacheTime = 3600; // 1 час
$cache = Bitrix\Main\Data\Cache::createInstance();

if ($cache->initCache($cacheTime, 'calculator_rates_' . $iblockId, '/calculator/')) {
    $arRates = $cache->getVars();
} elseif ($cache->startDataCache()) {
    $arRates = loadRatesFromIblock($iblockId);
    $cache->endDataCache($arRates);
}

Сроки разработки

Наибольшее время занимает не сама логика расчёта, а формализация бизнес-правил: заказчики часто не имеют готовой спецификации, и её проработка занимает столько же времени, сколько разработка.