WP Creator Calculator 3.0 — создание калькуляторов

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

Основные изменения:

• Полностью переписан алгоритм построения формулы
• Упрощена административная панель
• Добавлена функция AJAX расчетов
• Добавлена возможность отправлять письма расчетов
• Исправлены все недочеты и ошибки предыдущей версии
• Изменен принцип работы Checkbox
• Добавлены значения по умолчанию, дабы избегать ошибок “Division by zero”
• Запоминаются выбранные значения в форме после расчета
• Добавлено поле jQuery
• Добавлен Виджет калькулятора
• Удалены лишние поля: Сортировка (теперь просто сортируем мышкой, Drag and Drop), CSS (у каждого блока и так есть уникальный класс)
• Изменена структура таблицы в базе

Примечание
1. Новая версия БД плагина не совместима с предыдущими версиями плагина < 3.0.
2. Все настройки для каждого калькулятора индивидуальны.

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

Разбор меню калькулятора:

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

Заголовок — Текст, который отображается над блоком
Текст — любой текст, возможно использовать HTML, тем самым позволяя форме калькулятора принимать любое оформление.
Так же можно выводить значения из $_SESSION прямо в тексте при помощи кодов [session id=”ID_CALC”]ID_ROW or sum calc[/session]. О сессиях подробнее в разделе $_SESSION.

Список SELECT

Заголовок — Текст, который отображается над списком
Знаки до — здесь нужно указать арифметический знак, который будет задавать действие перед выпадающим списком.
Знаки после — здесь нужно указать арифметический знак, который будет задавать действие после выпадающего списка.
Список — чтобы сформировать выпадающий список, нужно оформить данные по определенным правилам. К примеру — [цена]:имя;[500]:Монтаж окон;[0]:Нулевой;

Checkbox

Заголовок – Текст, который отображается над чекбоксом
Знаки до — здесь нужно указать арифметический знак, который будет задавать действие перед чекбоксом.
Знаки после — здесь нужно указать арифметический знак, который будет задавать действие после чекбокса.
Значение по умолчанию — если чекбокс не выбран, то какое значение по умолчанию ему присваивается. Предполагается использование для формул с умножением и делением, чтобы избежать ошибок в расчете.
Цена поля — стоимость поля, при выборе чекбокса будет подставлена эта цена.
p.s. У чекбоксов в отличии от прошлой версии удалена функция построения списка, т.к. это вызывало много проблем при расчетах. Теперь, чтобы последовательно выстроить несколько чекбоксов в ряд, вы можете при помощи CSS расставить их так, как Вам требуется. Подробнее о CSS структуре чуть ниже.

Radio кнопки

Заголовок – Текст, который отображается над блоком Radio кнопок
Знаки до — здесь нужно указать арифметический знак, который будет задавать действие перед блоком Radio кнопок.
Знаки после — здесь нужно указать арифметический знак, который будет задавать действие после блока Radio кнопок.
Список — чтобы сформировать список Radio кнопок, нужно оформить данные по определенным правилам! К примеру — [цена]:имя;[500]:Монтаж окон;[0]:Нулевой;
p.s. Checked устанавливается на первую по списку Radio кнопку.

Текстовое поле

Заголовок – Текст, который отображается над полем
Знаки до — здесь нужно указать арифметический знак, который будет задавать действие перед текстовым полем.
Знаки после — здесь нужно указать арифметический знак, который будет задавать действие после текстового поля.
Значение по умолчанию — если в поле ничего не вбито, то какое значение по умолчанию ему присваивается. Предполагается использование для формул с умножением и делением, чтобы избежать ошибок в расчете.
Цена поля — стоимость поля. Те данные, которые ввел пользователь, будут умножены или поделены (в зависимости от того, что Вы укажите в поле «Действие с данными») на эту цену.
Действие с данными — указанный здесь арифметический знак подставится между данными, которые ввел пользователь (или значением пол умолчанию) и ценой поля.
p.s. Учитывайте, что пользователь все равно может ввести 0, и если у вас до этого будет стоять деления, произойдет ошибка. Чтобы ее избежать, хорошо продумайте формулу.

Скрытое поле

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

$_SESSION поле

Знаки до — здесь нужно указать арифметический знак, который будет задавать действие перед $_SESSION полем.
Знак после — здесь нужно указать арифметический знак, который будет задавать действие после $_SESSION поля.
Значение по умолчанию — если указанная Вами сессия пуста, будет принято это значение.
ID калькулятора — из какого калькулятора нужно брать данные. Подробнее о структуре массива $_SESSION чуть ниже.
ID поля или sum — из какого ID поля нужно получать данные, или укажите sum, чтобы получать итоговую стоимость расчета калькулятора.

jQuery поле

Данное поле копирует данные, которые ввел пользователь в текстовое поле. По событию keyUp. Это поле скрыто (input hidden).
Знаки до — здесь нужно указать арифметический знак, который будет задавать действие перед jQuery полем.
Знак после — здесь нужно указать арифметический знак, который будет задавать действие после jQuery поля.
Значение по умолчанию — если в поле ничего не вбито, то какое значение по умолчанию ему присваивается. Предполагается использование для формул с умножением и делением, чтобы избежать ошибок в расчете.
ID поля — из какого текстового поля копировать данные.

Настройка дизайна

Вы можете выбрать готовые для использования дизайны калькулятора
1. Без дизайна — пустой css
2. Скелет — без изображений, но с упорядоченными блоками
3. Минимализм — Простой дизайн, который может подойти под любой макет сайта.
Все темы находятся в папке плагина/theme
В папке плагина лежит файл example.css, в котором собраны все стили для калькулятора, отправки почты и виджета.

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

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

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

Фильтрация данных перед отправкой:
Ошибка: Не ввели имя — отображаемая ошибка, если имя передано пустое
Ошибка: Длинное имя — отображаемая ошибка, если имя более 100 символов
Ошибка: Не ввели Email — отображаемая ошибка, если не ввели почту
Ошибка: Некорректный Email — отображаемая ошибка, если ввели не email (стандартная валидация)
Ошибка: Некорректный телефон — отображаемая ошибка, если в телефоне присутствуют недопустимые символы, допустимые — (цифры, пробел, тире, скобки)
Ошибка: Длинный телефон — отображаемая ошибка, если телефон превышает 35 символов
Ошибка: Длинный комментарий — отображаемая ошибка, если комментарий превышает 2500 символов

Настройка калькулятора (индивидуальны для каждого калькулятора, кроме некоторых полей)

Название кнопки расчета — данные текст поставляется в value кнопки расчета
Текст перед суммой — отображаемый текст перед суммой расчета
Текст после суммы — отображаемый текст после суммы расчета
Включить AJAX калькулятор? — дает возможность производить расчет без перезагрузки страниц
Action формы — адрес страницы, куда будет перенаправлен пользователь после нажатия кнопки расчета
Запоминать выбранные данные в форме — позволяет запоминать введенные или выбранные данные пользователем в форме после нажатия кнопки расчета

Подключить jQuery — эта настройка касается всех калькуляторов, если у Вас до сих пор не подключена библиотека Jquery к сайту, выберите это опцию как Да. По умолчанию включена. Подключение происходит при помощи функции wp_enqueue_script(«jquery») черех экшн init
Стартовать $_SESSION — эта настройка касается всех калькуляторов, если на вашем сайте не запущены сессии, то данная их функция стартует функцией session_start(); через экшн init.

В этом же разделе меню Вы можете удалить безвозвратно калькулятор и все его поля

Параграфы калькулятора:
Верхнее поле отображает выбранные настройки из меню

Параграф Добавленные поля:

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

Параграф Текстовая формула:

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

Параграф Предпросмотр калькулятора:

Отображает форму калькулятора, который Вы создали.
Так же в этом параграфе, если не включена функция AJAX расчета, отображаются данные $_SESSION и отсортированные массива по ключам (по сортировке), который получает калькулятор для расчета и подставляет данные в eval();

Структура CSS

/*
ID-calc - идентификатор калькулятора
ID-row - идентификатор поля
*/
 
/* Calculator Class */
 
/* wpcode, wpcode_ID-calc */
.wpcode {}
 
/* wpcode_form, wpcode_ID-calc */
.wpcode_form {}
 
/* wpcode_description, wpcode_description_ID-row */
.wpcode_description {}
 
/* wpcode_text, wpcode_text_ID-row */
.wpcode_text {}
 
/* wpcode_select, wpcode_select_ID-row */
.wpcode_select {}
 
/* wpcode_checkbox, wpcode_checkbox_ID-row */
.wpcode_checkbox {}
 
/* wpcode_radio, wpcode_radio_ID-row */
.wpcode_radio {}
 
/* wpcode_inputtext, wpcode_inputtext_ID-row */
.wpcode_inputtext {}
 
/* wpcode_submit, wpcode_submit_ID-calc */
.wpcode_submit {}
 
/* wpcode_result_block, wpcode_result_block_ID-calc */
.wpcode_result_block {}
 
/* wpcode_result, wpcode_result_ID-calc */
.wpcode_result {}
 
/* Mail Class */
 
/* wpcode_mail_info, wpcode_mail_info_ID-calc */
.wpcode_mail_info {}
 
/* wpcode_mail, wpcode_mail_ID-calc */
.wpcode_mail {}
 
/* wpcode_mail_form, wpcode_mail_form_ID-calc */
.wpcode_mail_form {}
 
/* wpcode_mail_sum, wpcode_mail_sum_ID-calc */
.wpcode_mail_sum {}
 
/* wpcode_mail_text */
.wpcode_mail_text {}
 
/* wpcode_mail_row */
.wpcode_mail_row {}
 
/* wpcode_mail_author */
.wpcode_mail_author {}
 
/* wpcode_mail_email */
.wpcode_mail_email {}
 
/* wpcode_mail_phone */
.wpcode_mail_phone {}
 
/* wpcode_mail_textarea */
.wpcode_mail_textarea {}
 
/* wpcode_mail_send */
.wpcode_mail_send {}
 
/* Widget class */
.wpcode_widget {}, .wpcode_widget_ID-calc {}

Структура HTML
[code lang=”html4strict”]

/* Widget */

Как вставить калькулятор на сайт
Код для файлов вашей темы:

echo do_shortcode('[wpcode id="X"]');

Шорткод для страниц и записей: [wpcode id=”X”] где X — это ID калькулятора, который нужно отобразить.

Структура $_SESSION
Перед каждым расчетом $_SESSION текущего калькулятора удаляется — unset($_SESSION[‘wpcode_’.$wpcode_id]);

Array
(
    [wpcode_1] => Array // wpcode_ID калькулятора
        (
            [3] => 100 // 3 - id поля
            [5] => 100
            [7] => 100
            [8] => 22509
            [9] => 1
            [4] => 100
            [6] => 123 // то, что ввел пользователь в текстовое поле
            [6_sum] => 223 // сумма текстового поля
            [sum] => 23133  // итоговая сумма расчета
        )
 
)

Структура массива

Array
(
    [1] => 100+ // 1 ID сортировки, 100 сумма + знак после поля
    [3] => 100+
    [4] => 100+
    [5] => (123+100)+ // текстовое поле, 123 то, что ввел посетитель, (+) действие с данными, 100 цена поля
    [6] => 100+
    [7] => 23255+
    [8] => 123
)

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