[Урок 44] Делаем простой калькулятор (часть 1)

Всем привет! Давно не виделись. Было много работы. Сегодня возьмёмся за очень интересное дополнение к сайту - калькулятор.

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

Конкретно сегодня мы рассчитаем стоимость кухни, в зависимости от её длинны. Пробуйте и всё получится. Успехов!)

Добавляем нужный блок.

Для начала нам нужно выбрать и добавить блок, с которым мы будем работать. Можно использовать блоки: BF204N, BF310N, BF311N, BF402N, BF403N и BF502N.

Я добавлю блок BF204N - вертикальная со множеством полей.

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

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

Открываем настройки контента блока формы.

Здесь открываем вкладку "Поля для ввода".

И нажимаем "Добавить поле для ввода".

Выбираем тип формы.

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

Для начала я добавлю стандартные поля: Имя и телефон.

Далее я выберу тип: "Количество - Ползунок". Будем работать с ним.

По желанию вводим заголовок и под

Вводим имя переменной. Это то, что мы будем рассчитывать. Я напишу width

Системное название для идентификации данных из разных полей

Далее нужно ввести минимальное и максимальное значение, а так же размер шага.

Это данные для расчёта, некий диапазон для выбора. Я поставлю от 1 до 20 (человек может сделать расчёт с минимум 1 метром, максимум 20)

Шаг это интервал, я сделаю 1. Пользователь сможет увеличивать длину на 1 метр (1,2,3 и так далее).

Сохраняем и закрываем.

Добавляем ещё один тип.

Теперь нам нужно добавить ещё одно поле для ввода. Выбираем тип "Калькулятор".

Он будет производить расчёт.

Аналогично заполняем заголовок и подзаголовок.

Имя переменной: цена (price).

Указываем формулу расчёта.

Чтобы калькулятор делал правильный расчёт, нужно ввести формулу. Допустим, что 1 метр будет стоить 1000 рублей.

Формула: width*1000 (длинну умножаем на стоимость 1 метра)

И вводим текст по итогу вычисления.

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

Сохраняем и закрываем, смотрим!