Скрипт расчета стоимости доставки

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

Допустим имеется ситуация, когда копания продает один бренд линолеума. Для создания калькулятора на jаvascript потребуется узнать у пользователя длину и ширину для расчета площади помещения.

Создание формы для HTML для калькулятора

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

Первое поле – ширина:

Такое же поле для длины:

В оба поля мы добавляем идентификатор для того, чтобы наш скрипт мог легко получить введенные данные.

Добавляем кнопку расчета.

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

Объединим все в один код:

Расчет стоимости линолеума

Создание jаvascript кода калькулятора

На следующем этапе нужно написать программный код для jаvascript калькулятора расчета стоимости.

Изначально нужно получить данные длины и ширины из формы.

shirina = document.getElementById(‘shirina’).value;
dlina = document.getElementById(‘dlina’).value;

Добавляем условие для проверки на пустое поле.

if(shirina == "")<
alert("Вы не указали ширину");
> else if(dlina == "")<
alert("Вы не указали длину");
>

Если все в порядке, то запускаем расчет.

else <
cena = 440;
ploschad = parseFloat (shirina)* parseFloat (dlina);
document.getElementBy ;
stoimost = ploschad*cena;
document.getElementBy ;
>

Далее все объединяем в один программный код.

Итак, мы получили простейший jаvascript калькулятор расчета стоимости для сайта. Это универсальный вариант, в котором рассчитывается цена исходя из площади помещения, включающая ее расчет исходя из ширины и длины. Все что вам нужно это скопировать данный код на свою страницу и прописать свою цену для переменной cena. Для его визуального оформления нужно воспользоваться CSS.

Читайте также  Программы где можно печатать текст

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

Еще один вариант усложнения – это добавление, для данного примера, цвета линолеума. Для этого нужно в HTML код добавить поле выпадающего списка:

Все это мы подставим в HTML код, а в jаvascript добавим следующее:

cvet = document.getElementById(‘cvet’).value;
switch (cvet) <
case "serii":
cena = 440;
break
case "goluboi":
cena = 480;
break
case "geltii":
cena = 380;
break
default:
cena = 440;
break
>

Конечный программный код усовершенствованного калькулятора расчета стоимости:

Расчет стоимости линолеума

Если у вас возникли какие-либо вопросы, то пишите в комментариях.

Укажите вид договора
(необязательно)

Укажите город или несколько городов откуда
будет происходить отправление (необязательно)

отправление от адреса

Укажите город или несколько городов куда
будет происходить отправление (необязательно)

Укажите вес и размеры упаковки.
При весе 0.5кг и меньше размеры не учитывается (необязательно)

Вес: Длина: Ширина: Высота:
кг см см см

Укажите учитывать или нет комиссию за наложенный платеж.
Важно при отправлении наложенным платежом (необязательно)

учитывать комиссию за наложенный платеж

Укажите стоимость отправления
(необязательно)

Укажите вид оплаты
(необязательно)

Укажите вид доставки
(необязательно)

Укажите дополнительный сбор к стоимости доставки
(необязательно)

Дополнительный сбор: руб.

Укажите минимальную стоимость доставки
(необязательно)

Мин. стоимость доставки: руб.

И последние мелочи
(необязательно)

округлять копейки не показывать рамку

убрать символику СДЭК и ссылки на конструктор (200 р/мес)

Оплатить 200 руб

Код для вставки

API калькулятора СДЭК

Если Вас не устраивает внешний вид или функционал нашего калькулятора, то Вы сможете создать свой калькулятор, используя для этого бесплатное API.
Документацию по использованию API можно скачать здесь https://kit.cdek-calc.ru/api/kit_api.doc

Читайте также  Почему строка пуск поверх видео

Для использования калькулятора на Вашем сайте просто скопируйте представленный выше код и вставьте его в нужное место на своем сайте.

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

Курьерская служба СДЭК предлагает комплекс логистических услуг по такому направлению, как доставка товаров для интернет-магазинов и других компаний дистанционной торговли.

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

Компания “Деловые Линии”, занимающаяся грузоперевозками, ввела возможность для веб-разработчиков интегрировать на своем сайте форму расчета стоимости услуг посредством API. Чтобы создать полноценный, и по своему уникальный, калькулятор, необходимо сформировать специальный пакет данных для протокола JSON.

В дальнейшей работе нам потребуется поддержка PHP на сервере, обработка JS скриптов. Расчет формы выполнен без перезагрузки страницы. Пример можно посмотреть здесь.

Создадим два файла:

  • delivery.php – здесь будут выполняться расчеты.
  • dellin.php – файл с выводом формы.

dellin.php

Второй файл будет содержать форматирование страницы с подключением JQuery и необходимых нам скриптов, а также с выводом HTML формы. Основная часть:

Между и подключим JQuery и дополнительные функциональные элементы:

Ссылка на основную публикацию
Adblock detector