Простой калькулятор заказа

Вот задача самая простая, как казалось бы на первый взгляд, но у многих вызывает ступор, народ начинает искать кучу плагинов, модулей и прочих “готовых” решений, усложняя тем самым себе работу, и усложняя работу мне, когда заказчик простит “просто поправить цифру” – а в итоге приходится все переделывать с нуля.
На написание этого калькулятора ушло 20-30 минут времени, на написание статьи уйдет времени больше =))

Начнем с разметки:

Теперь по порядку, в данном примере использованы <input type=”text” data-price=””> – с дата-атрибутом data-price и <select> с опциями <option value=””></option>.

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

<span id=”totalprice”>0</span> – span для вывода результата расчета.

Зачем используется data-атрибут? Все просто, в формуле – введенное значение в input будет множится на data-атрибут.

Далее скрипты:

Так как калькулятор именно простой, то и код такой же.

$(‘#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 0

Теперь о том, как не мучиться со скриптом отправки сообщений, а быстро связать этот код с Contact Form 7 – плагин для WordPress.

В вышеуказанном плагине создаем одно поле [textarea* your-message id:zakaz_total] с кнопкой отправки и выводим шорткод вместо нашего textarea – как выше и писал – в него будет помещена вся информация о нашем заказе и отправлена с помощью плагина.

Оставить коммментарий

Ваш e-mail не будет опубликован *