- PVSM.RU - https://www.pvsm.ru -
WPCC — это плагин, который позволяет администраторам сайта создавать форму калькуляторов и настраивать формулы расчетов.
В версия калькулятора «Creator Calculator 3.5» для CMS WordPress внесены следующие изменения и возможности:
Калькулятор для расчета стоимость создания сайта [1]
Выбор марки авто без расчета стоимости [2]
Администратор сайта на WordPress может создавать неограниченное количество форм калькулятора с размещением их на страницах сайта, либо через виджеты.
поле1 + sqrt((поле 3 * (поле 2 + поле 4)))
Дословно:
(id1 (знак после поля)) квадратный корень из ((знак перед полем id3 знак после поля) (знак перед полем id2 знак после поля) (id4 знаки после поля))
Каждый калькулятор можно назвать своим именем. Данное имя отображается только в административной панели.
p.s. Поля не проходят валидацию. Отправляется то, что указал или не указал пользователь.
С версии 3.5 для полноценной работы плагина подключаются библиотеки: (jquery-ui-core, jquery-ui-slider, wpcc.js и пр.). Чтобы не захламлять вашу страницу, вы можете указать ID страниц, на которых размещен шорткод плагина, тогда скрипты будут подгружаться только там. Если вы используете виджет плагина, то укажите 0 (ноль) для загрузки скриптов на всех страницах сайта. Эти настройки одинаковы для всех создаваемых калькуляторов.
В плагине рядом с каждым параметром поля есть знак вопроса "?". При нажатии на вопросительный знак, вы попадете на страницу сайта разработчика с более подробным описанием параметра.
Отображает заголовок и текст указанный в его параметрах.
Отображает выпадающий список с возможность выбора 1 параметра.
Позволяет произвести множественный выбор из списка.
Позволяет произвести одиночный выбор из списка.
Отображает поле для ввода параметров пользователем.
Скрытое поле, которое участвует в формуле расчета но не отображается пользователям.
Скрытое поле, которое участвует в формуле расчета, но не отображается пользователям. Позволяет получить данные из результатов расчета калькуляторов.
Скрытое поле, которое участвует в формуле расчета, но не отображается пользователям. Позволяет получить значение поля после действия пользователем с указанным полем.
Скрытое поле, которое участвует в формуле расчета, но не отображается пользователям. Позволяет обернуть поля в выбранную функцию и произвести с ней определенные действия при расчете.
Поле, которое позволяет отобразить слайдер (ползунок).
Поле, которое не видно пользователем, но принимает участие в расчете.
При редактировании калькулятора возле его названия можно найти шорткод, который можно использовать.
Шорткод имеет следующий вид:
[wpcc id="1"]
где 1 — это ID вашего калькулятора
Если вам требуется вставить калькулятор в php файл темы, используйте следующий код:
<?php echo do_shortcode('[wpcc id="1"]'); ?>
Отображает структуру полей вашего калькулятора с знаками, выставленными в параметрах «до» и «после».
Данный параграф позволяет легко найти ошибки в своей формуле.
После расчета калькулятора в административной панели можно увидеть поле «Строка», которая отображает данные из полей, их знаки «до» и «после».
Эта строка выполняется перед отображением суммы.
После расчета калькулятора в административной панели можно увидеть массив данных из сессии. В массиве ключ является 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
)
После расчета калькулятора в административной панели можно увидеть отсортированный массив расчета данных с их знаками «до» и «после». Позволяет вам полностью увидеть картину формулы. Ключ массива НЕ является ID поля. Это порядковый номер в массиве.
В калькулятора на момент написания статьи создано 4 простых темы.
Файлы тем расположены в папке плагина /wp-creator/calculator/theme/название выбранной вами темы для калькулятора
В каждой папке есть файл style.css который отвечает за оформление калькулятора.
Бывают случаи, когда рассчитывать в калькуляторе ничего не требуется, но нужно получить данные от пользователи.
Например: Вы хотите реализовать форму, в которой будет предложен выбор марки автомобиля. Посетителю при выборе определенной марки авто при помощи поля «Условие» отображаются следующие опции по конфигурации технических характеристик. После всех действий вам на почту приходят данные которые выбрал пользователь.
Для реализации подобной задачи, у всех полей выставляем «Нет» в параметре: «Это поле участвует в формуле расчета».
При помощи CSS вы можете скрыть поле результата расчета, чтобы посетитель не видел не нужную ему информацию в которой будет отображено 0 руб. Стиль отвечающие за блок с результатом расчета: .wpcc_result либо wpcc_result_X где X — это ID вашего калькулятора.
Вы можете скопировать сериализованный массив для дальнейшей передачи или импорта в другой калькулятор через кнопку «Экспорт формулы». В экспортированных данных сохраняются все созданные поля и индивидуальные настройки калькулятора.
Вы можете импортировать ранее сериализованный массив из другого калькулятора при помощи кнопки «Импорт формулы». В импортируемых данных содержатся все созданные поля и индивидуальные настройки калькулятора. Если вы импортируете данные с другого сайта (или переданные от друга), не забудьте поменять e-mail в настройках калькулятора на который будут отправляться письма.
/*
X = ID калькулятора
XF = ID поля
*/
.wpcc {}
.wpcc_x {}
.wpcc_form {}
.wpcc_form_x {}
.wpcc_box {}
.wpcc_box_XF {}
.wpcc_description {}
.wpcc_text {}
.wpcc_text_XF {}
.wpcc_select {}
.wpcc_select_XF {}
.wpcc_checkbox {}
.wpcc_checkbox_XF {}
.wpcc_radio {}
.wpcc_radio_XF {}
.wpcc_inputtext {}
.wpcc_inputtext_XF {}
.wpcc_jq_slider {}
.wpcc_jq_slider_vertical {}
.wpcc_jq_slider_horizontal {}
.wpcc_jq_slider_box {}
.wpcc_jq_slider_box_XF {}
.wpcc_jq_slider_text {}
.wpcc_jq_slider_text_XF {}
.wpcc .ui-slider-horizontal {}
.wpcc .ui-slider-vertical {}
.wpcc .ui-slider-range {}
.wpcc .ui-slider-handle {}
.wpcc_submit {}
.wpcc_submit_X {}
.wpcc_loading {}
.wpcc_result_block {}
.wpcc_result_block_X {}
.wpcc_result {}
.wpcc_result_x {}
.wpcc_mail {}
.wpcc_mail_X {}
.wpcc_mail .wpcc_text {}
.wpcc_mail .input {}
.wpcc_mail .textarea {}
.wpcc_mail .wpcc_submit {}
.wpcc_mail .wpcc_loading {}
.wpcc_mail_success {}
.wpcc_mail_success .wpcc_text {}
.wpcc_widget {}
<div class="wpcc wpcc_X ">
<form method="POST" action="#wpcc_result" class="wpcc_form wpcc_form_X">
<!-- Text -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description"></div>
<div class="wpcc_text wpcc_text_1"></div>
<div class="clear"></div></div>
<!-- Select -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description"></div>
<select name="" class="wpcc_select wpcc_select_XF wpcc_jq_XF" data-type="select">
<option value=""></option>
</select>
<div class="clear"></div></div>
<!-- Checkbox -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description "></div>
<div class="wpcc_checkbox wpcc_checkbox_3">
<label><input type="checkbox" name="" value="" class="wpcc_jq_XF" data-type="checkbox"></label>
</div>
<div class="clear"></div></div>
<!-- Radio -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description "></div>
<div class="wpcc_radio wpcc_radio_XF">
<label><input type="radio" name="" value="" class="wpcc_jq_XF" data-type="radio"></label>
</div>
<div class="clear"></div></div>
<!-- Input Text -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description "></div>
<input type="text" name="" value="" class="wpcc_inputtext wpcc_inputtext_XF wpcc_jq_XF" data-type="inputtext">
<div class="clear"></div></div>
<!-- Slider -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_slider_vertical wpcc_jq_slider wpcc_jq_if_XF" data-value="0" data-min="0" data-max="1000" data-position="vertical" data-step="1">
<div class="wpcc_description wpcc_description_XF"></div>
<div class="wpcc_jq_slider_box wpcc_jq_slider_box_XF wpcc_jq_XF" data-type="slider">
<!-- and Style jQuery UI Slide -->
</div>
<div class="wpcc_jq_slider_text wpcc_jq_slider_text_XF">0</div>
<div class="clear"></div></div>
<!-- Submit -->
<input type="submit" value="" name="wpcc_calculate" class="wpcc_submit wpcc_submit_X">
<div class="wpcc_loading"><div></div></div>
</form>
<div class="wpcc_result_block wpcc_result_block_X">
<!-- IF SUCCESS SEND -->
<div class="wpcc_mail wpcc_mail_success" id="wpcc_mail_result">
<div class="wpcc_text">
</div>
</div>
<!-- end IF SUCCESS SEND -->
<!-- SUM -->
<div class="wpcc_result wpcc_result_X" id="wpcc_result"></div>
<!-- Mail -->
<form method="POST" action="#wpcc_mail_result" class="wpcc_mail wpcc_mail_X">
<div class="wpcc_text"></div>
<input type="text" name="wpcc_user_name" value="" placeholder="" class="input" required><br>
<input type="email" name="wpcc_user_email" value="" placeholder="" class="input" required><br>
<input type="text" name="wpcc_user_phone" value="" placeholder="" class="input"><br>
<textarea name="wpcc_user_comment" placeholder="" value="" class="textarea"></textarea><br>
<input type="submit" name="wpcc_mail" class="wpcc_submit" value="">
<div class="wpcc_loading"><div></div></div>
</form>
</div>
</div>
Как установить плагин:
1. Скачать плагин — http://wordpress.org/plugins/wp-creator-calculator/ [3]
2. Закачать в папку плагинов вашего сайта wp-content/plugins/
3. Активировать плагин
4. Слева в меню административной панели выберите пункт WPCC
5. Создавайте и настраивайте свой калькулятор.
p.s. Ищу добровольного переводчика для плагина и инструкции на английский язык.
Автор: ZetRider
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/plugin/48459
Ссылки в тексте:
[1] Калькулятор для расчета стоимость создания сайта: http://zetrider.ru/wpcc-raschet-stoimosti-razrabotki-sajta.html
[2] Выбор марки авто без расчета стоимости: http://zetrider.ru/wpcc-vybor-marki-avto.html
[3] http://wordpress.org/plugins/wp-creator-calculator/: http://wordpress.org/plugins/wp-creator-calculator/
[4] Источник: http://habrahabr.ru/post/202246/
Нажмите здесь для печати.