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

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, wpcode.js и пр.). Чтобы не захламлять вашу страницу, вы можете указать ID страниц, на которых размещен шорткод плагина, тогда скрипты будут подгружаться только там. Если вы используете виджет плагина, то укажите 0 (ноль) для загрузки скриптов на всех страницах сайта. Эти настройки одинаковы для всех создаваемых калькуляторов.

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

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

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

• Заголовок – отображается над полем.
• Текст – можно указать любой произвольные текст, который не участвует в формуле расчета. Поле поддерживает html теги. Отступы добавляются автоматически (nl2br).
  Все результаты расчетов калькулятора записываются сессию, в связи с этим можно указать следующие коды, которые выведут нужный результат из $_SESSION.
  [session id=”номеркалькулятора”]указать номер поля калькулятора или указать 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 полей через запятую, которые нужно скрыть и исключить в формуле расчете. У указанных полей параметры “Визуально скрыть это поле” должен быть выставлен: “Нет”

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

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

 [wpcode id="1"]

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

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

<?php echo do_shortcode('[wpcode id="1"]'); ?>

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

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

Что такое “$_SESSION[‘wpcode_Х’]”
После расчета калькулятора в административной панели можно увидеть массив данных из сессии. В массиве ключ является ID поля, а значение – результатом поля. Ключ sum содержит в себе результат расчета.
Так же в массиве присутствуют названия указанных или выбранных данных пользователем в калькуляторе.
Пример массива сессии:

Array
(
    [2] => 3
    [3] => 9000
    [4] => 1
    [5] => 19
    [8] => 180
    [9] => zetrider.ru
    [11] => 520
    [14] => 850
    [names] => Array
        (
            [2] => Интернет магазин
            [3] => Разработать логотип, Фирменный стиль
            [4] => Нет
            [5] => 19
            [8] => Да
            [9] => zetrider.ru
            [11] => Новости, Регистрация
            [14] => 3D экскурсия офиса, Корзина товаров
        )

    [sum] => 15300
)

Что такое “ksort(array())”
После расчета калькулятора в административной панели можно увидеть отсортированный массив расчета данных с их знаками “до” и “после”. Позволяет вам полностью увидеть картину формулы. Ключ массива НЕ является ID поля. Это порядковый номер в массиве.

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

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

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

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

CSS калькулятора:

/*
	X 	= ID калькулятора
	XF 	= ID поля
*/

.wpcode {}
.wpcode_x {}

.wpcode_form {}
.wpcode_form_x {}

.wpcode_box {}
.wpcode_box_XF {}

.wpcode_description {}

.wpcode_text {}
.wpcode_text_XF {}

.wpcode_select {}
.wpcode_select_XF {}

.wpcode_checkbox {}
.wpcode_checkbox_XF {}

.wpcode_radio {}
.wpcode_radio_XF {}

.wpcode_inputtext {}
.wpcode_inputtext_XF {}

.wpcode_jq_slider {}
.wpcode_jq_slider_vertical {}
.wpcode_jq_slider_horizontal {}
.wpcode_jq_slider_box {}
.wpcode_jq_slider_box_XF {}
.wpcode_jq_slider_text {}
.wpcode_jq_slider_text_XF {}

.wpcode .ui-slider-horizontal {}
.wpcode .ui-slider-vertical {}
.wpcode .ui-slider-range {}
.wpcode .ui-slider-handle {}

.wpcode_submit {}
.wpcode_submit_X {}

.wpcode_loading {}

.wpcode_result_block {}
.wpcode_result_block_X {}

.wpcode_result {}
.wpcode_result_x {}

.wpcode_mail {}
.wpcode_mail_X {}

.wpcode_mail .wpcode_text {}

.wpcode_mail .input {}
.wpcode_mail .textarea {}
.wpcode_mail .wpcode_submit {}
.wpcode_mail .wpcode_loading {}

.wpcode_mail_sucodeess {}
.wpcode_mail_sucodeess .wpcode_text {}

.wpcode_widget {}

HTML калькулятора:
[code lang=”html4strict”]

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