Javascriot — мое второе приложение по расчету стоимости заказа


Содержание

Скрипт калькулятора услуг на jQuery

Рассмотрим создание простого калькулятора услуг на jQuery на примере услуг по ремонту квартир и дизайна интерьеров.

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

Живой пример, где можно покликать. Cсылка на скачивание исходников под статьёй.

Коротко пробегусь по скрипту с комментариями.

Раскрываем блок с параметрами по клику с плавной анимацией. Заменяем кнопку рассчитать стоимость на , в который будет подставляться рассчитанная сумма.

Визуально выделяем отмеченные параметры, добавляя к ним свой CSS класс .check-param , причем в блоке с параметрами должен быть выделен только один.

Пишем функцию, которая вычисляет значения введённых и выбранных параметров, рассчитывает сумму по формуле и подставляет в Итог: 1000000 рублей. Значение из поля input для ввода площади получаем используя метод .val() . Для вычисления коэффициентов у выбранных параметров используем метод .attr() . При этом у соответсвующих div элементов должны быть прописаны атрибуты data с нужными значениями.

Остается повесить обработчик на блок с калькулятор, и при изменении одного из параметров запускать функцию расчета стоимости.

Рабочий пример со скриптом калькулятора , html версткой и css стилями можно скачать в zip архиве. Скрипт можно легко доработать под свои требования.

Скрипт калькулятора стоимости

Пункты, которые нужно заполнять пользователям

Событие oninput происходит когда элемент меняет своё значение в момент фокуса.

Добавим выпадающий список

Событие onchange происходит когда элемент меняет своё значение на момент потери фокуса. Видно в IE. Поэтому если присутствуют два разных типов input, к которым лучше применить разное событие, выносим скрипт за форму.

Добавим чекбокс type=»checkbox»

Событие onclick происходит при щелчке левой клавишей мышки на элементе. На основе этого скрипта.

Добавим флажок type=»radio»

То же самое, что и выше.

Проверка на целое число javascript

Столкнулась в этом примере, поскольку года, которые делятся на 4 без остатка, являются високосными (искл. каждый сотый год, но не каждый четырёхсотый). Условие такое:

parseFloat возвращает дробное число,
parseInt возвращает целое число.

Смена select в зависимости от установленного флажка

35 комментариев:

Baxa Cveridov Спасибо, кратко и понятно!
Вопрос Baxa Cveridov Километры и особенно площадь не могут быть отрицательными. Как можно убрать показ результата когда пользователь выбрал отрицательные цыфры ? NMitra Самый простой вариант:

но пока не всеми браузерами поддерживается :( NMitra Позволяет вводить только числа:

ни букв, ни минусов. Archeton Доброе времени суток! Нужен скрипт калькулятора для внедрения в HTML тело сайта. Пример можно глянуть тут:
http://berezaksi.by/index.php/raschjot-blokov NMitra Доброе время суток! Что вы хотите от меня? Чтобы я помогла сделать что-то подобное? Тогда покажите что у вас уже есть. Чтобы я сделала сама? Это не будет бесплатно. FOMUVI Какие классные примеры, спасибо большое. Скоратил php код в разы :-) Аж разуюсь. Один вопросик созрел: у меня сразу в обоих полях есть уже дефолтные значения (рекомендуемые). Но пока я не начинаю вводить изменения хотя бы в 1 поле — результат не выводится. Можно ли сделать, чтобы при загрузки страницы сразу показывался результат? NMitra Так?
FOMUVI Я так сразу сделал, думал прокатит, но нет. Если ставлю value изначально, то потом это число не меняется при изменении первого или второго числа. FOMUVI Даже плейсхолдер «ломает» подсчеты NMitra Приведите постой пример на http://jsfiddle.net/ иначе не понятно FOMUVI Вот код моей формы http://jsfiddle.net/0kscg284/
Объясню просто. Форма, в ней циклом может до 8 таблиц рисоваться. Допустим, что она одна всего (табличка). Я так понимаю, пока php обрабатывает скрипт, Ява уже смотрит, что там, а там ещё нет значений и пока ничего не выдает,так? :-) А когда начинаю щёлкать — уже срабатывает. Нашел совет, типа поставить скрипт в конец, после формы. Но ничего, к сожалению, не изменилось — пусто при загрузке страницы. NMitra Перекидывать значения php и javascript можно с помощью new XMLHttpRequest() . Простой пример http://shpargalkablog.ru/2014/07/adblock.html

Я бы передавала в JS значения, а с помощью JS делала подсчёты. FOMUVI Может дело в другом? Ведь при нажатии всё начинает считаться верно. Для простоты я сохранил ваш первый пример в HTML, для каждого поля ввёl value. Теперь в полях отображается сразу длина 10, ширина 5, но площадь НЕ отображается (просто пусто), пока не начинаю изменять цифры в полях — тогда появляются цифры. FOMUVI NMitra, ваша отзывчивость дороже золота :-) спасибо большое. Решение найдено. Заметил по примеру с выпадающим списком, что там внутри output есть изначально единица (да что угодно), а после нажатий она затирается на нужное значение. Это же класс, это выход. С помощью PHP формулу туда вставил, потому страница загрузилась, а там уже результат! А в ява такая же формула, потому нажал кнопку и как надо изменилось :-) В общем, благодаря нескольким строкам на яве удалил одну страницу PHP. NMitra Кажется я поняла что вы хотите добиться. Сравните
http://jsfiddle.net/NMitra/kowhr3s9/
http://jsfiddle.net/NMitra/kowhr3s9/1/

Цукерберг рекомендует:  Худшие способы обучиться программированию

То есть в первом случае функция исполняется после какого-то действия. Во-втором, после загрузки страницы или выполнения какого-то действия (нажатия, фокуса, изменения значения и т.п.)
FOMUVI Второй вариант самый подходящий :-) спасибо! Доделал. Пошёл дальше читать ваши уроки. Анонимный Спасибо за урок. А не подскажите, как правильно использовать функцию math.ceil? Использую её в скрипте:
function insertTotal() <
if (edizm.value==»1″) <
var per=id.value /dltr;
var perr= math.ceil(parseFloat(per));
var count = perr*dltr* vespm;

total.innerHTML = ‘Эквивалентно: ‘ + count +’тн’;
> else <
var count = id.value / vespm;

total.innerHTML = ‘Эквивалентно: ‘ + count +’пм’ ;>
>
>
Но она не работает, результат не выводится. Может подскажите, что не так? NMitra А расскажите что именно вы хотите добиться (если при этом выложите код на http://jsfiddle.net/ будет совсем хорошо) Анна Спасибо огромнейшее. Очень помогли! Уже не первый раз ваш сайт выручает, все по полочкам разложено, как раз для новичков, таких, как я)) NMitra Благодарю за комментарий!
Сейчас уже не так хорошо получается — знания мешают :( Когда сама новичок и пишешь для новичков, как ни странно, проще. Потом невольно упускаешь важные детали. Unknown Спасибо!
Очень полезные примеры.
А не подскажете, как вот еще сохранить полученный результат?
document.getElementBy > NMitra Локальное хранилище http://shpargalkablog.ru/2013/06/localStorage.html или PHP, например, file_get_contents, или вытягивать из БД при загрузке Tatiana Bokareva Спасибо, сейчас попытаюсь донести свою мысль. вот кусочек скрипта

function changeText() <
var bill1 = 0;
var bill = 0;
var fullbill = 0;
var fullbill1 = document.getElementById(‘fullbill1’).value;
var firstAccount = document.getElementById(‘firstAccount’).options[document.getElementById(‘firstAccount’).selectedIndex].value;
var firstPc = document.getElementById(‘firstAccount’).options[document.getElementById(‘firstAccount’).selectedIndex].id;

bill1 = parseFloat(fullbill1);
bill1 = bill1-bill1*parseFloat(firstPc)/100;
bill = bill1;
fullbill = parseFloat(fullbill1);

document.getElementBy > document.getElementBy > document.getElementBy >
>

.
а вот процедура выбора:

и в идеальном варианте, мне бы куда-нибудь приткнуть hidden поле ввода для <$bill1>, не могу придумать, как сделать, чтобы оно заполнялось полученным значением.
А дальше я его уже сохраню при помоpщи php Tatiana Bokareva н-да. что-то не опубликовалась Tatiana Bokareva
вот она: http://jsfiddle.net/fsLn9w7m/ NMitra Эх, всё равно не поняла, так?

http://shpargalkablog.ru/2015/05/style-css-javascript.html Tatiana Bokareva Ага. Сейчас попробую, спасибо! Tatiana Bokareva Не сохраняется оно. Сейчас попробую прояснить.
В форме происходит 3 вещи:
1 — вводится сумма fullbill1,
2 — выбирается дисконт: $account1 ,
3 — считается сумма с дисконтом bill1.
Ну там помимо этого считаются итоги, но это не критично.

При этом замечательно сохраняются только 2 параметра:
fullbill1, — как введенное пользователем число NMitra Скрипт на load вешайте. При загрузке страницы он заново будет просчитывать. Самый простой вариант отработки функции при загрузки страницы и при нажатии кнопки https://jsfiddle.net/NMitra/nrwzxzou/

document.getElementBy >raz();
function raz() <
alert(1+2);
>

Есть ещё вариант http://shpargalkablog.ru/2013/06/localStorage.html но я бы в данном случае использовала первый (если правильно поняла проблему). Tatiana Bokareva Попробую с local storage. Мне кажется, первый вариант немного про другое, т.к. число вводится пользователем уже после открытия страницы. Спасибо за помощь! )) Tatiana Bokareva В общем я поняла, что у меня так и не получилось выразить свою мысль ))) Заполнение поля сделала вот так:

var h ]’);
$(‘.form-autocount input[name=»bill1″]’).val(bill1);

http://jsfiddle.net/fsLn9w7m/ NMitra Главное, что всё что хотелось, удалось :) Тимур Сарсембаев Здравствуйте. Просьба подсказать решение.
Нужно сделать простой калькулятор, но вот знаний не хватает.

Налоговый режим
Упрощенный
Общеустановленный
Кассовый аппарат
Да
Нет
Рассчитать

Javascriot — мое второе приложение по расчету стоимости заказа

Калькулятор расчета услуг

  • 4 основных шага, последовательно появляющихся друг за другом
  • Раскрывающиеся описание для каждой услуги
  • Блок с выбранной услугой отмечается особым цветом
  • Скрипт для выбора только одного чека в первых двух блоках, так же заменены картинки ie9+
  • Проверки на пустой чек, указаны ли кол-во услуг(страниц).Выводятся разные предупреждения для каждого шага
  • Затемнение пройденного шага с уведомлением
  • Прогресс-бар пройденных шагов в процентах и визуальном представлении
  • Подсчет шагов n из 4, после выбора последнего меняется на кнопку «Расчет»
  • Итоговая расчетная таблица выбранных услуг, с типом услуги, ценой, количеством (выбрано страниц), если это возможно, а так же итоговая стоимость
  • Форма заявки, c 3 обязательными полями, поля email и телефон проверяются через регулярные выражения и 1 необязательное
  • Сообщение об успешной отправке с указанием на какой email выслано сообщение
  • Ajax обработка формы, без перезагрузки страницы
  • PHP обработчик формы отправляет два письма:
    • на указанный email в формате HTML(клиенту);
    • на email исполнителя с информацией о клиенте

  • Все современные браузера
  • В IE8 и ниже не работают некоторые визуальные эффекты, вся логика функционирует

Калькулятор услуг на php и javascript — формирование word.docx документа

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

Фишка этого калькулятора в том, что в итоге все расчеты можно сохранить в word документ и формирует он все данные за считанные мили-секунды.

Для чего мы создаем такой калькулятор расчетов услуг

  1. Быстрая готовая смета
  2. Сформированный документ можно уже отправлять клиенту
  3. Экономия времени пользователю, тем самым повышаем КПД

Какие методы используем

  1. Формирование шаблона на HTML
  2. Использование многомерного массива в input
  3. Запросы к базе данных для вывода услуг
  4. Расчет при помощи javascript
  5. Php формирование документа

Создаем калькулятор расчета за 6 простых шагов

Шаг 1. Создаем базу данных в mysql

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

price_cat — таблица с категориями
price_item — таблица с услугами

Создаем базу данных импортируем файл calculator.sql в созданную базу данных и подключаемся к ней.

Все готово. Теперь необходимо разметить html шаблон и одновременно формировать запросы к базе.

Шаг 2. Разметим html + php шаблон

Подключаем библиотеки, которые нам понадобятся

Обратите внимания:
Я использовал bootstrap компоненты, а так же библиотеку awesome иконки, а в calculator.js мы будем писать скрипт расчетов.

Разметка калькулятора

Как видим ничего сложного нет, очень простые запросы к базе, очень простой html код. Единственное на что хотел обратить внимание, это на то что мы используем многомерный массив input. В файле обработчике мы будет работать с ними и научимся извлекать нужные данные из них.

Теперь самое интересное. Напишем скрипт для расчета стоимости услуг на javascript.

Шаг 3. Пишем скрипт на javascript онлайн расчета

Некоторые строки я пояснил прямо в коде.

Отлично теперь, если вы сделали все правильно, то у наш созданный калькулятор уже должен считать.

Шаг 4. Пишем скрипт формирования содержимого в word.docx документ.

В исходниках есть файл sample.rtf, его вы должны разместить у Вас на сервере. Он послужит нам шаблоном для создания документа формата .docx на php. Он так же содержит метки, куда мы будем присваивать переменные, созданные в файле save_word.php. Этот файл и есть обработчик формирования word документа.

Файл save_word.php

В некоторых моментах мне было лень присваивать классы, прописывать к ним стили, а потом подключать новую CSS. По этому я писал стили прямо в коде в тегах, конечно же плохой пример, не делайте так, но из-за 2-3 строк, тоже время терять не хочется.

Все готово, можете тестировать и визуализировать выводимый word формат.

Вывод

В этом уроке мы создали онлайн калькулятор расчета услуг, на примере калькулятора ремонта, позаимствовав идею у сайта remont-cityper.ru. Написанный нами код очень сильно отличается от кода, который использован в демо примере. ( можете убедится сами). Так же мы научились создавать word документ под средством php, использовав шаблон rtf и специальные метки. Это отличный урок по созданию счетов, бланков, прайс-листов и т.д.

Пишите комментарии по этому поводу, я буду раз услышать от вас рекомендации или советы.

Калькулятор расчета стоимости натяжных потолков на jQuery

В этой статье мы сделаем простой калькулятор на jQuery. Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.

Писать наш скрипт калькулятора мы будем на примере «расчета стоимости натяжных потолков». Вот так выглядит калькулятор «в живую».


Напишу калькулятор расчета на js

Об этом кворке

Напишу калькулятор для расчета: пластиковых окон, стоимости ремонта, стоимости строительных работ, аренды, кредитов и т. д.

За 1 кворк — простой калькулятор без верстки.

Примеры работ можно посмотреть тут:

Также могу присоединить к результатам различные графики. Отправлять результаты на эмейл. Создавать PDF-файл с результатами расчета.

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

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

ЧАСТНЫЙ ВЕБМАСТЕР СЕРГЕЙ КРАЛЬКО
ЗАКАЗАТЬ САЙТ, ПРИЛОЖЕНИЕ НА PHP И JAVASCRIPT

ЧАСТНЫЙ ВЕБМАСТЕР СЕРГЕЙ КРАЛЬКО

Приветствую Вас на сайте веб-студии «RuWebMaster»! Меня зовут Кралько Сергей, я — частный Вебмастер, разрабатываю сайты и приложения (виджеты) для них с 2012 года. В современном мире, где практически всю основную информацию, мы получаем через интернет, заказать создание собственного веб-ресурса для ведения бизнеса — это необходимость! При заказе нужно ориентироваться не только на привлекательный дизайн, но и на удобный, разнообразный и простой в понимании функционал. Не стоит недооценивать роль приложений. Возможно, на Ваш взгляд, нет необходимости в трате лишних средств на их приобретение и установку, но с позиции пользователя — сайт становиться информативнее и следующий раз посетитель обязательно заглянет к Вам на сайт даже если он другой тематики. У меня Вы можете заказать не только сайт, но и разнообразные приложения, такие как: гостевые книги, калькуляторы для расчета и автоматизации Вашего бизнеса, разнообразные формы связи, формы и бланки онлайн заполнения, печать онлайн документов и многие другие приложения которые Вам необходимы.

ОСОБЕННОСТИ В МОЕЙ РАБОТЕ

Чтобы эаказать сайт у меня, Вам необходимо знать некоторые особенности в моей работе. При создании сайтов, я не использую генераторов html кода, проще говоря пишу сайт в блокноте. Огромные преимущества у этого старого и проверенного метода неоспоримы. Во-первых, при создании сайта я неограничен рамками шаблона, как это происходит при использовании CMS генераторов html кода. Есть и недостатки — это отсутствие привычной админ панели для редактирования сайта. Для заказчиков, которые считают что, каждый должен заниматься своим делом, этот вариант наиболее подходящий. Если есть необходимость в редактировании своими силами, то при заказе, Вы должны сообщить мне об этом. Для Вас я могу предложить создать сайт с использованием генератора html кода WYSIWYG Web Builder 9 (бесплатная версия и очень богатый функционал) и не менее известный WebSite.X5 v11 (платная версия, но наиболее подходящая для новичков).

АДАПТАЦИЯ САЙТА ПОД МОБИЛЬНЫЕ УСТРОЙСТВА

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

При заказе у меня сайта, Вы получаете совершенно бесплатно, сайт адаптированный под устройства, начиная с телефонов и заканчивая настольными PC. Я пишу, как их еще называют в кругу вебмастеров — «Резиновые сайты», которые автоматически подстраиваются под разные размеры экранов. Вам не придется затрачивать дополнительные ресурсы и тратить свое время на создание отдельной версии сайта под мобильные устройства.

ЗАКАЗАТЬ ПРИЛОЖЕНИЕ НА PHP, JAVASCRIPT, CSS

Создание интересного и информативного сайта невозможно представить без дополнительных модулей для сайта. Такие языки программирования как PHP и JavaScript предоставляют огромные возможности по реализации самых смелых Ваших фантазий. А если к этому еще добавить язык стилей CSS, то можно создать очень прогрессивный и динамичный сайт который удовлетворит даже самого требовательного клиента.

В создании приложений для веб-сайтов, я в основном специализируюсь на автоматизации процессов работы пользователей с сайтом, а именно, разнообразные калькуляторы, формы заказов, разрабатываю html письма для emal рассылки, приложения для онлайн обработки фотографий (уменьшения размеров, наложения разнообразных фильтров), гостевые книги, бланки онлайн заполнения и печати, виртуальных помощников по сайту. Также помогу организовать интеграцию Вашего сайта с Microsoft Office Excel, Microsoft Office Word, 1С и другими офисными программами.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тарифные планы

Бесплатный

3 проекта
без доступа к расширенным функциям

Базовый


5 проектов
+ расширенные функции

Рекомендуемый

Стандарт

15 проектов
+ расширенные функции

∞ проектов
+ расширенные функции

Бесплатный

Базовый

Стандарт

Купить Количество проектов 3 5 15 ∞ Еmail-уведомления 100 +300 + +1 000 + +3 000 + SMS-уведомления 0 + +10 + +30 + Интеграция CRM-систем ? Статистика и цели Прием оплаты Использование картинок Использование ссылок Отсутствие рекламы Клонирование проектов Вставка своего HTML-кода Прикрепление файлов Чат с техподдержкой Купить Купить Купить Купить

Закажите готовый калькулятор или форму

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

Способы оплаты

Оплата банковской картой или электронным кошельком

Безопасный платеж

Платежи защищены по
256-битному протоколу SSL

Ответы на частые вопросы

Как можно оплатить тариф?

Оплатить можно с помощью банковской карты VISA, MasterCard, PayPal и электронным кошельком. Возможна безналичная оплата, для этого свяжитесь с техподдержкой.

Есть ли скидка при подписке на длительный срок?

Да. Чем больше период, на который вы покупаете тариф, тем больше скидка.

Сколько тарифов у uCalc?

Четыре тарифа: Базовый, Стандарт, Премиум и Про. Также есть четырнадцатидневный пробный период, в течение которого можно пользоваться всеми возможностями Базового.

Что будет после триала?

Основные базовые функции останутся и вы сможете пользоваться сервисом абсолютно бесплатно, за исключением премиум-функций (картинки, статистика, прием платежей, отправка sms, использование ссылок).

У вас есть партнерская программа?

Да, мы предлагаем партнёрскую программу, которая позволит вам зарабатывать, привлекая пользователей. Подробнее с нашим предложением вы можете ознакомиться на странице программы.

У меня еще есть вопросы

Пишите нам в техподдержку, мы обязательно ответим!

Урок 68. Внешний калькулятор для способа доставки

Обзор возможностей внешнего калькулятора для способа доставки в интернет магазине uCoz

Сергей 27.01.2020 4948 4.8 из 5.0 (9)

Цель урока

Познакомиться с возможностями внешнего калькулятора.

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

Добавление и настройка способа доставки

Если вы проходили урок 21 про обзор способов доставки, без труда сможете добавить новый способ доставки:

Все отличие в том, что нужно включить опцию Использовать модуль расчёта стоимости доставки и выбрать в ней значение Внешний калькулятор. После этого нажмите кнопку «Сохранить».

Мы можем перейти на страницу оформления заказа и увидеть новый способ доставки, но он пока при любых значения указывает нулевую стоимость. Скоро мы это исправим.

Принцип действия внешнего калькулятора

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

Так вот значение атрибута value этого поля запишется в стоимость заказа.

    Особенности:
  • значение в поле custom_delivery_tax записывается в условных единицах магазина и не зависит от выбранной пользователем валюты;
  • значение может иметь отрицательную величину, таким образом сумма будет вычтена из общей стоимости заказа. Фактически такса превращается в скидку;
  • значение может быть отредактировано на странице заказа администратором.

Свой скрипт для калькулятора

Теперь наша задача сводится к следующему:

  1. Рассчитать стоимость доставки в зависимости от какого-либо параметра
  2. Записать стоимость доставки в поле

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

Эту функцию можно спрятать в отдельный файл, а вызывать после подключения скрипта прямо из шаблона служебных форм таким образом:

Если собрать все воедино, то получим следующий код, который нужно разместить после $ORDER_FIELDS$ шаблона «Страница служебных форм»:

Конечно, это только один из примеров, как можно использовать внешний калькулятор. Попробуйте реализовать самостоятельно калькулятор:

  • для товаров из определенной категории;
  • для товаров с определенным id;
  • для пользователей определенной группы;
  • в зависимости от указанного города.

На этом урок закончен, задавайте вопросы в комментариях.

Упражнения

  1. Добавьте способ доставки с расчетом стоимости через внешний калькулятор;
  2. Напишите свой скрипт, который рассчитывает стоимость доставки;
Цукерберг рекомендует:  Social-Engineer.org о том, как защитить компьютер от взлома
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих