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

WP Creator Calculator 3.0 — создание калькуляторов | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

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

Разбор меню калькулятора:
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 и названия
Чтобы отредактировать нужное поле, нажмите рядом с ним плюсик, откроются его настройки
Чтобы поменять местами поля, нажмите на нужное Вам поле и, удерживая кнопку мыши, перетащите в нужное место.

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

Отображает 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»]

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

title1
title2
title3
title4

Чекбокс
Радио


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

jQuery(document).ready(function( $ ) { $(«#wpcode_jq_6»).keyup(function(){ $(«#wpcode_jq_get_9»).val($(this).val()); }); });

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

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

/* 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. Создавайте и настраивайте свой калькулятор.

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

zetrider

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

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

  1. Полезно знать

    Плагин не отправляет письма (((

    Ответить