Как стать автором
Обновить

WP Creator Calculator – плагин для создания формы калькулятора

Время на прочтение 11 мин
Количество просмотров 42K
Вышла новая версия плагина! Версия 3.5.

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

Вкратце о возможности плагина:
Текстовой блок — любой текст, возможно использовать HTML;
Выпадающий список — список SELECT;
Чекбокс — список CHECKBOX;
Радио кнопки — список RADIO-BUTTONS;
Вводимое поле — текстовое поле позволяющее вводить цифровые значения;
Hidden поле — скрытое поле;
SESSION поле — результаты расчета калькулятора из массива;
Дизайн — возможность выбирать дизайн калькулятора;
Настройки — настройки калькулятора;

На одном сайте можно создавать более 1 калькулятора.


Принципе работы полей:

Поля формируют формулу вида:
поле1 + (поле 3 * (поле 2 + поле 4))

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

Вот примеры некоторых знаков для построения формулы:
(скобки): ( $a + $b ) * $c
+ сложение: $a + $b
- вычитание $a — $b
* умножение $a * $b
/ деление $a / $b
Деление по модулю (целочисленный остаток от деления $a на $b) — $a % $b
Как считать проценты: ($число_процента * $сумму / 100)

Разберем по порядку возможности каждого поля.

Текстовой блок.
Отображаемый текст — любой текст, возможно использовать HTML тем самым позволяя форме калькулятора принимать любое оформление. С версии 2.5 можно выводить значение из массива $_SESSION прямо в тексте. О сессиях подробнее чуть ниже в разделе $_SESSION.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
CSS — класс для этого блока. Нужно указывать только название класса к примеру: myclass, и в файле вашей темы или подключенному через настройки калькулятора файлу *.css указать правила для класса. Как калькулятор формирует CSS и HTML можно посмотреть чуть ниже.

Выпадающий список.
Название поля — введенный текст в этом поле будет отображаться над выпадающим списком.
До — здесь нужно указать арифметический знак который будет задавать действие перед этим выпадающим списком.
После — здесь нужно указать арифметический знак который будет задавать действие после выпадающего списка.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
Значения списка — чтобы сформировать выпадающий список, нужно оформить данные по определенным правилам! К примеру: [цена]: имя;[500]: Монтаж окон;[0]: Нулевой;
Обязательно между такими знаками [цена]: имя;
Если пропустите хоть 1, то поле будет работать некорректно.
p.s. Input строится методом подмены через str_replace.
CSS — класс для этого блока. Нужно указывать только название класса к примеру: myclass, и в файле вашей темы или подключенному через настройки калькулятора файлу *.css указать правила для класса. Как калькулятор формирует CSS можно посмотреть чуть ниже.

Чекбокс.
Название поля — введенный текст в этом поле будет отображаться над блоком чекбоксов.
До — здесь нужно указать арифметический знак который будет задавать действие перед группой чекбоксов.
После — здесь нужно указать арифметический знак который будет задавать действие после группы чекбоксов.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
Значения списка — чтобы сформировать список чекбоксов, нужно оформить данные по определенным правилам! К примеру: [цена]: имя;[500]: Монтаж окон;[0]: Нулевой;
Обязательно между такими знаками [цена]: имя;
p.s. Input строится методом подмены через str_replace.
Действие — действие между выбранными чекбоксами к примеру задаем действие умножение, если чекбоксы состоят из такого списка: [500]: Создание сайта;[200]: Разработка макета;
то сформируется следующая строка (500 * 200).
CSS — класс для этого блока. Нужно указывать только название класса к примеру: myclass, и в файле вашей темы или подключенному через настройки калькулятора файлу *.css указать правила для класса. Как калькулятор формирует CSS можно посмотреть чуть ниже.

Радио кнопки.
Название поля — введенный текст в этом поле будет отображаться над группой радио кнопок.
До — здесь нужно указать арифметический знак который будет задавать действие перед этим блоком радио кнопок.
После — здесь нужно указать арифметический знак который будет задавать действие после блока радио кнопок.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
Значения списка — чтобы сформировать группу радио кнопок, нужно оформить данные по определенным правилам! К примеру: [цена]: имя;[500]: Монтаж окон;[0]: Нулевой;
Обязательно между такими знаками [цена]: имя;
p.s. Input строится методом подмены через str_replace.
CSS — класс для этого блока. Нужно указывать только название класса к примеру: myclass, и в файле вашей темы или подключенному через настройки калькулятора файлу *.css указать правила для класса. Как калькулятор формирует CSS можно посмотреть чуть ниже.

Вводимое поле.
Название поля — введенный текст в этом поле будет отображаться над текстовым полем.
До — здесь нужно указать арифметический знак который будет задавать действие перед этим текстовым полем.
После — здесь нужно указать арифметический знак который будет задавать действие после текстового поля.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
Цена — стоимость поля, введенная цена с действием описанным чуть ниже на введенные данные со стороны пользователя.
Действие — это действие означает что мы делаем с введенными данными со стороны посетителя сайта.
CSS — класс для этого блока. Нужно указывать только название класса к примеру: myclass, и в файле вашей темы или подключенному через настройки калькулятора файлу *.css указать правила для класса. Как калькулятор формирует CSS можно посмотреть чуть ниже.

Скрытое поле.
До — здесь нужно указать арифметический знак который будет задавать действие перед этим срктым полем.
После — здесь нужно указать арифметический знак который будет задавать действие после скрытого поля.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
Цена — стоимость скрытого поля.

SESSION поле.
До — здесь нужно указать арифметический знак который будет задавать действие перед этим выбранной сессией.
После — здесь нужно указать арифметический знак который будет задавать действие после выбранной сессии.
Порядок — числовой порядок сортировки полей в формуле, сортировка от меньшего к большему, по порядку (ASC).
ID какого калькулятора — указать из какого калькулятора созданного вами нужно брать данные из сессии.
ID поля или сумма SUM калькулятора — указать сортировочный ID нужного результата поля, либо итоговую сумму калькулятора, для получения суммы нужно вписать SUM.
Сама сессия создается только после нажатия пользователем кнопки Рассчитать. Ассоциативный массив выглядит таким образом:
Array
(
[wpcalculator-1] => Array
(
[2] => 8000
[sum] => 727600
[4] => 399
[5] => 600
[6] => 3
[3] => 1400
)

)

где wpcalculator-1, цифра 1 означает ID калькулятора, а у вложенных данных ключи массива означают порядок сортировки, кроме ключа sum — это итоговая стоимость расчета.

Для вызова сессии в текстовом блоке нужно сформировать BBCode, выглядит он так:
[session id=«calc_id»]id_key or sum[/session].
К примеру из калькулятора 1 мы хотим достать значение ключа 5, тогда в текстовом блоке нужно сформировать такой код: [session id=«1»]5[/session].
Если массив wpcalculator-1 существует и в нем есть строка с ключом 5 то мы получим в результат цифры 600.
Аналогично если нужно получить сумму калькулятора то нужно заместо 5 подставить sum [session id=«1»]sum[/session].
Примитивно предположу, дальше имея данные массива мы можем уже на своем сайте формировать какие либо сложные вычисления ограничивая себя только простыми операторами If и Else в PHP…
Сессии существуют до тех пор пока пользователь не закрыл свой браузер.

Дизайн — новая возможность в WP Creator Calculator, выбор оформления калькулятора. По умолчанию не выбрано никакое оформление. Шаблоны со временем будут пополняться. Если у Вас есть желание помочь, то вы можете выслать свой шаблона на e-amil zetrider@bk.ru.

Настройки — В этом разделе есть простые настройки и сложные которые нужны для построения сложных формул вычисления где задействованы 2 и более калькуляторов.
Название кнопки — это кнопка расчета, по умолчанию Рассчитать. Можно настраивать каждому калькулятору индивидуально.
Текст до суммы — Текст отображается перед итоговой суммой, к примеру: Итого. Можно настраивать каждому калькулятору индивидуально.
Текст после суммы — Отображается после суммы, к примеру: Руб. Можно настраивать каждому калькулятору индивидуально.
POST ACTION — Если в этом поле указать web адрес, то после нажатия на кнопку рассчитать у выбранного вами калькулятора, вы попадете на указанный адрес. Можно настраивать каждому калькулятору индивидуально.
CSS — Полный web адрес до вашего Css файла. Вы можете указать отдельный файл стилей для калькулятора. Либо можно оставить пустым и вписать все стили в файл css вашей темы. Если вы выбрали в дизайне какую либо тему, то в это поле автоматический запишется css файл выбранного вами шаблона.

Как устроен CSS в WP Creator Calculator.
.wp_calculate{} /* div - контейнер калькулятора */
.wp_calculateID_CALC{} /* div - контейнер калькулятора c ID калькулятора */

.wp_calculate_form {} /* form - калькулятора */
.wp_calculate_formID_CALC {} /* form - калькулятора c ID калькулятора */

.wp_calculate_text {} /* div - текстового блока */
.wp_calculate_textID_ROW {} /* div - текстового блока с ID поля */

.wp_calculate_description {} /* div - описания полей */
.wp_calculate_descriptionID_ROW {} /* div - описания полей с ID поля */

.wp_calculate_select {} /* select - класс списка */
.wp_calculate_selectID_ROW {} /* select - класс списка с ID поля */

.wp_calculate_checkbox {} /* input - класс чекбоксов */
.wp_calculate_checkboxID_ROW {} /* input - класс чекбоксов с ID поля */

.wp_calculate_radio {} /* input - класс радио кнопок */
.wp_calculate_radioID_ROW {} /* input - класс радио кнопок с ID поля */

.wp_calculate_inputtext {} /* input - класс вводимого поля */
.wp_calculate_inputtextID_ROW {} /* input - класс вводимого поля с ID поля */

.wp_calculate_submit {} /* input - класс кнопки расчета */
.wp_calculate_submitID_CALC {} /* input - класс кнопки расчета c ID калькулятора */

.wpcalculator_price {} /* div - класс для результатов расчета */
.wpcalculator_priceID_CALC {} /* div - класс для результатов расчета c ID калькулятора */


где:
ID_CALC = ID калькулятора
ID_ROW = ID поля (не сортировки), а ID поля из MYSQL

Как устроен HTML в WP Creator Calculator (пример простой формулы):
<div class="wp_calculate wp_calculate1"><br>
<form method="POST" action="#calculate1" class="wp_calculate_form
wp_calculate_form1" name="calculateform1"><br>
<div class="wp_calculate_text wp_calculate_text1 ">Представляем пример
калькулятора</div><br>
<div class="wp_calculate_description wp_calculate_description2">Выберите
услугу</div><br>
<select name="calculateprice[12]" class="wp_calculate_select
wp_calculate_select2 "><br>
<option value="8000+">Создание сайтов</option><br>
<option value="2000+">Разработка макета</option><br>
<option value="1000+">Оптимизация сайта</option><br>
</select><br>
<br /><br>
<div class="wp_calculate_description wp_calculate_description3">Дизайнерский
услуги</div><br>
<input type="checkbox" name="calculatepricecheckbox[][13]" value="600"
class="wp_calculate_checkbox wp_calculate_checkbox3 "> Разработать логотип<br>
<br /><br>
<input type="checkbox" name="calculatepricecheckbox[][13]" value="800"
class="wp_calculate_checkbox wp_calculate_checkbox3 "> Разработать фирменный
стиль<br>
<br /><br>
<input type="hidden" name="calculatepricecheckboxid[3]" value="13" ><br>
<div class="wp_calculate_description wp_calculate_description4">Нужна
регистрация доменного имени? </div><br>
<input type="radio" name="calculateprice[14]" value="((0*"
class="wp_calculate_radio wp_calculate_radio4 "> Нет<br>
<br /><br>
<input type="radio" name="calculateprice[14]" value="((399*"
class="wp_calculate_radio wp_calculate_radio4 "> Да<br>
<br /><br>
<input type="hidden" name="calculateprice[15]" value="600)" ><br>
<div class="wp_calculate_description wp_calculate_description6">Сколько доменов
нужно будет зарегистрировать?</div><br>
<input type="text" name="calculatepricetext[16]" value=""
class="wp_calculate_inputtext wp_calculate_inputtext6 "><br>
<br /><br>
<input type="hidden" value="calculate1" name="calc_id_post"><br>
<input type="submit" value="Рассчитать" class="wp_calculate_submit
wp_calculate_submit1" name="calculate1"><br>
</form><br>
<br style="clear:both;"><br>
</div><br>
<br>
<br style="clear:both;"><br>
<div class="wpcalculator_price wpcalculator_price1" id="calculate1">Итого 488200
руб.</div><br>
<br style="clear:both;">



Как видно из когда вся арифметика передается прямо через VALUE полей.

Как редактировать формулы.

После добавления полей в калькулятор, ниже расположен блок с названием: Формула
Как видно на скриншоте все данные для каждого блока разложены по порядку, если вы запутались наведите мышкой на непонятное поле и во всплывающем окне вы увидите короткую подсказку.
Формула, отображение всех добавленных вами полей, если нужно отредактировать просто вбивайте нужные для вас данные и нажимайте справа кнопку ключа, если нужно удалить жмите крестик

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

Так же на скриншоте виден блок: Формула в виде текста, разберем эту строчку: 12+13+((14*15)*16)
здесь указаны поля сортировки и из значения До и После, так будет легче ориентироваться и находить ошибки в своей формуле.

Как вставить калькулятор на сайт.
Код для файлов вашей темы: <?php echo do_shortcode('[wpcalculator idcalc="1"]'); ?>
Шорткод для страниц и записей: [wpcalculator idcalc=«1»]
где 1 — это ID калькулятора который нужно отобразить.

Продвинутый анализ данных передаваемых калькулятором.
В калькуляторе у шорткода есть вызов отображения более детального анализа расчетов. Чтобы отобразить детальный анализ нужно чтобы шорткод выглядел следующим образом:
[wpcalculator idcalc=«ID» show_result=«true»].
Вы получите следующее:
Передаваемые данные (в виде строки все числовые значения с арифметическими знаками):
8000+(600+800)+((399*600)*(2*1))

и Session list:
Array
(
[wpcalculator-1] => Array
(
[2] => 8000
[sum] => 727600
[4] => 399
[5] => 600
[6] => 3
[3] => 1400
)
)


Установка:


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

Есть вопросы? спрашивай в комментариях!



upd.:
Плагин обновлен до версии 1.1:
Упрощен код плагина
По умолчанию язык английский (иностранцы ругаются)
Присутствует русский перевод
В настройках добавлена возможность задавать текст после итоговой суммы
Исправлены мелкие недочеты

Плагин обновлен до версии 2.0:
Теперь вы сможете создавать на сайте более 1 калькулятора.
Исправлены мелкие ошибки.

Плагин обновлен до версии 2.1:
Исправлены чекбоксы, теперь работают корректно (! Внимание! К Чекбоксам добавлено действие между выбранными значениями);
Добавлена возможность просматривать полный расчет передаваемых данных. Для отображения нужно в шорткод добавить новый параметр: [wpcalculator idcalc=«ID» show_result=«true»]

Что нового в версии 2.5:
1. На одну страницу можно размещать несколько калькуляторов;
2. Добавлена проверка на запрет дублирования одинаковых сортировочных значений;
3. Добавлены массивы $_SESSION в калькулятор, все значения запоминаются в сессии их; можно вытаскивать и подставлять в расчет или текстовой блок;
4. Добавлена возможность отображения списка доступных сессий;
5. Добавлен стиль для калькулятора;
6. Добавлена возможность задавать Action для каждого калькулятора;

Вышла новая версия плагина! Версия 3.5.
Теги:
Хабы:
+22
Комментарии 31
Комментарии Комментарии 31

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн