EasyCalc — это простой конструктор калькуляторов. Для его работы не требуется знать бэкенд-программирование. Необходима лишь только стилизация CSS и расстановка элементов через HTML.

Внимание! Не адаптировано под MODx 3 версии

Доступные типы данных:
— Текстовое поле (поиск)
— Число
— Radio
— Выпадающий список
— Множественный выбор (сумма)
— Ползунок

Начало работы

1. Создайте конфигурацию
2. Создайте калькулятор
3. Выведите калькулятор на сайт
4. Настройте HTML разметку
5. Настройте CSS стили
6. Настройте JS логику

Создайте конфигурацию

1. Укажите Имя и Описание
2. Добавьте Блоки
Блок — это Опции, которые находятся в одной группе
3. Добавьте Опции
Число вписанное в значение Опции будет подставляться в формулу для расчета

Создайте калькулятор

1. Укажите Имя и Описание
2. Примените конфигурацию
Вы можете применить одну конфигурацию ко многим калькуляторам. Это удобно
3. Задайте формулу
   Перенесите формулу расчета в наш калькулятор и замените значения на ID блоков в квадратных скобках. Пример: [1]*[2]*([3]+5)/[4]
   Можно использовать также и обычные числа
   

Прописать свои условия можно через параметр &snippet. Укажите свой сниппет в этом параметре для собственных рассчетов с условиями.

Пример:

//получить значение блока
$a = $block_15;
$b = $block_8;

//вернуть ошибки
$arr = [
    'block_15',
    'block_8',
];
return $easycalc->addErrors($arr);

//вернуть ответ
return 123;

Выведите калькулятор на сайт

Для вывода данных на сайт используйте сниппет EasyCalc.
Он принимает следующие параметры:
&id — ID калькулятора
&frontend_js — JS файл, отвечающий за вывод информации для клиента
&tpl — Чанк оформления каждого Блока
&tplOuter — Чанк оформления всего Калькулятора
&tplNumber — Чанк оформления Блока Число
&tplRadio — Чанк оформления Блока Radio
&tplCheckbox — Чанк оформления Блока Множественного выбора
&tplSelect — Чанк оформления Блока Выпадающий список
&tplSelectOption — Чанк оформления Опции Блока Выпадающий список
&tplRange — Чанк оформления Блока Ползунок

Настройте HTML разметку

1. Расставьте Блоки в таком порядке, в котором вам необходмо
   Блок принимает значение плейсхолдера. Пример: [[+block_123]], где 123 — это ID Блока. Блоки можно поставить в любом удобном порядке. Главное, чтобы они были в пределах формы.
   

Настройте CSS стили

Настройте JS логику

При выполнении скрипта, выполняется событие ec_complete. Вы можете получить ответ и обработать его на свое усмотрение:

$(document).on('ec_complete', function(e, response) {
    console.log(response);
}

Или полностью поменять логику, подставив через параметр &frontend_js в сниппете EasyCalc, свой скрипт

Примеры

https://litosh-web.ru/blog/modx/easycalc-primeryi-po-zayavkam-zhelayushhix