СОЗДАНИЕ ИНТЕРНЕТ КОНТЕНТА
javasript, typescript, jquery, perl, php, css, html ...
logo

Пример разработки онлайн калькулятора стоимости материала. Пошаговый разбор.
Данный пример приведен для сайта на котором продают стеновые покрытия, категория бизнеса - "строительство"

Обычный онлайн калькулятор состоит из различных текстовых полей, полей выбора "один из", "несколько из", ветвлений по выбору, различных графических и описательных текстовых блоков. Приведем пример создания обычного калькулятора для онлайн расчета стоимости покрытия стены.
Шаг 1 Расчет площади. Добавляем поле для ввода высоты и ширины стены, отводим место для показа рассчитываемой площади. Для контроля вводим ограничение на высоту стены.
Шаг 2 Добавляем поле выбора матерала, тип поля "один из".
Шаг 3 Добавляем ветвление - выбор материала стены. В зависимости от сделанного выбора, показываем группу фактуры и цвета (тип поля "один из") и группу дополнительных аксессуаров (тип поля "несколько из").
Шаг 4 В зависимости от сделанного выбора в группе фактуры и цвета, показываем картинку соответствующего материала. Картинка подгружается в поле, отведенное в Шаге 1.
Шаг 5 Справа от основного поля расчета выделяем места для вывода состава расчета, в котором показываем что выбрано и выводим стоимость составленной калькуляции. При просмотре в мобильной версии этот блок показывается после блока выбора.
Ниже показываем рабочую версию калькулятора, которую можно поместить на любой сайт. Сайт разработан на Java Script

Расчет стоимости материала

Максимальная высота стены - 300 см
Площадь кв.м.
от 175 до 600
Ширина, cм:
от 100 до 300
Высота, cм:
ВЫБРАТЬ МАТЕРИАЛ
ФАКТУРА
ЦВЕТ ВИНИЛА
ЦВЕТ МЕТАЛЛА
КРЕПЁЖ ВАГОНКИ
Крепёж оцинкованный
| + 30 рублей
Крепёж c саморезом
| + 55 рублей
Крепёж по верху
| + 35 рублей
ВИНИЛОВЫЕ ДОБОРНЫЕ ЭЛЕМЕНТЫ
Угол внутренний + 55 рублей
Угол наружный + 45 рублей
СОСТАВ ЗАКАЗА
пока пустой
ОБЩАЯ СТОИМОСТЬ: 0 руб