n-wp.ru — блог о WordPress
WP Creator Calculator 3.0 — создание калькуляторов  | n-wp.ru

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 знаки после поля)

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

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

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

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

Checkbox
image

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

Radio кнопки
image

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

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

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

Скрытое поле
image

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

$_SESSION поле
image

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

jQuery поле
image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Структура CSS

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

Заголовок текстового поля
Текст в текстовом поле, надо протестировать сессии и прочие штуковины
Выпадающий список

Чекбокс

Радио


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



Результат: 1006 руб.

Результат: 23255 руб.
Отправить заявку администратору?
Ваше Имя и Фамилия
Ваш E-Mail
Ваш телефон
Ваш комментарий




/* Widget */

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

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

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

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

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

zetrider

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

Комментировать

/* ]]> */