На одном из создаваемых сайтов было необходимо сделать небольшой калькулятор и предварительным подсчетом стоимости услуги. В принципе задачка достаточно простая, но можно запутаться при реализации, решил написать эту заметку.
Итак: задачка достаточно редкая, но все же случается. Компания, для которой разрабатывается сайт, занимается услугами УФ-печати на любых поверхностях. Например: нанесение фотоизображения на мебель. обои или ткань. Услуга расчитывается на основе квадратных метров. То есть учетная еденица в каталоге товара- квадратный метр, на который и назначается цена. Да, это интернет-магазин со всеми вытекающими, оформление заказа, оплата итд. То есть: что бы покупателю купить товар, нужно ввести в карточке товара требуемое количество квадратных метров и собственно приобрести товар-услугу
Для удобства покупателя нужно было сделать следующее: он вводит ширину и длинну своей площади, калькулятор автоматически считает площадь в квадратных метрах и вставляет в стандартное поле ввода количества, которое есть в любом типовом шаблоне Битрикс. затем, покупатель может нажать кнопку предварительного расчета и увидеть общую сумму заказа еще до того как положит его в корзину.
Для начала простенький калькулятор высчитывающий площадь в квадратных метрах из длинны и ширины которые ввел пользователь и вывод в input с количеством:
Создание форм в которые пользователь будет вводить данные:
Простенький javascript который будет считать эти данные
Результат он будет сразу заносить в стандартное поле количества битрикс. Для этого припишите к input в котором указывается количество id="QUANTITY"
С этой частью все! Проверьте- должно работать
Тут тоже все просто: по сути нам нужно перемножить полученное выше количество на цену товара (как помним она у нас за 1 кв.метр). Для этого, сразу после input-а с количеством создаем еще 4:
Инпут в value которого передаем цену товара вот так:
Инпут который будет кнопкой предварительного расчета:
Инпут который будет кнопкой сброса расчитанного результата:
Инпут который будет показывать результат нашего умножения:
Все это вместе должно получиться вот так:
И еще один javascript который будет считать наше умножение и выводить в input результата после нажатия на "Расчитать"
Если нужно обрезать количество знаков после запятой, в результате вычисления, можно воспользоваться методом toFixed. Просто в конце строки, отвечающей за вывод результата подсчета добаляем .toFixed(3) - где 3 количество необходимых знаков
В общем-то и все, все это должно работать, а выглядеть будет вот так:
Соласен, вообще не красиво, но работать все будет идеально, останется просто навести марафет с помощью стилей, элементарная верстка поможет окультурить внешний вид , расставить все инпуты по своим местам и при желании скрыть не нужные. Например так:
Весь использованный код можно скачать по этой ссылке, для более удобного понимания и чтения.
Еще в записках:
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей
Алексей
|
|
А возможно создать калькулятор следующим образом:
мы задаем длину и ширину, затем выбираем товар из каталога с разными наименованиями. К примеру задает размеры, затем дверь, к ней замки ручки и тд, при этом каждый раздел из каталога брать по одному. а в конце выводит всю сумму? Заранее спасибо))  |
Михаил Базаров
| ||
| ||
|
Алексей
| ||||
| ||||
|
Азиз
|
|
Здравствуйте! у меня вопрос если ли программы которые будут автоматический высчитывать результат?ну вот например задаем размер плитки 0,30х0,30 и получаем 0,09 кв.м за лист и вот когда клиент будет покупать 2 или более листов он будет зразу видеть сколько кв.м он берет) пример: (что то типо того что стоит возле их кнопки купить)
|
|
Andrey
|
|
A возможно применять такие калькуляторы для расчета стоимости товаров в битриксе?
|
|
Михаил Базаров
| ||
| ||
|
Антон Шаповал
|
|
Привет.
У меня такая задачка: Есть сайт, который продает путевки. Цена за путевку должна строиться следующим образом: (кол-во взрослых мест * взрослая цена + кол-во детских мест 1 * детская цена 1 + кол-во детских мест 2 *детская цена 2 + ... +кол-во детских мест n * детская цена n) * кол-во дней. взрослые/детские цены хранятся в свойствах инфоблока. Допустим я сделаю на JS калькулятор, но могу ли я подменить цену Битрикса, рассчитанным значением? И если да, то как? |
|
Михаил Базаров
| ||
| ||
|
Антон Шаповал
| ||||
Это безумство! — сказала техподдержка. Не, ну... — сказал программист и достал свой бубен. В принципе я его победил. Костыльно, но работает. З.Ы. Что-то письма с вашего сайта не ходят, что новые сообщения в теме. | ||||
|
Дмитрий
|
|
Добрый день!
Возможно ли на основе этого кода сделать калькулятор в котором: 1. Имеется размер полотна, жестко указанный в характеристиках (2х3, 3х3, 4х8 и т.д.) 2. В зависимости от выбора размера изменяются отображаемые характеристики товара (вес, объем, стоимость за единицу). 3. Имеется возможность выбора количества единиц номенклатуры. В конечном итоге получаем стоимость продукта. |
|
Михаил Базаров
| ||
| ||
|
Дмитрий
| ||||
| ||||
и 6 гостей
Из стран:
3 чел.
1 чел.
1 чел.
1 чел.
Панель управления хостином VESTA и 1С Битрикс, базовая оптимизацияПосоветовали мне тут попробовать бесплатную панель управления...
SEO новинки в 14-ой версии БитриксДошли руки до изучения новинок появившихся в 14-ой версии битрикса....
Дополнительные параметры в меню БитриксИногда нужно присвоить какой-то функционал к конкретному пункту...
Сортировать товары по названию, цене и дате поступления в каталоге БитриксДостаточно часто заказчик просит вывести сортировку по цене,...
Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.Расскажу как вывести материалы по теме в новостях Битрикс, с...
Валидация пароля и подтверждения при регистрации в битриксВстала задачка сделать валидацию пароля и его подтверждения ...
Создание сайтов на 1C-Битрикс
Свежие комментарии в блоге