Конструктор форм iForms: онлайн калькулятор 2.X

3091
Краткая инструкция, по созданию онлайн калькуляторов с помощью конструктора форм.
Всё чаще пользователи конструктора стали спрашивать, как можно сделать онлайн калькулятор стоимости услуг в зависимости от выбранных параметров. Здесь рассмотрим один пример, как это сделать в рамках конструктора, не прибегая к хукам, хакам и прочим компонентам.


Рассмотрим пример расчёта стоимости междугородной перевозки автомобилей (читай: доставка груза или товара).

Для расчёта стоимости перевозки/доставки, необходимо знать расстояние и тип/вес авто.
Создаём форму с любыми нужными настройками. В ней создаём поля для выбора или ввода расстояния и типа авто.
Отправной точкой примем условно - город Москва.
Для выбора расстояния я использовал тип поля список с указанием в предустановленных значениях расстояния от города Москвы до указанного города и его название.
Спойлер
Можно сделать список проще - типа до 50 км, до 100 км, до 1000 км, до 10 000 км. Или вывести простое числовое поле для ввода количества километров пользователем.

Для указания типа авто используем радио-кнопки. В предустановленных значениях будем использовать повышающий коэффициент, но также можно указать стоимость, на сколько увеличится итоговая сумма при выборе типа автомобиля.
Спойлер
На этом основные параметры для расчёта стоимости перевозки автомобиля закончились. Теперь можно указать дополнительные параметры, которые будут влиять на общую стоимость перевозки. Например, добавим страхование автомобиля, вид перевозки автомобиля и мелкие опции, типа отправки уведомления в процессе перевозки.

Добавим радио-кнопки пользователю для выбора страховать или нет.
Спойлер
И если пользователь выберет "Да", покажем ему зависимое поле, где в предустановленных значениях укажем стоимость автомобиля.
Спойлер
Для выбора вида перевозки будет использовать обычное поле типа список, где в предустановленных значениях укажем на сколько изменится общая стоимость перевозки при выборе одного из пунктов. Тут можно использовать коэффициент и считать во сколько раз измениться стоимость. Поэтому формула расчёта любого калькулятор зависит от конкретной задачи и её начальных данных.
Спойлер
Осталось добавить опции для отправки уведомлений пользователю и написать формулу расчёта.
Сделаем выбор на отправку смс или письма на емаил с указанием стоимости каждой услуги.
Спойлер
Соответственно, при выборе смс или email, нам нужно спросить у пользователя номер телефона или емаил, куда отправлять уведомления. Сделаем их через зависимые поля.
Спойлер
Теперь осталось самое интересное - написать формулу для расчёта стоимости.
Создаём поле
Спойлер
В нём нас интересует поле ввода формулы, на остальные опции данного поля можно не обращать внимания, так как у формулы стоит высший приоритет обработки данных.
Код PHP:
  1. ( destination * type_auto * 50 ) + ( price_auto * 0.02 ) + type + notice
Здесь указана формула для расчёта и она может быть у вас своя в зависимости от начальных условий задачи. Но в нашем случае мы берём расстояние из поля destination, умножаем на коэффициент в зависимости от выбранного типа авто type_auto и умножаем на 50 - условная цифра стоимости перевозки одного километра. Эту цифру можно указать скрытым полем в форме и при необходимости изменить стоимость перевозки одного километра, менять только значение этого поля или менять здесь в самой формуле. Затем добавляем стоимость страховки (если есть). Стоимость страховки для примера расчитываем как два процента от суммы страховки, например указанную пользователем сумму price_auto умножаем на 2 процента. И затем добавляем стоимость выбранного типа перевозки и стоимость уведомлений.

Важное условие в этой строке формулы, это - все математические знаки, скобки и слова должны отделяться пробелами между собой.

В итоге получаем такую форму, где самое первое поле - "Направление доставки" не задействовано в расчётах стоимости. Хотя можно использовать и его.
Конструктор форм iForms. Добавление записи в типы контента гостем.
Комментарии (46)
Алексей Тимофеев 17 мая 2017 в 11:04 +2
Отличный компонент, мы его успешно используем на своем проекте, гибкий, удобный, быстрый.
vikont 17 мая 2017 в 13:57 +1
Есть ли возможность вставлять изображения, чтобы получить подобный калькулятор
Loadырь 17 мая 2017 в 14:18 0
Возможности вставлять изображения, нет, но вам ничто не мешает стилизовать радиокнопки в виде картинок (например так) И получите такой калькулятор.
vikont 17 мая 2017 в 14:31 +1
Спасибо за высокую оценку моих знаний в программировании... smile Но увы, они сильно завышены zst
Чуток подробней можно?
Loadырь 17 мая 2017 в 18:05 +1
Это будет вашим следующим домашним заданием. smile
Dorimen 17 мая 2017 в 16:39 0
А где же сам модуль? )
lakomet 17 мая 2017 в 16:54 0
Dorimen:
А где же сам модуль? )
В каталоге дополнений.
Dost 17 мая 2017 в 19:13 0
Не знаю что там на демо в каталоге. Но калькулятор реально классный получился.+
Def 17 мая 2017 в 19:25 0
будет круто, если будут предустановленный набор таких форм при установке компонента) быстрый старт так сказать)
Def 17 мая 2017 в 21:13 0
есть ли множественный выбор, чтобы можно было чекбоксами выбрать опции7
Def 17 мая 2017 в 21:22 0
и возможность выстраивать из в 2-3 колонки
Loadырь 17 мая 2017 в 21:27 +1
Выстраивать можно только "в столбик" и "в строку", но наверняка можно замутить, что-то со свойством css - column
Def 17 мая 2017 в 21:42 0
не могу найти множественный выбор. делал в строку, но не дает выбрать варианты. или я чет не то делаю
Def 17 мая 2017 в 21:44 0
нашел, извиняюсь. мультиселектор только не дает прибавлять. но наверное и не должен
Loadырь 17 мая 2017 в 21:26 +2
Добавил на демке поле "Упаковка при транспортировке".
letsgo 17 мая 2017 в 22:51 +1
Отличный пример. Приятно удивлён.
Def 18 мая 2017 в 09:30 0
можно как то показывать значение по цене напротив значений в калькуляторе?
Loadырь 18 мая 2017 в 09:56 +1
Прописывайте в предустановленных значениях пару "ключ | значение" так
"100500 | +100500 эвро - Пластиковая упаковка"
Lisandr 18 мая 2017 в 13:04 0
Можно ли сделать взаимозависимые поля? К примеру нужно выбрать в начале один вариант чего-то, что бы потом открылся другой набор полей именно под выбранный пункт?
AndroS 18 мая 2017 в 13:56 -1
А вы демо смотрели? Там есть такой пример наглядный
Loadырь 18 мая 2017 в 14:19 0
Lisandr:
Можно ли сделать взаимозависимые поля?
Что вы подразумеваете под "взаимозависимые поля". В конструкторе можно управлять видимостью полей в зависимости от выбранного значения одного поля. Например, как тут, для насыпного типа груза.
Но в моём понятии, зависимость полей это, когда содержимое одного поля зависит от выбранного значения другого поля. То есть на странице есть, скажем два селектора и при выборе значения в первом селекторе, во втором селекторе изменяются значения и названия пунктов для выбора. А при выборе другого пункта у первого селектора во втором селекторе значения меняются на совсем другие. Но сам селектор при этом никуда не скрывается его имя не изменяется. Такого в конструкторе нет. В конструкторе можно сделать три селектора и при выборе в первом селекторе показывать второй селектор, и скрывать третий селектор. А при выборе другого пункта, показывать другие поля или скрывать третьи и т.п.
jorgovich 27 мая 2017 в 20:13 0
Есть предложение, может конечно уже реализовано, заложить рандомное число в поле для расчета, какую нибудь переменную с использованием php функции: int rand ( int $min , int $max ) - может в некоторых случаях пригодится..
kssemenov 9 июня 2017 в 00:14 0
Подскажите, пожалуйста, как вставить поле в форму регистрации?

Спасибо.
Loadырь 9 июня 2017 в 07:29 0
Админка - Компоненты - Профили пользователей - Вкладка "Поля профилей" - Создаёте поле или у существующего в настройках поля ставите галочку " Поле должно быть заполнено"
kssemenov 9 июня 2017 в 08:11 0
Спасибо!
traffs 18 июля 2017 в 14:50 0
а api яндекса сюда не прилепить? https://tech.yandex.ru/maps/jsbox/2.1/deliveryCalculator
Loadырь 18 июля 2017 в 14:56 0
Нет такого поля в конструкторе.
AndroS 26 июля 2017 в 01:00 -1
Почему в форме расчеты математические ведутся, а если эту форму вставить в поле типа контента, расчеты не производятся...
Еще вопрос: можно ли как-то сделать, чтоб при редактировании записи заполнялись несколько полей для расчетов, а в записи - показывались результаты расчетов, и в фильтре не поисковая строка, а уже диапазон числе задать можно было?
Ваши бы поля из iforms да в типы контентов, уважаемый Loadырь! Сложный компонент в освоении, а в типах ваших полей не хватает!
Loadырь 26 июля 2017 в 06:28 0
Потому что, это совершенно разные формы со своими целями и результатами выдачи. В случае с полем "в форме", форма конструктора сильно упрощена для совместимости с основной формой записи.
AndroS:
Еще вопрос:
Пометил себе на будущее, рассмотрю этот вопрос когда время станет доступным. В текущей версии конструктора это не сделать.
AndroS:
в типах ваших полей не хватает
Так, а в чём проблема? Можно начать отсюда, но рекомендую чаще использовать этот емаил [email protected]
AndroS 26 июля 2017 в 07:14 -1
Зачем изобретать велосипед, когда вы его уже изобрели? ))) Надо внедрять в ядро или распространять поштучно! ) Деньги лишними не бывают...
IceBreaker 15 января 2018 в 01:12 0
Здравствуйте. приобрёл компонент, не могу придумать как сделать
Вот у меня человек выбирает тип стекла такой-то
потом выбирает количество стёкол (стёкла все разные по размерам) мне нужно от человека получить отдельно размеры всех стёкол.
То есть из списка выбираем допустим 3 стекла
Должно появиться что-то вроде
Размеры стекла 1:
Ширина
Высота
Размеры стекла 2:
Ширина
Высота
Размеры стекла 3:
Ширина
Высота

Еще бы у каждого можно было бы поставить галочку (Закалённое: да или нет) от этого коэффициент на стоимость добавляется

Выбрал семь сткол, значит семь размеров нужно забить... Зависимость позволяет выбрать только один пункт из количества стекол, то есть если стекла 2, то поля появятся, а если три, то размеры второго стекла уже не появятся, зато будет видно размеры третьего стекла и тд, может можно в зависимостях как-то добавить пункт ЕСЛИ (если кол-во больше 2 допустим, то показать)
IceBreaker 15 января 2018 в 01:23 0
и как можно поле с формулой сделать скрытым, объясню, вот человек ввёл размеры, из них я получаю множество промежуточных значений, таких как
Периметр общий, площадь, общая, всё это перемножено на коэффициенты, на стоимость за погонный метр. за квадратный метр, доставка по километражу и еще куча всяких цифр
Просто общая формула получится адской с пятерными скобками - это жесть, вот я создал поле периметр, в него забил формулу, но я не хочу, чтобы заказчик видел ценообразование, чтобы он видел периметр площадь, как всё это считается и из чего складывается, эти поля скрыть бы...... но в скрытом поле нет типа Математические вычисления...
Итоговая формула выглядела бы гораздо проще (стоимость периметра + стоимость площади + стоимость доставки + стоимость установки + стоимость еще чего-то)
Loadырь 15 января 2018 в 07:34 0
А в чём сложность прописать в настройках поля одну формулу с пятерными скобками?
Loadырь 15 января 2018 в 07:31 0
В данном случае надо выводить все поля формы без зависимостей. А в шаблоне на этой странице прописывать яваскрипт по скрытию/отображению нужных полей. Так сказать более сложную зависимость, чем есть в конструкторе.
IceBreaker 15 января 2018 в 11:40 0
Жалко... Шаблон пока стоит какой попало на сайте, то есть нужно и шаблон получается уже окончательный ставить, потом будут обновления шаблона выходить и будет свистопляска, смена дизайна тоже без представителей программинга не обойдётся
Калькуляторов у меня таких много под каждое изделие... Простеньким не обойтись... Вопрос денег, для каких-то клиентов цена должна быть разная (мебельщикам скидка должна быть, а обычный пользователь не должен знать про эти скидки)
Вы за усовершенствование возьмётесь? Сколько будет стоить и интересно ли?
Пока пойду искать что-то типа онлайн калькулятора со вставкой кода...
Loadырь 15 января 2018 в 12:01 0
Можно сделать дополнительный файл шаблона именно для формы, на основе какого-нибудь из имеющихся и потом в настройках формы указать этот шаблон. На работоспособность при смене шаблона это не повлияет, если форма будет тянуться из дефолтного шаблона, а стили к этой форме будут из нового шаблона. Но там да, есть ограничения: такой шаблон нужен будет для каждой подобной формы и там жёстко прописываются названия полей. То есть если в будущем добавите полей, или переименуете их системные названия, то форма может "сломаться".
IceBreaker:
Вы за усовершенствование возьмётесь?
Боюсь тут не усовершенствовать надо, а писать отдельный компонент "Калькулятор". Так как все нюансы охватить, так просто не получится. Плюс зависимость цены от "количества/качества" и "ранга" пользователя будет слишком крутым усовершенствованием обычного конструктора форм, чьи задачи немного иные.
IceBreaker 15 января 2018 в 21:34 0
А сколько может стоить полноценный калькулятор в вашем исполнении?
есть ли у вас интерес или это лучше не к вам?
Loadырь 16 января 2018 в 07:08 0
В моём исполнении - от 5000 руб. в зависимости от расшифровки слова "полноценный" и поделить эту сумму на количество желающих. Но я пока занят обновлением своих компонентов, плюс ещё два на допиливании. Поэтому, можете начать с поиска исполнителя, либо ждать меня.
ideasdigger 16 января 2018 в 16:04 0
а смысл пилить решение под складчину?)
Loadырь 16 января 2018 в 16:37 0
Да, не вопрос. Запилите без складчины.
IceBreaker 17 января 2018 в 00:17 0
Такое можно и без складчины. могу подождать. в вашем исполнении думаю будет хорошо, вас хвалят.
В принципе на iForms можно было бы сделать, но с некоторыми добавками
Я просто не спец в составлении ТЗ, могу как обычный человек сформулировать или просто нарисовать например в корел как должен выглядеть калькулятор и прописать формулы и что друг за другом открывается

Можно завести базу материалов и видов обработки в админк, во всех калькуляторах на сайте прописаны формулы - меняем цены на материалы и обработку - меняется и итоговая сумма, алгоритм расчёта впринципе не меняется, но иногда чтобы можно было корректировать, с возможностью вычисления промежуточных значений, (площадь периметр), потому как эти цифры учавствуют не только в ценообразовании, но и ,например, в формуле расчта количества крепёжных отверстий на стекле исходя из его длины, чтобы на каждую вещь не писать форсулу 10-ти этажную проще написать формулу типа perimetr * cost_za_metr + ploshad * cost_za_m2 = stoimost
как-то так
Если это графически как-то реализовать, то вообще круто, но это пока так в мечтах больше, чтобы на сайте можно было нарисовать стекло, указать где скругление, примерить рисунок из фотоальбома и прочие интересные вещи, но это может в новых версиях компонента, если он родится....
Loadырь 17 января 2018 в 06:50 0
Тогда можете пока прислать описание (можно с картинками от руки) тех данных и формул расчёта, что у вас есть. Я пока начну обдумывать данный компонент исходя из них.
IceBreaker 17 января 2018 в 00:18 0
Такое можно и без складчины. могу подождать. в вашем исполнении думаю будет хорошо, вас хвалят.
В принципе на iForms можно было бы сделать, но с некоторыми добавками
Я просто не спец в составлении ТЗ, могу как обычный человек сформулировать или просто нарисовать например в корел как должен выглядеть калькулятор и прописать формулы и что друг за другом открывается

Можно завести базу материалов и видов обработки в админк, во всех калькуляторах на сайте прописаны формулы - меняем цены на материалы и обработку - меняется и итоговая сумма, алгоритм расчёта впринципе не меняется, но иногда чтобы можно было корректировать, с возможностью вычисления промежуточных значений, (площадь периметр), потому как эти цифры учавствуют не только в ценообразовании, но и ,например, в формуле расчта количества крепёжных отверстий на стекле исходя из его длины, чтобы на каждую вещь не писать форсулу 10-ти этажную проще написать формулу типа perimetr * cost_za_metr + ploshad * cost_za_m2 = stoimost
как-то так
Если это графически как-то реализовать, то вообще круто, но это пока так в мечтах больше, чтобы на сайте можно было нарисовать стекло, указать где скругление, примерить рисунок из фотоальбома и прочие интересные вещи, но это может в новых версиях компонента, если он родится....
AndroS 17 января 2018 в 14:36 -1
Идея №1, взять за основу и доработать.
Loadырь 17 января 2018 в 14:50 0
Там идея совсем другая. Тут как я понял нужен полноценный калькулятор с вводом параметров гостями. А там только при создании записи всё высчитывается и потом отображается на сайте в записи готовый результат.
IceBreaker 18 января 2018 в 23:41 0
Да, тут целый компонент скорее всего.... гости вводят параметры, могут сохранить расчёт и отправить его админу
А могут и не гости считать себе заказы с учётом скидки