Создание логики через плагин Quasar Form Pro

Как использовать логику?

Quasar form Pro имеет мощную встроенную условную логику. Вы можете использовать это для следующих задач:

1. Показ / скрытие полей
2. Изменение текста / изменения html в поле ‘custom text’
3. Установить / изменить значение поля
4. Пересчитать итог калькулятора
5. Добавить класс / удалить класс
6. Исключить поле из письма на почту/добавить поле в письмо на почту
7. Cделать поле обязательным/необязательным для заполнения
8. Добавить переменную / изменить значение переменной

Принцип работы логики

Логика работает по простой схеме, которая состоит из двух элементов — условия и действия.

1) Условие. Состоит из 2 или 3 частей в зависимости от типа условия.

1. Селектор условия — id поля, значение которого проверяется
2. Тип условия — равно, не равно, больше, меньше, заполнено, не заполнено, имеет класс, не имеет класса.
3. Значение условия (присутствует не во всех типах условий)

Пример (двигайте ползунок):

В приведенной выше форме установлена следующая логика (скриншот):

Если значение ползунка станет больше 4, то будет показана скрытая кнопка «Отправить» (кнопка была скрыта, через настройки самого поля). Попробуйте — подвигать ползунок и сами все увидите.

2) Действие, вторая часть любой логики, может состоять из 3 и более значений в зависимости от типа действия. В форме приведенной выше — действие это показ кнопки.

Более сложная логика

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

Например (выберите тип материала  — Качественный и двигайте ползунок):

В приведенной выше форме установлено 2 логики (скриншот):

Первая логика имеет 2 условия и 2 действия, если значение ползунка больше 10 и в выпадающем списке «Материал» выбрано «Качественный» сработают действия первой логики — скрыть поле с выбором доставки и изменить текст в поле на «Вы получаете бесплатную доставку».

Для чего нужна вторая логика?

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

Но некоторые действия, такие как «изменить html», не имеют противоположного эффекта, текст меняется раз и на всегда, даже если условие больше не выполняется текст не вернется к исходному. Поэтому, чтобы вернуть исходный текст надо создать еще одну логику, которая и будет возвращать нужный текст, поэтому в форме выше 2 логики.

Действия, которые не имеют противоположного эффекта:
1) изменить html
2) установить значение поля

Еще более сложная логика с переменными

Для реализации сложных задач, можно использовать переменные значения. Типичный случай — надо сделать калькулятор, в котором скидка будет зависеть от значения одного из полей.

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

Сначала мы устанавливаем переменную — а со значением 0. Далее мы присваиваем переменной значение поля — количество карандашей, потом умножаем на три (изначально в калькуляторе умножается на 5, но нам нужна скидка в 2 рубля поэтому умножаем на 3). Далее используем действие для пересчета итога калькулятора, куда просто вставляем нашу переменную.

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

Также знайте — при помощи действия «изменить значение переменной» можно калькулировать значения разных переменных, например:

Разбор работы каждого действия

1) Показать поле — показывает поле, если оно было скрыто. Имеет противоположный эффект. Если условие больше не выполняется, поле автоматически скрывается снова.

2) Скрыть поле — скрывает поле. Имеет противоположный эффект. Если условие больше не выполняется, поле автоматически отображается снова.

3) Изменить html в пользовательском тексте — изменяет текст или html в поле «Пользовательский текст / html». Работает только с этим типом полей. Не имеет обратного эффекта. Если условие больше не выполняется, исходное содержимое поля не восстанавливается.

Главная особенность этого поля — возможность использовать любые html теги.

Сообщение отправлено:

Сообщение получено

0%

[default value]

Первый пример:

Меняем изображения при выборе значений в чекбоксе.

МЕСТА ПЕЧАТИ

Обязательно

Грудь

Спина

Пр. рукав

Лев. рукав

Please correct the errors and try again

4) Установить значение поля — устанавливает значение для поля. Не имеет обратного эффекта. Если условие больше не выполняется, исходное значение поля не восстанавливается.

5) Пересчитать итог калькулятора — пересчитывает значение поля «калькуляция». Работает только с этим типом поля. Эта логика может быть использована для реализации скидок, добавления в расчет новых полей или наоборот. Шорткод [itog] — это текущий итог калькулятора. Вы также можете использовать шорт коды с ID полей, как в формуле калькулятора.

Именно это действие позволяет вам создавать калькуляторы любой сложности — вы можете изменять формулу расчета на «лету».

Если условие больше не выполняется, то влияние этого поля для расчета исчезает. Пример реализации 20% скидки: [itog] — (( [itog] * 20) / 100 )

6) Добавить класс — добавляет класс указанному элементу. Главная особенность этого действия — оно не ограничено пределами формы, класс можно добавить любому элементу на странице. Если условие больше не выполняется, класс не пропадает.

Действие состоит из двух полей. В первом вы указываете селектор — класс или ID элемента, которому нужно добавить класс. Во втором поле указывается сам класс.

7) Удалить класс — тоже самое, что и добавить, но только удаляет класс, принцип работы тот же.

8) Cделать поле обязательным — сделать поле обязательным для заполнения. Обязательные поля нельзя пропустить. Данная функция  помогает создавать квизы с несколькими ветками вопросов.

9) Сделать поле необязательным — сделать из обязательного поля необязательное.

10) Отключить отправку значения поля на почту — позволяет исключить поле и его значение из письма, которое вы получаете по электронной почте. Этот вариант подходит для квизов с несколькими ветками вопросов, чтобы не засорять письмо ненужной информацией.

11) Включить отправку значения поля на почту — аннулирует действие описанное выше.

12) Изменить значение переменной — позволяет установить значение переменной из других переменных. Значение может быть результатом вычисления нескольких переменных. Пример:

13) Присвоить переменной значение поля — установить значение переменной равным значению поля.

Дополнительная информация

1) Работа с большим количеством полей

Количество селекторов(полей) в условиях и действиях не ограничено. Для работы с большим количеством полей не потребуется создавать много логик.

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

2) Количество логик

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

3) Фильтрация полей

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

Здесь все просто, при выборе действия происходит автоматическая фильтрация полей, остаются только поля, подходящие под это действие.