Видео инструкция

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

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

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

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

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

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

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

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

Сообщение отправлено:
Сообщение получено
0%

[default value]

Сколько визиток вам надо?

Минимальное количество для заказа 5 штук

Please correct the errors and try again

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

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

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

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

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

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

Сообщение отправлено:
Сообщение получено
0%

SkobKipSKrjlfd[default value]SkobKi@TRDEEEQWGGpSKrjlfd

Сколько визиток вам надо?

При заказе 10 визиток из качественного материала доставка бесплатна.

Материал
Обязательно
Нужна ли доставка?
Обязательно
Please correct the errors and try again

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

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

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

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

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

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

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

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

Сообщение отправлено:
Сообщение получено
0%

[default value]

Если количество ручек больше 500, то стоимость каждого карандаша падает на 2 рубля

Количество ручек (10 р. за штуку)
Количество карандашей (5 р. за штуку)

Цена карандашей: 0 р.

Цена ручек: 0 р.

Please correct the errors and try again

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

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

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

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

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

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

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

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

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

Сообщение отправлено:
Сообщение получено
0%

[default value]

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

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

МЕСТА ПЕЧАТИ
Обязательно
Please correct the errors and try again
Сообщение отправлено:
Сообщение получено
0%

[default value]

Второй пример:

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

Имя
Обязательно
Телефон
Только цифрыОбязательно
Поле:Значение:
ИмяНе заполнено
ТелефонНе заполнено

Не все данные заполнены

Please correct the errors and try again

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

Сообщение отправлено:
Сообщение получено
0%

[default value]

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

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

Выберите
Обязательно
Автоматическое заполнение
Обязательно

Второй пример:

Большое текстовое поле будет заполняться значением из чекбокса.

Выберите
Обязательно
Автоматическое заполнение
Обязательно
Please correct the errors and try again

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

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

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

Сообщение отправлено:
Сообщение получено
0%

[default value]

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

Изначально только 2 первых поля участвуют в расчете, каждое поле прибавляет по одной единице. Но когда сумма станет больше 10, при помощи логики, к расчету будет подключено третье поле.

Количество 1
-
+
Количество 2
-
+
Количество 3
-
+

Сумма: 0 р.

Второй пример:

При достижении значения суммы в 20 р. будет 50% скидка.

Количество

Сумма: 0 р.

Please correct the errors and try again

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

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

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

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

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

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

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

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

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

3) Доступность полей

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

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