new

EasyCalc

Конструктор калькуляторов
Автор дополнения
LITOSH
Пакетов
7
Закачек
36
Автор дополнения
Пакетов
7
Закачек
36
Обычно отвечает в течение 2 часов
Версия 1.0.2-pl
Дата выпуска 05.05.2022
Загрузки 6
Просмотры 653
Внимание, этот компонент требует версию PHP 5.6 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
EasyCalc — это простой конструктор калькуляторов. Для его работы не требуется знать бэкенд-программирование. Необходима лишь только стилизация CSS и расстановка элементов через HTML.

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

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


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

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


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


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


  1. Укажите Имя и Описание
  2. Примените конфигурацию
  3. Вы можете применить одну конфигурацию ко многим калькуляторам. Это удобно
  4. Задайте формулу
    Перенесите формулу расчета в наш калькулятор и замените значения на 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, свой скрипт

1.0.2 (5.05.22)

  • Добавлен новый тип данных: текстовое поле (поиск)
  • Добавлен параметр &snippet

1.0.1 (4.01.22)

  • Добавлена защита от modstore.pro

1.0.0 (23.12.21)

  • Начальная версия

Последние обсуждения в сообществе MODX.pro