WP Creator Calculator — плагин создает формы калькулятора v 2.5 + видео

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

ПЛАГИН ОБНОВЛЕН ДО ВЕРСИИ 2.5

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

Представляю вашему вниманию плагин для 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 (пример простой формулы):
[code lang=»html4strict»]

Представляем пример калькулятора
Выберите услугу

Создание сайтов
Разработка макета
Оптимизация сайта

Дизайнерский услуги

Разработать логотип

Разработать фирменный стиль

Нужна регистрация доменного имени?

Нет

Да

Сколько доменов нужно будет зарегистрировать?



Итого 488200 руб.


Как видно из когда вся арифметика передается прямо через 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. Настраивайте свой калькулятор.

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

Создай свой первый сайт на WordPress

zetrider

Кодинг, дизайн, wordpress

Оцените автора
Добавить комментарий

  1. Спасибо за столь подробное описание плагина и за обучающее видео!

    Ответить
  2. MidL

    Так, как бы мне так сделать чтобы после составления сметы клиент мог в полях оставить контактные данные и нажал кнопку «Заказать» И мне пришло письмо с тех. заданием и уже зная чего клиент желает мог?) Это невозможно в нынешней версии?))

    Ответить
  3. sergiocharm

    Поставил этот плагин всё устраивает, НО, создал 10 калькуляторов и больше не дает создавать… почему? Кликаю создать новый калькулятор а у меня открывается последний 10ый калькулятор

    Ответить
  4. stello4ka

    Как можно возвести значение в квадрат?

    Ответить
  5. -=dk=-

    подскажите, что может быть
    сразу после установки, на практически читый WP выдало:

    Warning: session_start() [function.session-start]: Cannot send session cookie — headers already sent by (output started at …/wp-admin/includes/template.php:1679) in …/wp-content/plugins/wp-creator-calculator/wp-creator-calculator.php on line 64

    Ответить
  6. Александр

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

    Ответить