Для создания калькуляторов или форм-калькуляторов на различные тематики понадобятся виджеты "Форма", "Поля" и другие, для кастомизации внешнего вида формы, а также базовые знания о переменных в языке JavaScript.
Основа для любого калькулятора - это виджет "Форма" и "Поля" в этой форме. В настройках каждого поля можно указать переменную, значение переменной, а в специальном поле "Калькулятор" формулу расчета.
ПРИМЕРЫ НАСТРОЙКИ КАЛЬКУЛЯТОРОВ
Кредитный калькулятор
1. Поместим виджет "Форма" в секцию, удалим стандартные поля, кнопку "Отправить заявку" и изменим название формы.
2. Добавим в форму два поля "Ползунок" и два поля "Калькулятор".
3. Изменим названия полей следующим образом:
Первое поле "Ползунок" - название "Сумма кредита";
Второе поле "Ползунок" - название "Срок кредита (мес.)";
Третье поле "Калькулятор" - название "Ежемесячный платеж";
Четвертое поле "Калькулятор" - название "Общая сумма выплаты".
4. Укажем для полей минимальные, максимальные значения и шаг.
Для поля "Сумма кредита" минимальное значение 30000, максимальное - 500000, шаг - 10000;
Для поля "Срок кредита (мес.)" минимальное - 1, максимальное - 36, шаг - 1;
5. К каждому полю нужно добавить переменную, чтобы значения из этих полей считались в полях "Калькулятор".
Для поля "Сумма кредита" укажем переменную - credit;
Для поля "Срок кредита (мес.)" - term;
Для поля "Ежемесячный платеж" - payment;
6. В поле "Ежемесячный платеж" добавим формулу расчета по кредиту.
Формула: (credit + (credit * 0.117 * term) / 12) / term
Заметка: в формуле указаны переменные, которые мы указали каждому полю в предыдущем шаге. Каждая переменная содержит какое-то значение и при передвижении ползунка оно меняется. Значение 0.117 - это процентная ставка по кредиту, то есть она равна 11,7%.
Нажав на знак вопроса возле поля "Формула" можно увидеть какие операции поддерживаются.
7. В поле "Общая сумма выплаты" добавим формулу - payment * term. Где сумма ежемесячных платежей умножается на количество месяцев.
8. В результате при передвижении ползунков сумма будет пересчитываться с новыми результатами.
Чтобы сделать из калькулятора форму-калькулятор достаточно просто добавить в форму виджет "Кнопка", переименовать её и указать в настройках действие "Отправить форму или перейти к следующему шагу".
Форма-калькулятор заказа еды
1. Добавим виджет "Форма" в секцию и укажем положение для формы "По ширине".
2. В форме будет три поля:
Тип поля "Имя", название "Введите вашу фамилию и имя";
Тип поля "Номер телефона", название "Укажите ваш номер телефона";
Тип поля "Текстовое поле", название "Укажите адрес доставки".
3. Изменим название формы на "ЧТО ХОТИТЕ ЗАКАЗАТЬ?" И добавим в неё ещё несколько виджетов:
Текст;
Линия;
Колонки из двух ячеек;
Колонки из четырех ячеек.
4. В виджетах "Колонки" выполним следующие действия.
Для колонки состоящей из четырех ячеек:
В первые три ячейки добавим поля "Галочки" и "Ползунок;
В четвертую ячейку поле "Калькулятор";
Удалим все виджеты "Текст" лежащие в каждой ячейке.
Для колонки состоящей из двух ячеек:
В левой ячейке укажем текст "При выборе количества товара их количество умножается на выбранное значение." Выровняв его по левому краю;
В правой ячейке удалим виджет "Текст".
Дополнительно в ранее добавленном виджете "Текст" напишем "Ваши контактные данные" и поместим между этим текстом и колонками виджет "Линия", чтобы визуально разделить калькулятор от формы.
5. Настроим поля.
Для полей "Ползунок" укажем названия, минимальные и максимальные значения;
В полях "Галочка" напишем названия продуктов и их разновидность;
Поле "Калькулятор" переименуем в "Итоговая цена".
6. В настройках полей "Галочки", "Ползунок" укажем переменные и цены на каждый вид товара.
Поле "Гамбургеры":
Переменная - hamburgers;
C говядиной - 320 руб;
Cо свининой - 200 руб;
C телятиной - 450 руб;
Поле "Чай":
Переменная - tea;
Черный - 180 руб;
Зеленый - 180 руб;
Белый - 200 руб;
Поле "Мороженное":
Переменная - ice;
Клубничное - 120 руб;
Кокосовое - 120 руб;
Ванильное - 120 руб;
Для всех полей "Ползунок":
Переменная - amount_ (после знака нижнего подчеркивания добавим соответсвующее имя переменной из полей "Галочки", чтобы получилось так amount_hamburgers, amount_tea, amount_ice);
Минимальное значение - 1;
Максимальное значение - 20;
Шаг - 1.
7. В поле "Итоговая цена" настроим формулу вычисления итоговой суммы.
Формула: (hamburgers * amount_hamburgers) + (tea * amount_tea) + (ice * amount_ice)
Калькулятор расчета суточной нормы потребления калорий
1. Добавим в секцию виджет "Форма", удалим стандартные поля, в том числе, кнопку "Отправить заявку" и добавим в форму новые поля:
Три поля "Количество";
Одно поле "Выпадающий список";
Одно поле "Калькулятор".
2. В заголовке формы напишем "РАСЧЕТ СУТОЧНОЙ НОРМЫ ПОТРЕБЛЕНИЯ КАЛОРИЙ", а поля формы назовем так:
Первое поле - "Рост (в сантиметрах)";
Второе поле - "Вес (в килограммах)";
Третье поле - "Возраст";
Четвертое поле - "Степень активности".
3. В поле "Выпадающий список" добавим такие варианты:
Отсутствие физических нагрузок, сидячая работа;
Физические нагрузки 2 раза в неделю;
4/5 тренировок в неделю или активная работа «в движении»;
5/6 интенсивных тренировок в неделю;
Тренировки 7 дней в неделю;
Ежедневные нагрузки 2 раза в день;
Интенсивные тренировки 2 раза в день или же тяжелые физические нагрузки на работе.
Сразу укажем переменную и значения переменной для каждого из вариантов:
Переменная - activity;
Значение переменной для варианта "Отсутствие физических нагрузок, сидячая работа" - 1.2;
Значение переменной для варианта "Физические нагрузки 2 раза в неделю" - 1.4;
Значение переменной для варианта "4/5 тренировок в неделю или активная работа «в движении»" - 1.46;
Значение переменной для варианта "5/6 интенсивных тренировок в неделю" - 1.55;
Значение переменной для варианта "Тренировки 7 дней в неделю" - 1.63;
Значение переменной для варианта "Ежедневные нагрузки 2 раза в день" - 1.72;
Значение переменной для варианта "Интенсивные тренировки 2 раза в день или же тяжелые физические нагрузки на работе" - 1.9.
4. Добавим имена переменных во все остальные поля.
Рост (в сантиметрах) - growth;
Вес (в килограммах) - weight;
Возраст - age.
5. В поле "Калькулятор" изменим название на "Суточная норма потребления калорий", положение выберем "По центру" и зададим формулу для вычислений.
Формула: (weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity
Для просмотра, как настроены калькуляторы, перейдите в редактор по этой ссылке.
Для просмотра калькуляторов в работе - по этой ссылке.
