Тестируем новые формы-калькуляторы

by Елена Сторожева

Сегодня мы с вами соберём калькуляторы — простой и со скрытыми полями — с помощью новых возможностей редактора!

Индивидуальный букет

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

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

Давайте посмотрим, как собрать такую форму-калькулятор в редакторе.

1) Используем виджет "Новая форма" и переместим в него нужные поля. Установим "Галочки с картинками". Они позволяют наглядно показать цветы, которые станут основой расчета. Кликаем "Гаечный ключ". На вкладке "Поля" в настройках виджета задаём название "Цветы" и загружаем нужные фотографии. Не забываем прописать напротив каждой позиции стоимость за штуку:

пионы по 15 рублей

розы по 20 рублей

лилии по 30 рублей

2) На следующей вкладке "Переменные" нам нужно задать рабочий функционал данного виджета, а потому пропишем имя переменной "flowers" (на латинице со строчной буквы, можно также использовать цифры) и ниже введём соответствующие значения, которые будут использоваться при вычислениях:

3) Разместим виджет "Варианты с галочкой" с возможностью добавить декор: листья, зелень или ветки. Настраиваем аналогично: на вкладке "Поле" вводим название, которое отображается в форме, т.е. "Декор", и прописываем позиции, указывая стоимость каждой:

4) На вкладке "Переменные" нужно задать такие же значения, чтобы калькулятор верно рассчитал стоимость. Готово.

5) Теперь самое интересное. Настроим поля, которые будут показываться в зависимости от выбора цветов выше. Например, мы покупаем пионы, а потому у нас должно появиться поле "Количество пионов", а поля "Количество роз" и "Количество лилий" должны быть скрыты. И наоборот.

Делается это просто. Разместим все три необходимых поля и зададим для них разные названия на вкладке "Поле":

На вкладке "Переменная" пропишем для каждого поля своё значение. У нас это:

quantity1 для пионов:

quantity2 для роз:

quantity3 для лилий:

6) Переходим на вкладку "Условия". Нам нужно задать связь между конкретным цветком с ценой и его количеством. Поэтому мы прописываем:

Следовательно, сколько пропишем для лилий? Верно,

7) Ниже мы добавили поле с "Выпадающим списком" для выбора упаковки. А значит, задаем название и список вариантов на вкладке "Поле":

Пропишем также имя переменной "wrap" и её значения для каждого варианта на следующей вкладке:

8) Итак, финальный этап. Установим поле "Калькулятор" и зададим ему название "Стоимость". Чтобы в форме и в заявке стоимость показывалась с валютой, можно указать "%result% руб."

Теперь очень важно правильно прописать формулу, по которой будет работать калькулятор. В нашем случае, нужно учесть стоимость цветов, исходя из их количества, а также декор и упаковку. Поскольку условные поля "quantity" во время выбора для остальных цветов будут равны 0, мы получаем простое вычисление:

decor+(quantity1 * 15)+(quantity2 * 20)+(quantity3 * 30)+wrap

Готово! Публикуем, заполняем нашу форму и получаем в заявке с данными клиента вот это:

  • Цветы: пионы по 15 рублей
  • Декор: ветки 30 рублей
  • Количество пионов : 5
  • Упаковка: коробка 20 рублей
  • Стоимость: 125 руб.

Продаём джинсы

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

1) Используем виджет "Выпадающий список" и на вкладке "Поле" прописываем все доступные размеры:

2) В "Переменной" задаем стартовую стоимость для каждого размера:

3) Доступные цвета представлены виджетом "Список вариантов с картинками", в который мы прописали названия цветов, загрузили картинки и, что самое важное, прописали значение переменных:

синий цвет +60 рублей, бежевый +40 рублей и коралловый +80 рублей к первоначальной стоимости джинсов:

4) Виджет "Список вариантов" используем для выбора посадки. Для каждой — низкой, высокой и средней — прописываем стоимость:

5) В поле "Калькулятор" внесём простой расчёт, а именно сумму всех переменных:

size+color+waist

6) У нас получилась вот такая форма, публикуем страницу и заполняем:

Вот, что пришло нам в заявке вместе с данными клиента:

  • Размер: M
  • Цвет: Синий
  • Посадка: Высокая
  • Стоимость: 1460 руб.

P.S. Помните, что некоторые поля важно сделать обязательными в настройках, чтобы клиент не мог отправить форму, не указав данные в них;)

Пусть у вас всё получается!