Блог

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

Самый подходящий плагин с невероятными возможностями:

Главное преимущество данного плагина состоит в том, что все расчеты можно производить с помощью JavaScript. С одной стороны это определенная сложность, с другой стороны это огромная гибкость в сложных расчетах с зависимыми данными.

Так же у плагина имеются предустановленные стили (дизайны) формы. А по умолчанию используется просто чистая форма, при встраивании которой берутся стили темы сайта.

Как создать калькулятор с непростыми условиями расчетов

1. Прописываем идентификатор будущей формы, жмем создать
2. Переходим в настройки формы
3. Добавляем нужные нам поля

5. В самих полях есть много параметров, самые используемые:

• значение по умолчанию
• диапазон
• допустимый макс./мин.
• отображение дополнительных скрытых (зависимых) полей, в случае выбора пунктов определенных полей (чекбоксов или радиобаттон)
• скрытие полей

4. Оранжевый цветом выделено главное поле итоговых рассчетов, именно в нем можно прописывать расчеты с помощью JavaScript. Каждая ячейка имеет уникальное имя Fieldname1. Для удобства, в самом начале написания кода я создаю список переменных с удобочитаемым именем.

Так же именно в этом поле есть отличный встроенный редактор кода

На заметку. полноценно JS использовать не получится. Может я чего-то не доглядел, но у меня не вышло воспользоваться конструкцией switch case.

Как добавить свой стиль шаблона CSS наиболее быстрым способом

Представленные шаблоны стилей плагина находятся по следующему пути: /public_html/wp-content/plugins/calculated-fields-form/templates

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

Добавить свой стиль дублировав папку понравившегося стиля у меня не получилось. В этой папке есть ini файл, в котором определено название класса и описание стиля. Модификация ini файла не привела к успеху, да и сомнителен такой способ, т.к. при обновлении плагина, все наши правки неминуемо слетят.

Выход найден:

• Берем понравившийся стиль
• Модифицируем его
• Удаляем из всех селекторов имя класса стиля со всего кода
  (смотрим в FAQ плагина и читаем какие селекторы на что влияют)

• копируем оставшийся код и вставляем его в поле пользовательского стиля, которое находится в настройках формы

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

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

Если у вас появились вопросы, пишите в комментариях, чем смогу помогу.