Вот задача самая простая, как казалось бы на первый взгляд, но у многих вызывает ступор, народ начинает искать кучу плагинов, модулей и прочих «готовых» решений, усложняя тем самым себе работу, и усложняя работу мне, когда заказчик простит «просто поправить цифру» — а в итоге приходится все переделывать с нуля.
На написание этого калькулятора ушло 20-30 минут времени, на написание статьи уйдет времени больше =))
Начнем с разметки:
<div id="calculator"> <div class="row"> <div class="col-md-6 left"> <div class="form-group row"> <div class="col-sm-7 col-6"> <label for="exampleInputEmail1">Площадь потолка:</label> </div> <div class="col-sm-5 col-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Площадь" id="total_area"> <div class="input-group-append"> <span class="input-group-text">м2</span> </div> </div> </div> </div> <div class="form-group row"> <div class="col-sm-7 col-6"> <label for="exampleInputEmail1">Фактура:</label> </div> <div class="col-sm-5 col-6"> <select class="form-control" id="factura"> <option value="300">Любая</option> <option value="350">Глянцевые</option> <option value="400">Матовые</option> <option value="450">Сатиновые</option> <option value="500">Цветные</option> </select> </div> </div> <div class="form-group row"> <div class="col-sm-7 col-6"> <label for="exampleInputEmail1">Общее количество углов:</label> </div> <div class="col-sm-5 col-6"> <div class="input-group"> <input type="text" class="form-control" id="ugol" placeholder="Введите кол-во" data-price="100"> <div class="input-group-append"> <span class="input-group-text">шт.</span> </div> </div> </div> </div> <div class="form-group row"> <div class="col-sm-7 col-6"> <label for="exampleInputEmail1">Установка люстры:</label> </div> <div class="col-sm-5 col-6"> <div class="input-group"> <input type="text" class="form-control" id="lustra" placeholder="Введите кол-во" data-price="200"> <div class="input-group-append"> <span class="input-group-text">шт.</span> </div> </div> </div> </div> <div class="form-group row"> <div class="col-sm-7 col-6"> <label for="exampleInputEmail1">Точечные светильники:</label> </div> <div class="col-sm-5 col-6"> <div class="input-group"> <input type="text" class="form-control" id="tochka" placeholder="Введите кол-во" data-price="300"> <div class="input-group-append"> <span class="input-group-text">шт.</span> </div> </div> </div> </div> <div class="form-group row"> <div class="col-sm-7 col-6"> <label for="exampleInputEmail1">Обход трубы, уходящей в потолок:</label> </div> <div class="col-sm-5 col-6"> <div class="input-group"> <input type="text" class="form-control" id="tryba" placeholder="Введите кол-во" data-price="400"> <div class="input-group-append"> <span class="input-group-text">шт.</span> </div> </div> </div> </div> </div> <div class="col-md-6 right"> <div class="h4">Примерная стоимость:</div> <div class="total-price"> <span id="totalprice">0</span> руб. </div> <div class="mb-4" style="font-size: 17px;">(*точная стоимость потолка устанавливается замерщиком)</div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <input type="text" name="your-name" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="Ваше имя"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="tel" name="tel-412" value="" size="40" class="form-control" aria-required="true" aria-invalid="false" placeholder="Ваш телефон"> </div> </div> <div class="col-sm-12"> <textarea name="your-message" class="form-control" rows="4" id="zakaz_total" aria-required="true" aria-invalid="false"></textarea> </div> </div> </div> </div> </div>
Теперь по порядку, в данном примере использованы <input type=»text» data-price=»»> — с дата-атрибутом data-price и <select> с опциями <option value=»»></option>.
В поле textarea помещаю все переменные, для отправки их в заказ. В данном случае я не вижу смысле отправлять кучу полей, когда можно отправить только одно textarea.
<span id=»totalprice»>0</span> — span для вывода результата расчета.
Зачем используется data-атрибут? Все просто, в формуле — введенное значение в input будет множится на data-атрибут.
Далее скрипты:
jQuery( function ( $ ) {
$('#calculator .form-control').on('input', function(){
var total_area = new Number($('#total_area').val());
var factura = new Number($('#factura option:selected').val());
var factura_name = new Number($('#factura option:selected').val());
var ugol = new Number($('#ugol').val());
var lustra = new Number($('#lustra').val());
var tochka = new Number($('#tochka').val());
var tryba = new Number($('#tryba').val());
var ugol_p = new Number($('#ugol').attr('data-price'));
var lustra_p = new Number($('#lustra').attr('data-price'));
var tochka_p = new Number($('#tochka').attr('data-price'));
var tryba_p = new Number($('#tryba').attr('data-price'));
var total = (factura * total_area) + (ugol * ugol_p) + (lustra * lustra_p) + (tochka * tochka_p) + (tryba * tryba_p);
var str = total;
$('#totalprice').text(parseInt(str).toLocaleString('ru-RU'));
$('#zakaz_total').val(
'Площадь потолка: ' + total_area + '\n' +
'Фактура: ' + factura + '\n' +
'Общее количество углов: ' + ugol + '\n' +
'Установка люстры: ' + lustra + '\n' +
'Точечные светильники: ' + tochka + '\n' +
'Обход трубы, уходящей в потолок: ' + tryba + '\n' +
'Рассчет: ' + total + '\n'
);
});
});Так как калькулятор именно простой, то и код такой же.
$(‘#calculator .form-control’).on(‘input‘, function(){ — запускает функцию работы калькулятора действие натравливается на «input» — то есть когда происходит изменение в любом input-е — калькулятор высчитывает новую цену. Можно натравить на другие действия: click change и т.д.
Далее нужно задать переменные:
var «Имя переменной» = new Number($(‘ID input-а’).val()); — здесь будет использоваться значение, введенное в поле.
var «Имя переменной»= new Number($(‘ID input-а’).attr(‘data-price’)); — здесь будет использоваться значение из data-атрибута.
Для select-ов: var «Имя переменной» = new Number($(‘ID-селекта option:selected‘).val()); — option:selected — при выборе опции селекта из списка — берем его значение value.
После необходимо перемножить ранее введенные значения:
var «Имя переменной для результата» = (Имя переменной * Имя переменной) + (Имя переменной * Имя переменной);
показываем результат в блоке:
$(‘ID блока где показывать‘).text(‘Имя переменной для результата‘);
Наш калькулятор заработал, но я хочу что бы цифры результата показывались с форматирование, для этого «Имя переменной для результата» обернем в parseInt(Имя).toLocaleString(‘ru-RU’), получиться должно вот так:
$(»ID блока где показывать»).text(parseInt(‘Имя переменной для результата‘).toLocaleString(‘ru-RU’)); — теперь наши цифры отображаются красиво.
Теперь мне нужно поместить введенные результаты в одно поле textarea:
$(‘ID textarea-и‘).val(
‘Площадь потолка: ‘ + total_area + ‘\n’ +
‘Фактура: ‘ + factura + ‘\n’ +
‘Общее количество углов: ‘ + ugol + ‘\n’ +
‘Установка люстры: ‘ + lustra + ‘\n’ +
‘Точечные светильники: ‘ + tochka + ‘\n’ +
‘Обход трубы, уходящей в потолок: ‘ + tryba + ‘\n’ +
‘Расчет: ‘ + total + ‘\n’
);
готовый пример можно посмотреть на codepen.
See the Pen Contact Form — Pen a Day 20
Теперь о том, как не мучиться со скриптом отправки сообщений, а быстро связать этот код с Contact Form 7 — плагин для WordPress.
В вышеуказанном плагине создаем одно поле [textarea* your-message id:zakaz_total] с кнопкой отправки и выводим шорткод вместо нашего textarea — как выше и писал — в него будет помещена вся информация о нашем заказе и отправлена с помощью плагина.