Cost calculator wordpress как настроить

Как создать калькулятор WordPress: пошаговая инструкция, обзор плагинов и сервисов

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

Плагин WPCalc рассчитает стоимость работы или услуги

Использую в WordPress плагин WPCalc давно, потому что настройка расчета стоимости сводиться к созданию формулы и внешнего вида. Устанавливаем и активируем из административной панели поиском по плагинам.

Появится новый раздел в меню WPCalc заходим в него, нажимаем Add New.

Появится строчка с надписью Add new fields, она добавляет элемент в пример вычисления формулы, которую будем писать дальше. Сделаем калькулятор для подсчета наливных полов, выведем четыре поля:

• Длина
• Ширина
• Прайс за 1 квадратный метр
• Возможность выбора опции снятие старой заливки

Логика такая: находим площадь, умножаем на стоимость работы за 1 кв м, и прибавляем цену за снятие старого материала (исходя из площади). Первой зададим длину.

1. Раздел Title задает заголовок, можно не показывать и снять выделение чекбокса
2. Item type – тип показывает как будет показана функция, нужно чтобы пользователь вводил цифры, значит выставляем input
3. Field width – сколько места занимает строчка ввода по горизонтали, выставлю 6/12 чтобы рядом прописать еще раздел ширины
4. Validation – выставляем number, все что не имеет числового значения расценивается ошибкой
5. Placeholder – заполнитель текстовой области, написал “введите длину
6. Value – значение по умолчанию, записал 0
7. По аналогии создаем еще один fields ширины, должно получится так.

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

Обозначил Item type как Checkbox, с помощью галочки. Размер 12/12, value 1000, то есть тысяча рублей будет браться за очистку 1 квадратного метра пола. Selecte оставил не отмеченным, чтобы услуга по выравниванию по умолчанию не прибавлялась.

Следующий шаг настройка формулы, создаем раздел, выставляем параметры.

В тайтле написал результат, выводить не стал. В поле item type выставил Result. В разделе formula пишем принцип вычисления. У каждого окна есть название в данном случае Field 4. Цифра показывает номер объекта, оно не повторяется в рамках одного калькулятора. 1 – длина, 2 – ширина, 3 – стоимость за очистку.

Записываем элемент в формулу через нижнее подчеркивание, например field_1.

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

В разделе делаем окончательный расчет оператором , перед ним написал текст. Нажимаем на сохранить, копируем шорткод калькулятора для вставки на сайт WordPress.

Создаем запись или страницу в WordPress, вставляем шорткод, выбираем предварительный просмотр.

На странице отобразиться калькулятор, проверим. Введу данные и посчитаю самостоятельно совпадают ли цифры.

Расчет прошел успешно, при отметке чекбокса цифра стала 18000, что соответствует заданным параметрам вычисления. Для разнообразия внешнего вида перейдите в раздел style, настройте оформление и сохраняйте.

Платный вариант плагина

В платном варианте есть несколько дополнительных функций:

• Неограниченное количество форм
• Больше стилей
• Интеграция с Mailchimp и Getresponse
• Отправка писем с результатом расчета пользователю и админу
• Добавить адрес электронной почты в базу данных
• Добавить форму после публикации контента
• Виджет с формой
• Копирование и экспорт списка контактов в .xls, .csv

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

Калькулятор совместим со всеми плагинами типа elementor, woocommerce. Он имеет свой шорткод, а вставить его просто.

Чтобы рассчитать стоимость доставки и расстояние придется использовать WooCommerce (советую прочитать как подключить Robokassa) и дополнения от систем доставки таких как DPD или СДЕК, других вариантов к сожалению нет.

Видео инструкция

Чтобы процесс создания понять лучше, записал свое видео.

Бесплатные формулы для калькулятора в WordPress

Русские разработчики позаботились о пользователях как платных, так и бесплатных тарифов. На неофициальном сайте есть все расчеты с формулами, какие отрасли затронуты:

• Кредитные сделки
• Процентные операции
• Ландшафтное направление
• Наука
• Красота
• Питание
• Конвертеры
• Строительство

Можете подобрать расчет, внести порядок действий в калькулятор. На данный момент число конфигураций почти 520 версий.

Стоит внести свои характеристики и настроить вывод, остальное за системой. Отмечу что справка на сайте на русском языке.

Примеры других калькуляторов

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

1. WPCC – не обновлялся 6 лет, имеет простую панель, не совместим с новыми версиями PHP
2. Responsive Mortgage Calculator – калькулятор разрабатывался для недвижимости особенно ипотечные сделки
3. Calculated Fields Form – предоставляет необходимые возможности доступные только в платной версии. Огромный плагин WordPress, разобраться сложно, для простых задач используйте мой вариант

Онлайн сервисы калькуляторов на русском языке

В интернете есть сервисы для калькуляторов, большинство платные, имеет русский перевод. Покажу несколько вариантов.

UCalc настраиваемый под любые цели

Сервис UCalc стал популярным, потому что имеет модуль для синхронизации с вордпресс. Бесплатная версия не даст создать крутой калькулятор, но для простых задач подойдет идеально.

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

Calccreator

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

Можно за один месяц создать максимум калькуляторов и ставить на сайты клиентов. Скрипты проверены с WordPress, совместимость подтверждаю.

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

Источник

WPCC 3.5 — плагин для создания калькуляторов в WordPress

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

В версия калькулятора «Creator Calculator 3.5» для CMS WordPress внесены следующие изменения и возможности:

• Изменен алгоритм расчетов
• Изменена структуру таблицы калькулятора
• Добавлена возможность округления результата расчетов
• Появилась возможность применять арифметические функции: Извлечь квадратный корень, Возвести в степень
• Поле jQurey Copy теперь работает для всех типов полей
• Исправлен шаблон построения списков SELECT, RADIO (раньше: [100]:title; сейчас: 100:title)
• Добавлена возможность создавать списки для Checkbox
• Исправлены логические ошибки в функции расчета
• Добавлено новое поле: Условия
• Автоматический старт сессии и подключение плагина jQuery
• Удалены лишние настройки калькулятора
• Добавлена опция полей: Исключить из формулы
• Добавлена опция полей: Скрыть поле визуально (для работы условий)
• Добавлено новое поле: Слайдер (jQuery UI Slider)
• Исправлена ошибка подключения wp-load.php к файлам плагина
• Добавлен Импорт и Экспорт формул калькулятора
• Добавлена возможность отправлять результаты расчетов пользователя на почту с сохранением выбранных параметров
• Добавлены новые темы калькулятора
• Исправлена работа сортировки полей
• Добавлена возможность подключения скриптов, нужных для работы плагина на определенных страницах сайта

Демо калькулятора

Описание работы калькулятора

Администратор сайта на WordPress может создавать неограниченное количество форм калькулятора с размещением их на страницах сайта, либо через виджеты.

Принцип работы калькулятора:

поле1 + sqrt((поле 3 * (поле 2 + поле 4)))
Дословно:
(id1 (знак после поля)) квадратный корень из ((знак перед полем id3 знак после поля) (знак перед полем id2 знак после поля) (id4 знаки после поля))

Параметры калькулятора

Каждый калькулятор можно назвать своим именем. Данное имя отображается только в административной панели.

Так же у всех калькуляторов есть следующие индивидуальные настройки:

Общие настройки:

• Название кнопки — по умолчанию Расчитать. Вы можете указать например: Получит результат
• Текст перед суммой — по умолчанию: Результат. Отображается перед результатом расчета.
• Текст после суммы — по умолчанию: Руб. Наример можно указать $.
• Action формы — куда перенаправить пользователя после расчета. (Работает только в случаи отключенного JavaScript)
• Округлять результат — можно выбрать фунацию при помощи которой будет обработана сумма результата. Для вас доступны: Round (от 0 до 4 знаков после запятой), Ceil и Floor.
• Дизайн калькулятора: Вы можете выбрать одну из четырех готовых тем на любой вкус, либо внести правки в существующую.

Настройки писем:

• Включить отправку писем — если требуется отправлять письма после расчета, выберите Да
• Тема — Тема письма, которое отправляется на E-Mail. После темы автоматически добавляется Имя пользователя. Например: Расчет калькулятора от пользователя Вася Пупкин.
• На какой E-Mail отправлять — укажите email. По умолчанию email администратора.
• Текст в начале письма — Текст перед таблицей с результатами расчета
• Текст перед формой — Отображается перед формой отправки письма пользователем.
• Сообщение об успешной отправке — Отображается, когда сообщение успешно отправлено.

p.s. Поля не проходят валидацию. Отправляется то, что указал или не указал пользователь.

Загрузка скриптов плагина:

С версии 3.5 для полноценной работы плагина подключаются библиотеки: (jquery-ui-core, jquery-ui-slider, wpcc.js и пр.). Чтобы не захламлять вашу страницу, вы можете указать ID страниц, на которых размещен шорткод плагина, тогда скрипты будут подгружаться только там. Если вы используете виджет плагина, то укажите 0 (ноль) для загрузки скриптов на всех страницах сайта. Эти настройки одинаковы для всех создаваемых калькуляторов.

Типы полей, их параметры, описание

В плагине рядом с каждым параметром поля есть знак вопроса «?». При нажатии на вопросительный знак, вы попадете на страницу сайта разработчика с более подробным описанием параметра.

Текстовой блок:

Отображает заголовок и текст указанный в его параметрах.

• Заголовок — отображается над полем.
• Текст — можно указать любой произвольные текст, который не участвует в формуле расчета. Поле поддерживает html теги. Отступы добавляются автоматически (nl2br).
  Все результаты расчетов калькулятора записываются сессию, в связи с этим можно указать следующие коды, которые выведут нужный результат из $_SESSION.
  [session номер поля калькулятора или указать sum для отображения результата[/session]
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.

Select:

Отображает выпадающий список с возможность выбора 1 параметра.

• Заголовок — отображается над полем.
• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Список — Данное поле позволяет создавать варианты в выпадающем списке. В прошлых версиях списки составлялись по следующему шаблону:
  [цена]: название поля;
  [цена2]: название поля2;
  с версии 3.5 шаблон списков стал проще:
  цена: название поля
  цена2: название поля2
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.

Checkbox:

Позволяет произвести множественный выбор из списка.

• Аналогично полю SELECT кроме параметров:
• Действие с данными — Арифметический знак, который означает действие между выбранными чекбоксами.
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда ни один checkbox не был выбран.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые выбрал пользователь в отправляемом письме.

Radio:

Позволяет произвести одиночный выбор из списка.

• Аналогично полю SELECT.

Input Text:

Отображает поле для ввода параметров пользователем.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда посетитель ничего не ввел в поле.
• Цена — Нужно указать цифру, которая будет связана с действием, указанным в параметре поля и произведено с введенными пользователем данными.
• Действие с данными — Арифметический знак, который означает действие с введенными данными посетителем и ценой поля.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые ввел пользователь в отправляемом письме.

Input Hidden:

Скрытое поле, которое участвует в формуле расчета но не отображается пользователям.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Цена — Нужно указать цифру, которая будет участвовать при расчете.

$_SESSION:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда данные из сессии пусты.
• ID калькулятора — Указываем ID калькулятора, из которого необходимо получить данные
• ID поля или sum — Указываем ID поля или пишем sum, чтобы получить результат

jQuery поле:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда данные поля пусты.
• ID поля — Указываем ID поля из которого нужно скопировать данные. Работает для: Input text, Select, Radio, Checkbox, Slider

Арифметическая функция:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Какую функцию используем — Есть возможность выбрать две функции:
  1. Извлечь квадратный корень — позволяет извлечь квадратный корень из поля или группы полей. Для корректной работы обязательно следует обернуть поле в скобки. Например:
  Мы хотим извлечь квадратный корень из поля 15, значит формула должна выглядеть следующим образом:
  [12](15) — квадратные скобки лишь визуально обозначают, что это поле арифметическая функция.
  Если мы хотим извлечь квадратный корень из группы полей, их так же следует обернуть квадратными скобками:
  [12](15+57-11)
  2. Возвести в степень — позволяет возвести в степень поле или группу полей. Для корректной работы поле должно быть охвачено скобкам! В конце скобки указываем степень, в которую нужно возвести поле. Например, возведем поле 10 в степень 2:
  [12](10, 2) — где 2 это степень.
  Мы должны указать в «Знак до» или «Знак после» поля, которое мы возводим в степень следующие параметры:, 2)

Slider:

Поле, которое позволяет отобразить слайдер (ползунок).

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая отобразит ползунок в указанном отрезке между Минимальным и Максимальны значением.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Минимальное значение — Нужно указать цифру, которая будет являться минимальным значением ползунка.
• Максимальное значение — Нужно указать цифру, которая будет являться максимальным значением ползунка.
• Шаг — Нужно указать цифру, с каким шагом будет «скользить» ползунок.
• Положение — в каком положении будет отображен ползунок. Вертикально или Горизонтально.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.

Условие IF VAL Field == Val User:

Поле, которое не видно пользователем, но принимает участие в расчете.

• Какое поле сравниваем — Укажите ID поля, значение которого мы будем сравнивать для выполнения условия. Работает для: Input Text, Select, Checkbox, Radio, Slider.
• Какое значение должно быть у поля — Укажите значение, которое будет сравниваться в условии. Например 100
• Какие поля отображаем — Укажите ID полей через запятую, которые нужно отобразить и включить в формулу расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Да, добавить display: none»
• Какие поля скрываем — Укажите ID полей через запятую, которые нужно скрыть и исключить в формуле расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Нет»

Как вставить калькулятор на страницу:

При редактировании калькулятора возле его названия можно найти шорткод, который можно использовать.

Шорткод имеет следующий вид:

где 1 — это ID вашего калькулятора

Если вам требуется вставить калькулятор в php файл темы, используйте следующий код:

Что означает «Текстовая формула ID полей»

Отображает структуру полей вашего калькулятора с знаками, выставленными в параметрах «до» и «после».
Данный параграф позволяет легко найти ошибки в своей формуле.

Что означает «Строка»

После расчета калькулятора в административной панели можно увидеть поле «Строка», которая отображает данные из полей, их знаки «до» и «после».
Эта строка выполняется перед отображением суммы.

Что такое «$_SESSION[‘wpcc_Х’]»

Что такое «ksort(array())»

После расчета калькулятора в административной панели можно увидеть отсортированный массив расчета данных с их знаками «до» и «после». Позволяет вам полностью увидеть картину формулы. Ключ массива НЕ является ID поля. Это порядковый номер в массиве.

Как изменить стили калькулятора

В калькулятора на момент написания статьи создано 4 простых темы.
Файлы тем расположены в папке плагина /wp-creator/calculator/theme/название выбранной вами темы для калькулятора
В каждой папке есть файл style.css который отвечает за оформление калькулятора.

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

Бывают случаи, когда рассчитывать в калькуляторе ничего не требуется, но нужно получить данные от пользователи.
Например: Вы хотите реализовать форму, в которой будет предложен выбор марки автомобиля. Посетителю при выборе определенной марки авто при помощи поля «Условие» отображаются следующие опции по конфигурации технических характеристик. После всех действий вам на почту приходят данные которые выбрал пользователь.
Для реализации подобной задачи, у всех полей выставляем «Нет» в параметре: «Это поле участвует в формуле расчета».
При помощи CSS вы можете скрыть поле результата расчета, чтобы посетитель не видел не нужную ему информацию в которой будет отображено 0 руб. Стиль отвечающие за блок с результатом расчета: .wpcc_result либо wpcc_result_X где X — это ID вашего калькулятора.

Как экспортировать формулу

Вы можете скопировать сериализованный массив для дальнейшей передачи или импорта в другой калькулятор через кнопку «Экспорт формулы». В экспортированных данных сохраняются все созданные поля и индивидуальные настройки калькулятора.

Как Импортировать формулу

Вы можете импортировать ранее сериализованный массив из другого калькулятора при помощи кнопки «Импорт формулы». В импортируемых данных содержатся все созданные поля и индивидуальные настройки калькулятора. Если вы импортируете данные с другого сайта (или переданные от друга), не забудьте поменять e-mail в настройках калькулятора на который будут отправляться письма.

Как установить плагин:
1. Скачать плагин — http://wordpress.org/plugins/wp-creator-calculator/
2. Закачать в папку плагинов вашего сайта wp-content/plugins/
3. Активировать плагин
4. Слева в меню административной панели выберите пункт WPCC
5. Создавайте и настраивайте свой калькулятор.

p.s. Ищу добровольного переводчика для плагина и инструкции на английский язык.

Добавлен параметр для условия «Оператор условия»: ==, >, =,

Источник