SEBLOD - Конструктор контента(CCK) для Joomla. Часть 12. Conditional States и Computation Rules. Создаем калькулятор ОСАГО.

Seblod позволяет очень гибко работать с формами. Наверное, не будет преувеличением сказать, что значительная часть этой гибкости приходится на такие разделы, как Conditional States и Computation Rules. В этой статье я расскажу о том, что это такое, как пользоваться данным функционалом, а также покажу по шагам как с его помощью создать калькулятор расчета стоимости ОСАГО (пакет с калькулятором доступен для скачивания в конце статьи).

Для начала, определимся с терминологией. Термины «Conditional States» и «Computation Rules» в рамках данного материала можно перевести, как «Условные состояния» и «Правила вычислений. Обе функции можно найти в конструкторе форм под номером 5:

Ниже подробно о том, для чего они предназначены.

Conditional States (Условные состояния).

Conditional States позволяют производить действия с полями, когда выполняется какое-то определенное условие. Подробно это можно описать формулой:

СДЕЛАЙ [название поля] [действие], КОГДА [название поля] [условие]

Примеры:

• Запиши в поле Article Alias значение поля Article Title, когда поле Article Title не пустое
• Отключи кнопку Submit, когда поля Article Title и Article Fulltext не заполнены

Это достаточно мощный инструмент, который позволяет добавлять формам значительную гибкость.

Для того, чтобы задать для поля Conditional States, нужно перейти в настройки формы под номером 5 и нажать кнопку Add в соответствующем столбце для поля, над которым будет произведено действие(того, которое в формуле выше будет в части «сделай»). Если рассматривать наши примеры, то в первом случае нужно нажать Add у поля Article Alias, а во втором у поля Submit.

После нажатия кнопки появится следующее всплывающее окно:

В этом окне есть две области: States(Действие) и Triggers(Условие).

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

В выпадающем списке States можно выбрать одно из доступных действий:

• is Visible – Показать. В поле справа можно установить эффект появления поля: "fade", "slide", либо оставить пустым.
• is Hidden – Скрыть. В поле справа можно установить эффект появления поля: "fade", "slide", либо оставить пустым.
• is Filled – Заполнить значением. Значение берется из поля справа.
• is Filled by – Заполнить значением другого поля формы. ID поля, значение которого будет подставлено берется из поля справа.
• is Empty – Отчистить.
• is Enabled – Активировать.
• is Disabled – Отключить.
• has Class – добавить класс(значение html атрибута class)
• hasn’t Class – удалить класс(значение html атрибута class)
• triggers – события, которые могут происходить. Например, "change", "click", "focus". Не путайте с триггерами из правой части окна.

Поле справа от выпадающего списка позволяет задавать значения для некоторых действий. Второе поле справа от выпадающего списка, позволяет устанавливать JQUERY селектор. Список доступных селекторов можно найти здесь. Не изменяйте это поле, если не понимаете, что делаете. Далее идет чекбокс. Его смысл в том, чтобы автоматически выполнять обратные действия для некоторых условий. Например, в нашем действии:

• Отключи кнопку Submit, когда поля Article Title и Article Fulltext не заполнены

ничего не сказано о том, что делать, если после отключения поля заполнят. По идее, мы должны создать еще одно действие, обратное к существующему:

• Включи кнопку Submit, когда поля Article Title и Article Fulltext заполнены

Чтобы этого не делать каждый раз, используется данный чекбокс. Галочка, установленная в нем, означает, что для действия автоматически будет создаваться и обратное.

Список условий Triggers работает следующим образом.

В первом широком блоке можно выбрать значение поля, применение условия к которому мы проверяем. Во втором блоке можно выбрать, собственно, условие. Условия доступны следующие:

• Is Equal – если значение поля равно заданному значению(справа). Здесь и далее можно выбрать из выпадающего списка доступных значений, нажав значок «<<», а также задать несколько значений через запятую.
• Is Different – если значение поля неравно заданному значению.
• Is Filled – если поле заполнено(неважно чем).
• Is Empty – если поле не заполнено.
• Is Changed – если в поле изменена информация(изменен текст, выбрана другая опция из списка, и т.д).
• Is Pressed – если поле выделено/нажата кнопка.
• Call Function – если вызвана JS-функция, которая указана справа.

Еще имеется маленький блок выбора and/or. Он позволяет добавить логическое И/ИЛИ, если для одного действия должно выполняться несколько условий или любое из приведенных.

Для одного поля можно добавлять несколько действий (используя иконку зеленого плюсика), каждое из которых, в свою очередь, может иметь несколько условий. В настоящий момент 5.

Вот и все настройки условных состояний.

Computation Rules(Правила вычислений).

Computation Rules позволяют производить над полями некоторые математические действия.

Для того, чтобы задать полю Computation Rules, нужно перейти в настройки формы под номером 5 и нажать кнопку Add в соответствующем столбце для поля, в которое будет записан результат вычисления.

После нажатия кнопки появится следующее всплывающее окно:

Здесь все проще, чем с условными состояниями. Поля следующие:

• Computation – позволяет указать математическую операцию, которая будет выполняться.
• Fields – позволяет добавить поля, значения которых будут участвовать в вычислениях.
• Чекбокс «Custom Attribute» позволяет использовать не стандартное значение атрибута Value, а значение того атрибута html-поля, которое будет указано (работает для атрибутов типа "data-*").
• Format/Precision – позволяет округлить результат.
• Rule – позволяет указать какие правила(округления?) будут использованы: указанные здесь или из общих настроек.
• Trigger Event – условие, при котором будет произведен расчет. Пока доступно только два условия: изменение значения одного из участвующих в расчете полей и оно же, только с помощью клавиатуры(на «отжатие» клавиши).

Таким образом, производится вычисление значений полей. Стоить отметить, что для одного поля доступно только одно правило вычисления, т.е. мы не можем изменять формулу при каком-то условии, но, как вы увидите ниже, пользуясь простой математикой и смекалкой, это ограничение в некоторой степени можно обойти.

Conditional States и Computation Rules. Создаем калькулятор ОСАГО.

Я долго думал, какой пример хорошо может продемонстрировать возможности условных состояний и правил вычисления. В результате, замахнулся, ни много ни мало, на калькулятор ОСАГО.

Для людей, не знакомых с программированием любые калькуляторы всегда являются проблемой. Сложность в том, что для калькулятора нет готового универсального решения. Каждый калькулятор уникален, а потому это стихия программирования. И вот, что вы думаете? Seblod позволяет сделать калькулятор, не написав ни строчки кода! Ниже привожу подробное описание создания калькулятора, а в конце статьи можно скачать пакет калькулятора ОСАГО для Seblod.

Создаем калькулятор ОСАГО. Теория.

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

Стоимость ОСАГО = Тб × Кт × Ко × Квс × Км × Кбм,

где:

• Тб – базовый страховой тариф,
• Кт – коэффициент, зависящий от места жительства собственника транспортного средства(разный для разных регионов и городов страны),
• Ко – коэффициент, зависящий от наличия сведений о количестве лиц, допущенных к управлению ТС,
• Квс – коэффициент, зависящий от возраста и опыта водителя,
• Км – коэффициент, зависящий от мощности двигателя авто,
• Кбм – бонус-малус(скидка за безаварийную езду). Определяется по таблице.

Вот и всё. Теперь о том, где взять эти коэффициенты.

Коэффициент Тб берется из таблицы:

Коэффициент Кт берется из таблицы(таблица очень большая, ниже приведена только ее часть для примера):

Коэффициент Ко:

Здесь существует два варианта: первый – список водителей строго определён, и второе – количество водителей неограниченно. За это отвечает коэффициент с длинным названием – "коэффициент, зависящий от наличия сведений о количестве лиц, допущенных к управлению ТС". В первом случае, когда количество водителей ограничено, берется коэффициент 1,0, а когда ограничения по количеству водителей нет – применяется коэффициент 1,8.

Коэффициент Квс:

• Возраст водителя до 22 лет включительно, стаж до 3 лет включительно, тогда берется коэффициент 1,8
• Возраст до 22 лет включительно, стаж свыше 3 лет – коэффициент 1,6
• Возраст старше 22 лет стаж до 3 лет включительно – коэффициент 1,7
• Возраст старше 22 лет стаж свыше 3 лет – коэффициент 1,0

Коэффициент Км:

• До 50 л.с. включительно - 0,6
• от 51 до 70 включительно - 1,0
• от 71 до 100 включительно - 1,1
• от 101 до 120 включительно - 1,2
• от 121 до 150 включительно - 1,4
• от 151 - 1,6

Коэффициент Кбм берется из таблицы:

Создаем калькулятор ОСАГО. Создание типа контента и полей.

После того, как мы разобрались с теорией, можно перейти к практике.

Шаг 1. Создаем пакет OSAGO.

1. Переходим в менеджер пакетов Seblod и добавляем новый:

2. Заполняем необходимые опции в соответствии с рисунком ниже:

Пакет создан.

Шаг 2. Создаем тип контента OSAGO.

1. Переходим в типы контента и добавляем новый:

2. Выбираем скелет OSAGO:

3. Заполняем необходимые опции в соответствии с рисунком ниже:

Здесь следует сделать оговорку. Наш калькулятор будет полностью работать в браузере клиента, не взаимодействуя с сервером. Т.е. данные расчетов не сохраняются на сайте. Если данные необходимо сохранять, то в поле Object нужно выбрать место хранения этих данных.

Шаг 3. Создаем поля для типа контента OSAGO.

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

Хранилище для всех полей устанавливается в None. Если же данные расчетов будут сохранятся на сервере, то нужно указать хранилище для каждого поля, кроме последнего.

Почему полей «Место жительства собственника ТС» два? Дело в том, что коэффициент Кт зависит не только от места жительства собственника авто, но и от типа транспортного средства. Посмотрите табличку этого коэффициента. Как учесть это в формуле? Очевидно, что пользователю нужно предоставлять один из двух наборов коэффициентов для выбора, в зависимости от типа транспортного средства. Мы не можем исключить их правил расчета какое-то поле, но можем воспользоваться простой математикой. Стоимость полиса – это произведение всех коэффициентов. Сделаем так, чтобы коэффициентов места жительства было два:

Стоимость ОСАГО = Тб × Кт1 × Кт2 × Ко × Квс × Км × Кбм,

а дальше, в зависимости от выбранного типа транспортного средства, будет делать один из коэффициентов(поле, которое не участвует в расчете) равным единице. Как известно, при умножении на единицу произведение не меняется. Вот такая хитрость.

Ниже показан рисунок с настройками поля типа SELECT:

Здесь есть всего одна особенность. Когда мы задаем опции для выбора, то делается это в формате:

ЗАГОЛОВОК=ЗНАЧЕНИЕ

Именно здесь мы связываем отдельные опции с коэффициентами, которые будут использованы в расчете. Именно здесь мы задаем значения этих коэффициентов.

Важный момент.

Обработка полей триггерами в Conditional States, когда происходит сравнение со значением поля, работает не по заголовкам, а по значениям из формата:

ЗАГОЛОВОК=ЗНАЧЕНИЕ

Пример:

Коэффициент Тб, рассчитываемый по таблице может принимать одинаковое значение 1215 для двух разных типов транспортных средств:  «Мотоциклы, мотороллеры (категории А)» и «Тракторы, самоходные дорожно-строительные и иные машины». Соответственно, если мы захотим использовать триггер сравнения, чтобы, в зависимости от типа транспортного средства показать или скрыть поля коэффициентов Кт1 или Кт2, вот так:

то столкнемся с проблемой: при выборе какого из двух полей: «Мотоциклы, мотороллеры (категории А)» или «Тракторы, самоходные дорожно-строительные и иные машины» мы должны выполнять действие? Ведь их значения одинаковы! Триггер в этом случае будет срабатывать на любое поле, что недопустимо.

Для того чтобы избежать этой проблемы, я использовал еще один маленький трюк. В опциях для поля типов транспортных средств написал:

Мотоциклы, мотороллеры (категории А)=1215

Тракторы, самоходные дорожно-строительные и иные машины=1215.0

Числа одинаковые, но триггер сравнения воспримет их по-разному и проблема не возникнет.

Все поля заполняются одинаково. Отдельно стоит остановиться только на поле «Рассчитать». Это поле – кнопка. Причем такая кнопка, которая ничего не делает, не отправляет данные формы на сервер. К сожалению, кнопки, которая ничего не делает, в Seblod нет. Да и зачем? =) Именно поэтому было использовано поле типа Free Text, которое позволяет вывести в форму произвольный html-элемент. В этом поле нужно открыть редактор кода и заполнить его следующим образом:

Код такой:

<p><input id="osago_submit" class="btn btn-primary" name="osago_submit" type="reset" value="Рассчитать" /></p>

Зачем нам кнопка, которая ничего не делает? При ее нажатии будет срабатывать триггер отображения поля стоимости ОСАГО и триггеры сброса всех полей.

После того, как все поля созданы  и настроены, останется лишь настроить Conditional States и Computation Rules

Шаг 4. Настройка Conditional States и Computation Rules.

С Computation Rules все просто. Это правило задается только для поля «Стоимость ОСАГО». Его настройки выглядят следующим образом:

Conditional States нужно задать для следующих полей:

Место жительства собственника ТС:

Место жительства собственника ТС2:

Возраст водителя:

Стоимость ОСАГО:

Всё. Калькулятор готов! Остается только вывести его на сайт. Для этого создаем пункт меню типа SEBLOD-Form и выбираем в его настройках нужный тип контента. После этого на сайте появится пункт меню «Калькулятор ОСАГО», при открытии которого мы увидим наш калькулятор:

Калькулятор показывает только нужные для заполнения поля. Например, если количество водителей не ограничено, то показывать поле «Возраст водителя» не имеет смысла. Это удобно для пользователей.

Вот так, достаточно легко и быстро мы создали довольно сложный калькулятор ОСАГО, который, в отличие от большинства сайтов, работает без перезагрузки страницы. Аналогичным образом мы можем создать и калькулятор каско после гарантии. Да, внешний вид оставляет желать лучшего, но это уже вопрос простого оформления через CSS. Ниже вы можете скачать пакет с калькулятором, установить его на ваш сайт с Seblod 3.2 и посмотреть, как он работает или использовать в своих целях. Единственная вещь, которую нужно доделать – ввести в полях для Кт1 и Кт2 все города и коэффициенты для них. Я добавил только около десятка для примера.

Скачать калькулятор ОСАГО для SEBLOD от wedal.ru.

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты