Калькулятор

Калькулятор позволяет рассчитывать итоговую стоимость товара и/или услуги состоящую из нескольких шагов.

Например, при заказе пластиковых окон необходимо узнать: Ширину/высоту окна, материал, кол-во стеклопакетов и много другое.

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

Как собрать калькулятор?

Шаг 1. Необходимо установить виджет «Новая форма» и на ней расположить нужные нам поля для расчетов.

100092065
В качестве примера мы возьмем «Расчет стоимости окон». Для этого нам понадобятся виджеты:

«Поля для новых форм – Список вариантов с картинками»
«Поля для новых форм – Ползунок»
«Поля для новых форм – Выпадающий список»
«Поля для новых форм – Количество»
«Поля для новых форм – Список вариантов»
«Поля для новых форм – Список галочек»
«Поля для новых форм – Калькулятор»

Поля можно располагать в колонки, например, два поля «Ползунок» находятся на одном уровне:

100092066
Шаг 2. Все нужные поля установлены на форму и теперь можно приступить к настройкам полей.

«Список вариантов с картинками» (выберите тип конструкции)

Во вкладке «Поле» изменим «Название», «Название вариантов» и загружаем нужные картинки.

100092067
Во вкладке «Переменная» добавим «Имя переменной» design
и «Значения переменной», которые будут “ценой” для расчетов стоимости.
для «Одностворчатое окно» – 8000
для «Двухстворчатое окно» – 10000
для «Двухстворчатое окно с фрамугой» – 12000

100092068

«Ползунок» (ширина)

Во вкладке «Поле» изменим «Название», «Минимум» и «Максимум».

100092069
Во вкладке «Переменная» добавим «Имя переменной» width

100092070

«Ползунок» (высота)

Во вкладке «Поле» изменим «Название», «Минимум» и «Максимум».

100092071
Во вкладке «Переменная» добавим «Имя переменной» height

100092072

«Выпадающий список» (тип открывания)

Во вкладке «Поле» изменим «Название» и «Название вариантов».

100092073
Во вкладке «Переменная» добавим «Имя переменной» opening
и «Значения переменной», которые будут “ценой” для расчетов стоимости.
для «Глухое – 200 руб.» – 200
для «Поворотное – 400 руб.» – 400
для «Поворотно-откидное – 800 руб.» – 800

100092074

«Количество» (количество фурнитуры – 100 руб.)

Во вкладке «Поле» изменим «Название».

100092075
Во вкладке «Переменная» добавим «Имя переменной» furnitures

100092076

«Список вариантов» (стеклопакет)

Во вкладке «Поле» изменим «Название» и «Название вариантов».

100092077
Во вкладке «Переменная» добавим «Имя переменной» glass
и «Значения переменной», которые будут “ценой” для расчетов стоимости.
для Однокамерный – 2000 руб. – 2000
для Двухкамерный – 4000 руб. – 4000
для Энергосберегающий – 6000 руб. – 6000

100092078

«Список галочек» (дополнительно)

Во вкладке «Поле» изменим «Название» и «Название вариантов».

100092079
Во вкладке «Переменная» добавим «Имя переменной» additionally
и «Значения переменной», которые будут “ценой” для расчетов стоимости.
для Подоконник – 534 руб. – 534
для Москитная сетка – 1234 руб. – 1234
для Монтаж – 2234 руб. – 2234

100092080

«Калькулятор» (итого)

Во вкладке «Поле» изменим «Название», «Положение» и «Формат».

100092081
Во вкладке «Формула» перечислим наши переменные из других полей, которые хотим рассчитать.

Подсказка: Поле калькулятор позволяет писать формулы любой сложности на языке javascript:
Сложение: a + b
Вычитание: a – b
Умножение: a * b
Деление: a / b
Приоритеты: (a + b) * c
Округление: round(a)
Округление в меньшую сторону: floor(a)
Округление в большую сторону: ceil(a)
Возведение в степень: pow(a, 2)
Минимальное число: min(a, b, c)
Максимальное число: max(a, b, c)
Абсолютное значение числа: abs(a)
Случайное число от 0 до 1: random()
Для расчета мы используем простую формулу:

design + width + height + opening + (furnitures*100) + glass + additionally

где design – переменная поля «Выберите тип конструкции»
width – переменная поля «Ширина»
height – переменная поля «Высота»
opening – переменная поля «Тип открывания»
(furnitures*100) – переменная поля «Количество фурнитуры» умноженная на стоимость товара (100 руб.)
glass – переменная поля «Стеклопакет»
additionally – переменная поля «Дополнительно»

100092084
Шаг 3. Проверим наш калькулятор на опубликованной странице или в режиме предпросмотра.

100092082
Ура! Калькулятор собран и работает, как надо!

Живой пример: http://calculatorlp.plp7.ru/

Важно! Теперь, если вы заполните поле в редакторе, то на опубликованной оно будет содержать данную информацию. Например, если вы в редакторе в поле «Имя» введете «Дмитрий», то на опубликованной это поле будет заполнено. Для того, чтобы ввести другое имя, посетителю потребуется удалить прежнее. Помните, какой в редакторе вы форму оставите, такой она и будет в публикации.
В личном кабинете заявка будет выглядеть так:

100092083

Была ли эта статья полезна?

Похожие статьи