В данной статье рассмотрим создание калькулятора с применением плагина с ограниченным бесплатным функционалом. Конечно платный функционал намного интереснее, но для многих сложных расчетов (будь-то ипотечный кредит или расчет стоимости отеля в зависимости от даты заезда или просто расчет платных услуг с различными условиями) вполне подходит.
Самый подходящий плагин с невероятными возможностями:
Главное преимущество данного плагина состоит в том, что все расчеты можно производить с помощью JavaScript. С одной стороны это определенная сложность, с другой стороны это огромная гибкость в сложных расчетах с зависимыми данными.
Так же у плагина имеются предустановленные стили (дизайны) формы. А по умолчанию используется просто чистая форма, при встраивании которой берутся стили темы сайта.
Как создать калькулятор с непростыми условиями расчетов
- Прописываем идентификатор будущей формы, жмем создать
- Переходим в настройки формы
- Добавляем нужные нам поля
5. В самих полях есть много параметров, самые используемые:
- значение по умолчанию
- диапазон
- допустимый макс./мин.
- отображение дополнительных скрытых (зависимых) полей, в случае выбора пунктов определенных полей (чекбоксов или радиобаттон)
- скрытие полей
4. Оранжевый цветом выделено главное поле итоговых рассчетов, именно в нем можно прописывать расчеты с помощью JavaScript. Каждая ячейка имеет уникальное имя Fieldname1. Для удобства, в самом начале написания кода я создаю список переменных с удобочитаемым именем.
Так же именно в этом поле есть отличный встроенный редактор кода
На заметку. полноценно JS использовать не получится. Может я чего-то не доглядел, но у меня не вышло воспользоваться конструкцией switch case.
Как добавить свой стиль шаблона CSS наиболее быстрым способом
Представленные шаблоны стилей плагина находятся по следующему пути: /public_html/wp-content/plugins/calculated-fields-form/templates
Мне очень понравился один из стилей, единственно что мне нужно было, так это вычленить из стиля оформление кнопки, что я и сделал. Следующим этапом оставалось придумать каким образом этот стиль теперь подключить.
Добавить свой стиль дублировав папку понравившегося стиля у меня не получилось. В этой папке есть ini файл, в котором определено название класса и описание стиля. Модификация ini файла не привела к успеху, да и сомнителен такой способ, т.к. при обновлении плагина, все наши правки неминуемо слетят.
Выход найден:
- Берем понравившийся стиль
- Модифицируем его
- Удаляем из всех селекторов имя класса стиля со всего кода
(смотрим в FAQ плагина и читаем какие селекторы на что влияют)
- копируем оставшийся код и вставляем его в поле пользовательского стиля, которое находится в настройках формы
Думаю легко догадаться, что шаблоны стилей можно посмотреть и выбрать из них понравившиеся моменты. Незначительные правки можно прямо в стиле переопределить, как я и поступил с выводом итогового расчета увеличив размер и цвет текста.
В завершении хотелось бы сказать, что бесплатных функций более, чем достаточно, но всё же не хватает кнопки отправить расчеты формы менеджеру. Здесь есть небольшой лайфак, калькулятор позволяет добавить кнопку печати расчета, ну и в целом при желании с этими расчетами клиент может сам прийти в офис для предметного разговора.
Если у вас появились вопросы, пишите в комментариях, чем смогу помогу.
Неплохое решение, а если вообще без кода, то рекомендую stepform плагин, неплохая вещь.
Игорь, спасибо, надо будет ознакомиться. Вообще варианты “совсем без кода” не позволяют решить сложных задач по расчетам и они как правило платные. А по коду не так много знать нужно, все варианты расчетов с помощью условий IF ELSE можно реализовать.
Привет. Отличный урок. благодаря Вам смог разобраться с этим калькулятором и составить себе программу. Но вот с оформлением никак не могу разобраться(((
С оформлением станет все понятно, если знаете css
Здравствуйте. Подскажите, пожалуйста, можно ли использовать этот плагин просто для пересчета цен в зависимости от заданного курса в уже существующем прайсе? Но, без вукомерс. Т.е. вот страница bernetti.art/jurnalnie-stoly-bernetti/
Можно ли сделать так, чтобы где-то в админке цены прописывались в $ а выводились на сайт в рублях
Юрий, добрый день!
Вам лучше зайти на страничку плагина и посмотреть описание его возможностей. С 2019 года могло многое измениться. Если ответа не найдете, можно так же на страничке плагина задать вопрос самим разработчикам.
Добрый день!
Плагин отличный, не думал что найду подходящее для меня решение в каком-либо плагине-калькуляторе. При этом столкнулся с проблемой, не думал даже что в этом будет сложность). Подскажите, пожалуйста, как округлить результат до сотых после запятой?
Денис, приветствую!
Вот https://learn.javascript.ru/number здесь в примерах есть ответ.