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

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


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

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

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

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

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

В итоге получаем такую форму, где самое первое поле — "Направление доставки" не задействовано в расчётах стоимости. Хотя можно использовать и его.
+2
Алексей Т Алексей Т 6 лет назад #
Отличный компонент, мы его успешно используем на своем проекте, гибкий, удобный, быстрый.
+1
vikont vikont 6 лет назад #
Есть ли возможность вставлять изображения, чтобы получить подобный калькулятор
0
Loadырь Loadырь 6 лет назад #
Возможности вставлять изображения, нет, но вам ничто не мешает стилизовать радиокнопки в виде картинок (например так) И получите такой калькулятор.
+1
vikont vikont 6 лет назад #
Спасибо за высокую оценку моих знаний в программировании... smile Но увы, они сильно завышены zst
Чуток подробней можно?
+1
Loadырь Loadырь 6 лет назад #
Это будет вашим следующим домашним заданием. smile
0
Dorimen Dorimen 6 лет назад #
А где же сам модуль? )
0
lakomet lakomet 6 лет назад #
Dorimen:
А где же сам модуль? )
В каталоге дополнений.
0
Dost Dost 6 лет назад #
Не знаю что там на демо в каталоге. Но калькулятор реально классный получился.+
0
Def Def 6 лет назад #
будет круто, если будут предустановленный набор таких форм при установке компонента) быстрый старт так сказать)
0
Def Def 6 лет назад #
есть ли множественный выбор, чтобы можно было чекбоксами выбрать опции7
0
Def Def 6 лет назад #
и возможность выстраивать из в 2-3 колонки
+1
Loadырь Loadырь 6 лет назад #
Выстраивать можно только "в столбик" и "в строку", но наверняка можно замутить, что-то со свойством css - column
0
Def Def 6 лет назад #
не могу найти множественный выбор. делал в строку, но не дает выбрать варианты. или я чет не то делаю
0
Def Def 6 лет назад #
нашел, извиняюсь. мультиселектор только не дает прибавлять. но наверное и не должен
+2
Loadырь Loadырь 6 лет назад #
Добавил на демке поле "Упаковка при транспортировке".
+1
letsgo letsgo 6 лет назад #
Отличный пример. Приятно удивлён.
0
Def Def 6 лет назад #
можно как то показывать значение по цене напротив значений в калькуляторе?
+1
Loadырь Loadырь 6 лет назад #
Прописывайте в предустановленных значениях пару "ключ | значение" так
"100500 | +100500 эвро - Пластиковая упаковка"
0
Lisandr Lisandr 6 лет назад #
Можно ли сделать взаимозависимые поля? К примеру нужно выбрать в начале один вариант чего-то, что бы потом открылся другой набор полей именно под выбранный пункт?
-1
AndroS AndroS 6 лет назад #
А вы демо смотрели? Там есть такой пример наглядный
0
Loadырь Loadырь 6 лет назад #
Lisandr:
Можно ли сделать взаимозависимые поля?
Что вы подразумеваете под "взаимозависимые поля". В конструкторе можно управлять видимостью полей в зависимости от выбранного значения одного поля. Например, как тут, для насыпного типа груза.
Но в моём понятии, зависимость полей это, когда содержимое одного поля зависит от выбранного значения другого поля. То есть на странице есть, скажем два селектора и при выборе значения в первом селекторе, во втором селекторе изменяются значения и названия пунктов для выбора. А при выборе другого пункта у первого селектора во втором селекторе значения меняются на совсем другие. Но сам селектор при этом никуда не скрывается его имя не изменяется. Такого в конструкторе нет. В конструкторе можно сделать три селектора и при выборе в первом селекторе показывать второй селектор, и скрывать третий селектор. А при выборе другого пункта, показывать другие поля или скрывать третьи и т.п.
0
jorgovich jorgovich 6 лет назад #
Есть предложение, может конечно уже реализовано, заложить рандомное число в поле для расчета, какую нибудь переменную с использованием php функции: int rand ( int $min , int $max ) - может в некоторых случаях пригодится..
0
kssemenov kssemenov 6 лет назад #
Подскажите, пожалуйста, как вставить поле в форму регистрации?

Спасибо.
0
Loadырь Loadырь 6 лет назад #
Админка - Компоненты - Профили пользователей - Вкладка "Поля профилей" - Создаёте поле или у существующего в настройках поля ставите галочку " Поле должно быть заполнено"
0
kssemenov kssemenov 6 лет назад #
Спасибо!
0
traffs traffs 6 лет назад #
а api яндекса сюда не прилепить? https://tech.yandex.ru/maps/jsbox/2.1/deliveryCalculator
0
Loadырь Loadырь 6 лет назад #
Нет такого поля в конструкторе.
-1
AndroS AndroS 6 лет назад #
Почему в форме расчеты математические ведутся, а если эту форму вставить в поле типа контента, расчеты не производятся...
Еще вопрос: можно ли как-то сделать, чтоб при редактировании записи заполнялись несколько полей для расчетов, а в записи - показывались результаты расчетов, и в фильтре не поисковая строка, а уже диапазон числе задать можно было?
Ваши бы поля из iforms да в типы контентов, уважаемый Loadырь! Сложный компонент в освоении, а в типах ваших полей не хватает!
0
Loadырь Loadырь 6 лет назад #
Потому что, это совершенно разные формы со своими целями и результатами выдачи. В случае с полем "в форме", форма конструктора сильно упрощена для совместимости с основной формой записи.
AndroS:
Еще вопрос:
Пометил себе на будущее, рассмотрю этот вопрос когда время станет доступным. В текущей версии конструктора это не сделать.
AndroS:
в типах ваших полей не хватает
Так, а в чём проблема? Можно начать отсюда, но рекомендую чаще использовать этот емаил dev@instantcms.ru
-1
AndroS AndroS 6 лет назад #
Зачем изобретать велосипед, когда вы его уже изобрели? ))) Надо внедрять в ядро или распространять поштучно! ) Деньги лишними не бывают...
0
IceBreaker IceBreaker 6 лет назад #
Здравствуйте. приобрёл компонент, не могу придумать как сделать
Вот у меня человек выбирает тип стекла такой-то
потом выбирает количество стёкол (стёкла все разные по размерам) мне нужно от человека получить отдельно размеры всех стёкол.
То есть из списка выбираем допустим 3 стекла
Должно появиться что-то вроде
Размеры стекла 1:
Ширина
Высота
Размеры стекла 2:
Ширина
Высота
Размеры стекла 3:
Ширина
Высота

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

Выбрал семь сткол, значит семь размеров нужно забить... Зависимость позволяет выбрать только один пункт из количества стекол, то есть если стекла 2, то поля появятся, а если три, то размеры второго стекла уже не появятся, зато будет видно размеры третьего стекла и тд, может можно в зависимостях как-то добавить пункт ЕСЛИ (если кол-во больше 2 допустим, то показать)
0
IceBreaker IceBreaker 6 лет назад #
и как можно поле с формулой сделать скрытым, объясню, вот человек ввёл размеры, из них я получаю множество промежуточных значений, таких как
Периметр общий, площадь, общая, всё это перемножено на коэффициенты, на стоимость за погонный метр. за квадратный метр, доставка по километражу и еще куча всяких цифр
Просто общая формула получится адской с пятерными скобками - это жесть, вот я создал поле периметр, в него забил формулу, но я не хочу, чтобы заказчик видел ценообразование, чтобы он видел периметр площадь, как всё это считается и из чего складывается, эти поля скрыть бы...... но в скрытом поле нет типа Математические вычисления...
Итоговая формула выглядела бы гораздо проще (стоимость периметра + стоимость площади + стоимость доставки + стоимость установки + стоимость еще чего-то)
0
Loadырь Loadырь 6 лет назад #
А в чём сложность прописать в настройках поля одну формулу с пятерными скобками?
0
Loadырь Loadырь 6 лет назад #
В данном случае надо выводить все поля формы без зависимостей. А в шаблоне на этой странице прописывать яваскрипт по скрытию/отображению нужных полей. Так сказать более сложную зависимость, чем есть в конструкторе.
0
IceBreaker IceBreaker 6 лет назад #
Жалко... Шаблон пока стоит какой попало на сайте, то есть нужно и шаблон получается уже окончательный ставить, потом будут обновления шаблона выходить и будет свистопляска, смена дизайна тоже без представителей программинга не обойдётся
Калькуляторов у меня таких много под каждое изделие... Простеньким не обойтись... Вопрос денег, для каких-то клиентов цена должна быть разная (мебельщикам скидка должна быть, а обычный пользователь не должен знать про эти скидки)
Вы за усовершенствование возьмётесь? Сколько будет стоить и интересно ли?
Пока пойду искать что-то типа онлайн калькулятора со вставкой кода...
0
Loadырь Loadырь 6 лет назад #
Можно сделать дополнительный файл шаблона именно для формы, на основе какого-нибудь из имеющихся и потом в настройках формы указать этот шаблон. На работоспособность при смене шаблона это не повлияет, если форма будет тянуться из дефолтного шаблона, а стили к этой форме будут из нового шаблона. Но там да, есть ограничения: такой шаблон нужен будет для каждой подобной формы и там жёстко прописываются названия полей. То есть если в будущем добавите полей, или переименуете их системные названия, то форма может "сломаться".
IceBreaker:
Вы за усовершенствование возьмётесь?
Боюсь тут не усовершенствовать надо, а писать отдельный компонент "Калькулятор". Так как все нюансы охватить, так просто не получится. Плюс зависимость цены от "количества/качества" и "ранга" пользователя будет слишком крутым усовершенствованием обычного конструктора форм, чьи задачи немного иные.
0
IceBreaker IceBreaker 6 лет назад #
А сколько может стоить полноценный калькулятор в вашем исполнении?
есть ли у вас интерес или это лучше не к вам?
0
Loadырь Loadырь 6 лет назад #
В моём исполнении - от 5000 руб. в зависимости от расшифровки слова "полноценный" и поделить эту сумму на количество желающих. Но я пока занят обновлением своих компонентов, плюс ещё два на допиливании. Поэтому, можете начать с поиска исполнителя, либо ждать меня.
0
ideasdigger ideasdigger 6 лет назад #
а смысл пилить решение под складчину?)
0
Loadырь Loadырь 6 лет назад #
Да, не вопрос. Запилите без складчины.
0
IceBreaker IceBreaker 6 лет назад #
Такое можно и без складчины. могу подождать. в вашем исполнении думаю будет хорошо, вас хвалят.
В принципе на iForms можно было бы сделать, но с некоторыми добавками
Я просто не спец в составлении ТЗ, могу как обычный человек сформулировать или просто нарисовать например в корел как должен выглядеть калькулятор и прописать формулы и что друг за другом открывается

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

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

Еще от автора

Конструктор форм iForms. Добавление записи в типы контента гостем.
С момента моей прошлой записи на эту тему прошло больше двух лет. За это время двойка претерпела немало изменений.
Редактор разметки iTiny
Шо! Опять! (c)))
Конструктор - в форме
Представляю новый тип поля, который непосредственно связан с конструктором форм iForms.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.