Розробка калькуляторів на сайті 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);
}

Терміни розробки

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