Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Простые калькуляторы в карточке товара каталога на Битрикс

Просмотров: 15368

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

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

Описание задачки

Итак: задачка достаточно редкая, но все же случается. Компания, для которой разрабатывается сайт, занимается услугами УФ-печати на любых поверхностях. Например: нанесение фотоизображения на мебель. обои или ткань. Услуга расчитывается на основе квадратных метров. То есть учетная еденица в каталоге товара- квадратный метр, на который и назначается цена. Да, это интернет-магазин со всеми вытекающими, оформление заказа, оплата итд. То есть: что бы покупателю купить товар, нужно ввести в карточке товара требуемое количество квадратных метров и собственно приобрести товар-услугу

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

Расчет площади на основании введенных в input данных

Для начала простенький калькулятор высчитывающий площадь в квадратных метрах из длинны и ширины которые ввел пользователь и вывод в input с количеством:

Создание форм в которые пользователь будет вводить данные:

<form onsubmit="return false;" oninput="changeText0()"> 
 <i>длина в м.<br/> <input id="a" type="number"></i> 
 <i>ширина в м.<br/> <input id="b" type="number"></i> 
 </form>

Простенький javascript который будет считать эти данные

<script type="text/javascript"> 
 	function changeText0(){ 
 	var QUANTITY = 1; 
 	QUANTITY *= parseFloat(document.getElementById('a').value); 
 	QUANTITY *= parseFloat(document.getElementById('b').value); 
 	document.getElementById('QUANTITY').value = QUANTITY; 
}		 
 </script>

Результат он будет сразу заносить в стандартное поле количества битрикс. Для этого припишите к input в котором указывается количество id="QUANTITY"

С этой частью все! Проверьте- должно работать

Калькулятор стоимости. Перемножаем два поля input

Тут тоже все просто: по сути нам нужно перемножить полученное выше количество на цену товара (как помним она у нас за 1 кв.метр). Для этого, сразу после input-а с количеством создаем еще 4:

Инпут в value которого передаем цену товара вот так:


<input 
   type="text" 
   name="PRICE" 
   value="<?foreach($arResult["PRICES"] as $code=>$arPrice):?><?echo $arPrice["VALUE"]?><?endforeach;?>">

Инпут который будет кнопкой предварительного расчета:

<input 
  type="button" 
  value="Рассчитать" 
  onClick="calculator(this.form)">

Инпут который будет кнопкой сброса расчитанного результата:

<input type="reset" value="Сбросить">

Инпут который будет показывать результат нашего умножения:

<input 
  type="text" 
  name="total1" 
  size="20" 
  maxlength="40">

Все это вместе должно получиться вот так:

И еще один javascript который будет считать наше умножение и выводить в input результата после нажатия на "Расчитать"

<script type="text/javascript"> 
 	function calculator(form) {//Функция подсчета 
 		QUANTITY = eval(form.QUANTITY.value); //Присваем значение из поля QUANTITY - колличество товара к заказу 
 		PRICE = eval(form.PRICE.value); //Присваем начение из поля PRICE куда подставили цену товара 
 		SUMMA = PRICE*QUANTITY; //премножаем QUANTITY на PRICE 
 		form.total1.value = SUMMA; //выдаем результат 
 		} 		 
 </script>

Если нужно обрезать количество знаков после запятой, в результате вычисления, можно воспользоваться методом toFixed. Просто в конце строки, отвечающей за вывод результата подсчета добаляем .toFixed(3) - где 3 количество необходимых знаков


form.total1.value = SUMMA.toFixed(3);

В общем-то и все, все это должно работать, а выглядеть будет вот так:

Соласен, вообще не красиво, но работать все будет идеально, останется просто навести марафет с помощью стилей, элементарная верстка поможет окультурить внешний вид , расставить все инпуты по своим местам и при желании скрыть не нужные. Например так:

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

Алексей 06.04.2015
Цитата
Михаил Базаров пишет:
Цитата
Алексей пишет:
А возможно создать калькулятор следующим образом:
мы задаем длину и ширину, затем выбираем товар из каталога с разными наименованиями. К примеру задает размеры, затем дверь, к ней замки ручки и тд, при этом каждый раздел из каталога брать по одному. а в конце выводит всю сумму?
Заранее спасибо))
Проще задать ширину и длину у конкретном товаре, кинуть этот товар в корзину. А покупателю, прямо в карточке этого товара предложить накидать еще и доп. товары (дверь, ручки итд) в общем- не усложняйте. Сделайте просто для пользователя)
И все же было бы не плохо этому научится. Ведь подобное можно использовать везде.
Азиз 18.11.2015
Здравствуйте! у меня вопрос если ли программы которые будут автоматический высчитывать результат?ну вот например задаем размер плитки 0,30х0,30 и получаем 0,09 кв.м за лист и вот когда клиент будет покупать 2 или более листов он будет зразу видеть сколько кв.м он берет) пример:http://daostone.ru/material/steklo/LHK-299-2 (что то типо того что стоит возле их кнопки купить)
Andrey 06.04.2016
A возможно применять такие калькуляторы для расчета стоимости товаров в битриксе?
Михаил Базаров 06.04.2016
Цитата
Andrey написал:
A возможно применять такие калькуляторы для расчета стоимости товаров в битриксе?
В общем-то да, смотря как применить и с какими цифрами (данными) работать
Антон Шаповал 07.02.2017
Привет.

У меня такая задачка: Есть сайт, который продает путевки. Цена за путевку должна строиться следующим образом: (кол-во взрослых мест * взрослая цена + кол-во детских мест 1 * детская цена 1 + кол-во детских мест 2 *детская цена 2 + ... +кол-во детских мест n * детская цена n) * кол-во дней. взрослые/детские цены хранятся в свойствах инфоблока. Допустим я сделаю на JS калькулятор, но могу ли я подменить цену Битрикса, рассчитанным значением? И если да, то как?  
Михаил Базаров 07.02.2017
Цитата
Антон Шаповал написал:
Привет.

У меня такая задачка: Есть сайт, который продает путевки. Цена за путевку должна строиться следующим образом: (кол-во взрослых мест * взрослая цена + кол-во детских мест 1 * детская цена 1 + кол-во детских мест 2 *детская цена 2 + ... +кол-во детских мест n * детская цена n) * кол-во дней. взрослые/детские цены хранятся в свойствах инфоблока. Допустим я сделаю на JS калькулятор, но могу ли я подменить цену Битрикса, рассчитанным значением? И если да, то как?
Так не получится, сделайте взрослые/детские цены торговыми предложениями.
Антон Шаповал 10.02.2017
Цитата
Михаил Базаров пишет:
Цитата
Антон Шаповал написал:
Привет.

У меня такая задачка: Есть сайт, который продает путевки. Цена за путевку должна строиться следующим образом: (кол-во взрослых мест * взрослая цена + кол-во детских мест 1 * детская цена 1 + кол-во детских мест 2 *детская цена 2 + ... +кол-во детских мест n * детская цена n) * кол-во дней. взрослые/детские цены хранятся в свойствах инфоблока. Допустим я сделаю на JS калькулятор, но могу ли я подменить цену Битрикса, рассчитанным значением? И если да, то как?
Так не получится, сделайте взрослые/детские цены торговыми предложениями.
Это невозможно! — сказал Гугл.
Это безумство! — сказала техподдержка.
Не, ну... — сказал программист и достал свой бубен.

В принципе я его победил. Костыльно, но работает. https://pyro338.ru/2017/02/10/proizvolnaya-tsena-v-korzine-bitriks/

З.Ы. Что-то письма с вашего сайта не ходят, что новые сообщения в теме.
Дмитрий 15.03.2017
Добрый день!
Возможно ли на основе этого кода сделать калькулятор в котором:
1. Имеется размер полотна, жестко указанный в характеристиках (2х3, 3х3, 4х8 и т.д.)
2. В зависимости от выбора размера изменяются отображаемые характеристики товара (вес, объем, стоимость за единицу).
3. Имеется возможность выбора количества единиц номенклатуры.
В конечном итоге получаем стоимость продукта.
https://yadi.sk/i/dO5GF_5K3Ft667
Михаил Базаров 15.03.2017
Цитата
Дмитрий написал:
Добрый день!
Возможно ли на основе этого кода сделать калькулятор в котором:
1. Имеется размер полотна, жестко указанный в характеристиках (2х3, 3х3, 4х8 и т.д.)
2. В зависимости от выбора размера изменяются отображаемые характеристики товара (вес, объем, стоимость за единицу).
3. Имеется возможность выбора количества единиц номенклатуры.
В конечном итоге получаем стоимость продукта.
https://yadi.sk/i/dO5GF_5K3Ft667
Это скорее всего нет, то что вам нужно, даже не калькулятор (если правильно понял задачу). Просто показываете дополнительные свойства характеристик (предложений), в зависимости от выбранного предложения.
Сергей Макаренко 29.03.2021
Подскажите пожалуйста кто нибудь! Как сделать в карточке товара доп услуги в виде чекбоксов?

Напримере "торговых наборов" только в виде чекбоксов

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Автогенерация символьных кодов разделов и элементов Битрикс Просмотров: 14950 Иногда нужно создать символьные коды для разделов и элементов. Например: если сайт создан ... Самодельная форма добавления элемента на API Битрикс Просмотров: 42448 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Сортировать товары по названию, цене и дате поступления в каталоге Би... Просмотров: 39343 Достаточно часто заказчик просит вывести сортировку по цене, новым поступлениям и названию... Хостинг панель BrainyCp: оптимизация под 1С-битрикс Просмотров: 7503 В этой видео-заметке расскажу как установить и оптимизировать панель управления сервером B... Отключить поиск по описаниям товаров в Битрикс Просмотров: 10581 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5573 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1512 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс Просмотров: 15280 Достаточно часто, при проверке параметров системы, в Битрикс, можно увидеть одну из ошибок... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 27876 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Звездочки в рейтинге Битрикс статей и новостей Просмотров: 18037 Стандартный вид рейтинга в новостях Битрикс, ну скажем так- не очень красив. Давайте его п... Ускорение работы сайта на 1С-Битрикс Просмотров: 15839 Данная статья написана специально под видеоролик (приложен в конце статьи), опубликованный... XML в формате Commerce ML-2, города России и Мира, для выгрузки в инф... Просмотров: 6285 Подвернулась задачка, создать инфоблок для Битрикс, в котором будут просто города России и... Малая корзина Битрикс, упрощенный шаблон Просмотров: 12513 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ... Установка веб-сервера LAMP на ubuntu 20.04 LTS, оптимизированный под ... Просмотров: 11378 В последнее время, плотно пересел c macOS на ubuntu, и решил настроить себе полноценное ра... Увеличение диска на готовой виртуальной машине Битрикс Просмотров: 8732 Как всем известно, на официальном сайте 1С-битрикс можно скачать готовую виртуальную машин... Отфильтровать новости в Битрикс за заданный период Просмотров: 15552 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Вывести дату окончания скидки в карточке товара Просмотров: 3632 Если нужно вывести информацию о скидке в карточке товара, можно воспользоваться методом Заполнение габаритов товара, после обмена с 1С, из свойств элемента и... Просмотров: 10383 Если Ваш интернет-магазин интегрирован с 1С, скорее всего столкнулись с такой проблемой: 1... Основные функции вывода в шаблонах Битрикс Просмотров: 155255 Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну к... Добавление в избранное или отложенные, на AJAX из карточки товара Просмотров: 27299 В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "И...