Вход / Регистрация

Создайте сайт прямо сейчас!

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



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


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

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

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

Сергей    27.01.2016    9582    4.6 из 5.0 (10)

Оцените материал:

Цель урока

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

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

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

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

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

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

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

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

<input type="hidden" name="custom_delivery_tax" value="">

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

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

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

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

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

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

var myCalculator = function(day){
 // стоимость доставки
 var cost = 0;
 switch(day) {
 // каждое первое число месяца стоимость равна 100у.е.
 case 1: cost = 100; break 
 // каждое двенадцатое число месяца стоимость равна 200у.е.
 case 12: cost = 200; break
 // каждое тридцать первое число месяца доставка бесплатна (таких дней всего 7 в году)
 case 31: cost = 0; break
 // по остальным дням мы не так щедры, доставка 500у.е.
 default: cost = 500;
 }
 // если поле custom_delivery_tax не существует
 if($('input[name="custom_delivery_tax"]').length == 0){
 // добавить его
 $('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
 }
 // запись стоимости доставки в поле custom_delivery_tax
 $('input[name="custom_delivery_tax"]').val(cost);
}

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

myCalculator($DAY$);

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

<script src="/js/myCalculator.js"></script>
<script>myCalculator($DAY$);</script>

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

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

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

Упражнения

  1. Добавьте способ доставки с расчетом стоимости через внешний калькулятор;
  2. Напишите свой скрипт, который рассчитывает стоимость доставки;


Оцените материал:


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

Обсуждение

Всего комментариев: 26

y
1
Как реализовать калькулятор:
  • в зависимости от указанного города.????
avatar
0
2
Составьте таблицу "Город" - "Стоимость доставки"
Нужно добавить обработчик на список с выбором города. И запускать функцию, которая в зависимости от выбранного города будет устанавливать стоимость доставки из таблицы.
t
3
Здравствуйте Сергей!  У меня почтовый сервис и очень нужен как раз такой калькулятор. Но есть свои нюансы. В таблице 8 тарифных зон с перечнем городов - областных центров. В зависимости от принадлежности указанного города в адресной строке (а к ней еще подключен  DaData сервис сверки адреса по КЛАДР)    к той или иной тарифной зоне  должна будет устанавливается  стоимость доставки курьером. Если указанный город в таблице отсутствует, то сообщение о невозможности доставить курьером и предложение выбрать другой способ доставки.  Может, ввести еще одно поле именно для курьерской доставки? Типа чекбокса - адрес доставки совпадает с адресом получателя?  Вы или кто-то из знакомых  не могли бы реализовать указанную схему расчета стоимости доставки? Спасибо!
avatar
0
4
Дмитрий, добрый день!

Правильно ли я понял, Вы используете введенный на странице checkout адрес для печати на конверте? Реально, он может не совпадать с адресом получения письма?

Добавьте поле "Адрес получателя на конверте" и поставьте галочку вроде "Адреса совпадают".

А на саму галочку надо повесить обработчик события. Если включена заполнить поле "Адрес получения" также, как и "Адрес получателя на конверте". Иначе — показать это поле.
t
5
Да, Сергей, адрес используется для печати на конверте. Хочу помимо почты РФ реализовать доставку курьером до ПВЗ - пункта выдачи заказов и до двери. Из практики, адреса как раз могут отличаться. Поэтому понадобится второе поле адреса для доставки курьером до ПВЗ.  Сам в программировании не силен, могу лишь по образцу что-нибудь скопировать, а с нуля  написать обработчик на выбор города из списка на 8 зон для меня непосильная задача.  Не затруднит вас кусочек кода привести для примера для одной зоны с городам "Москва" и для другой "СПб" с разной наценкой. А если города в списках нет, то результат - заказ формируется, но оплатить его можно будет только после того, как админ  проставит таксу за доставку на странице заказа.
avatar
0
6

Код
$('order-fld-N1').on('click', function(){
   // получаем значение чекбокса
   var a = $(this).prop('checked');
   if(a) {
   // если включен чекбокс "Адреса совпадают"
   // Скопировать адрес конверта в адрес доставки и скрыть его
   $('#order-fld-N3').val($('#order-fld-N2').val()).parent().hide();
   } else {
   // иначе очистить и показать поле "Адрес получения"
   $('#order-fld-N3').val('').parent().show();
   }
});

Где 
  • N1 — id поля с чекбоксом
  • N2 — адрес доставки на конверте
  • N3 — адрес доставки реальный

Не забудьте для N3 также подключить dadata. И смотрите, по начальному положению чекбокса, нужно ли показывать или скрывать реальный адрес, например так $('#order-fld-N3').parent().show();
t
7
Здравствуйте Сергей!
Сделал частично. Check есть, поле адреса курьера прячет. А вот присваивать значение поля на конверте при выбранном checkbox'e не хочет. При снятии checkbox'a поле адреса курьера не выводит. Не подскажете, где ошибка? Спасибо$('#order-fld-17').hide().after('<input type="checkbox"  id="courier" name="courier" value="0" checked=""><span > совпадает с почтовым</span>');
$('input[name=courier]').on('click', function(){
// получаем значение чекбокса 
   var a = $(this).prop('checked'); 
   if(a) { 
   // если включен чекбокс "Адреса совпадают" 
   // Скопировать адрес конверта в адрес доставки и скрыть его 
   $('#order-fld-17').val($('#order-fld-2').val()).parent().hide(); 
   } else { 
   // иначе очистить и показать поле "Адрес получения" 
   $('#order-fld-17').val('').parent().show(); 
   } 
});
t
8
Сергей, немного довел до вида желаемого.
Теперь если чек "совпадает с почтовым" включен, поле "Адрес для курьера" не отображается, при оформление заказа заполнено данными из поля "почтовый адрес"
Если чек снимаем, появляется над чеком строка адреса для курьера, но не чистая, а с почтовым адресом.
Если ввести новы адрес, то он не сохранится при заказе в этом поле.
И третье..
Если снова поставить чек, то и новое поле адреса для курьера, и чек исчезают.

Код
$('#order-fld-17').hide().after('<input type="checkbox"  id="courier" name="courier"  checked=""><span > совпадает с почтовым</span>').
     before('<input type="text" class="fw text" name="fld17" id="order-fld-17" value="" style="display: none;">');
      
if ($('input[name=courier]').is(':checked'))
       // Скопировать адрес конверта в адрес доставки и скрыть его  
    $('#order-fld-17').val($('#order-fld-2').val()).parent();  
$('input[name=courier]').on('click', function(){
// получаем значение чекбокса  
    var a = $(this).prop('checked');  
    if(a) {  
    // если включен чекбокс "Адреса совпадают"  
    // Скопировать адрес конверта в адрес доставки и скрыть его  
    $('#order-fld-17').val($('#order-fld-2').val()).parent().hide();  
    } else {  
    // иначе очистить и показать поле "Адрес получения"  
    $('#order-fld-17').val('').next().show();
    }  
});


Подскажете, что изменить, чтобы работало?
Спасибо!
avatar
0
9
Посмотрите, Вы в первой строке срипта вручную добавляете поле с ID = 17. Так, получается, что в какой- то момент их может быть два и более. Не нужно их самому добавлять, просто скрывайте/показывайте.

И чекбокс оформите как отдельное поле со своим ID в отдельном контейнере, чтобы он не скрывался.
E
10
Сергей, спасибо за подсказанную тему, это то что надо! Пришлось пару дней повозится, поскольку со скриптами знаком только поверхностно. Но все таки получилось то что задумал, наворотил скриптов трех этажных (по другому не умею). Осталось только разобраться, как заставить записанный скриптом результат в custom_delivery_tax, автоматически вести перерасчет в "Сумма к оплате выбранным способом", на данный момент перерасчет ведется только после клика по input с внешним калькулятором. Я так полагаю нужно по окончанию основного скрипта инициировать клик по этому input другим скриптом? Или есть какой то другой вариант?
avatar
0
11
Да, все верно. Для этого после расчета нужно выполнить функцию shEvOrd('delivery', document.getElementById('del-type-N'))

Здесь N - id способа доставки с внешним калькулятором
E
12
Сергей, все сделал, все работало как часы, но к сожалению не долго. Несколько дней назад решил проверить еще раз, и к моему удивлению страница оформления заказа уже не работала так как надо. Три дня пытаюсь выяснить в чем дело, ничего ни выходит. В песочнице все скрипты работают как часы, но на странице оформления скрипт не отрабатывается в полной мере, не считает "стоимость с комиссией" в зависимости от выбранного способа оплаты, а точнее не происходит авто-клика по выбранному способу оплаты для пересчета стоимости. Сумма записывается в custom_delivery_tax, а дальше еще хуже, не пойму, то ли функция shEvOrd не срабатывает, то ли $ORDER_TAX$ не работает, в общем $ORDER_TAX$ пересчитывается но показывает все время ноль, в то время как $ORDER_TOPAY_CURR$ вроде работает правильно но приходится пару раз кликать либо на способе оплаты, либо на способе доставки для перерасчета.
Все работало отлично, даже не знаю что случилось, может конфликт скриптов. Пробовал менять версии Jquery но результат не меняется, впрочем используется в основном javascript, но так на всякий случай. Посмотри пожалуйста, может подскажешь что не так. 
Страница товара
Песочница
avatar
0
13
Здравствуйте!

Были временные проблемы с работой внешнего калькулятора. Сейчас они устранены. Уточните, проблема сохраняется?
E
14
Здравствуйте Сергей, калькулятор работает, спасибо.
Можете сказать почему на сайте цена в поле "Стоимость с комиссией: custom_delivery_tax" считается с задержкой на одну цифру, в то время как в песочнице считается вся сумма с учетом вновь введенной цифрой?
avatar
0
15
После того, как Вы записали значение в custom_delivery_tax нужно отправить эту форму. Я, похоже, упустил это в уроке. Делается это с помощью встроенной функции shEvOrd:

Код
$('input[name="custom_delivery_tax"]').val(del_tax);
  shEvOrd('delivery',$('#del-type-1'));
Здесь "1" - это id способа доставки с внешним калькулятором.
f
16
Здравствуйте. А как сделать так, чтобы на странице оформления заказа тариф за доставку умножался на 2?
Я уже пробовал и так <? $ORDER_TAX_RAW$ + $ORDER_TAX_RAW$?> , и так <?$ORDER_TAX$ * 2?> и так 
<?$ORDER_TAX$ +  $ORDER_TAX$?>. В итоге к сумме оплаты прибавляется сумма доставки (1x) и при этом такса за доставку равна 0.
Вот строчка кода в странице служебных форм:   <?if($ORDER_TAX$)?><td><h4><!--<s4607>-->Такса за доставку<!--</s>--></h4>$ORDER_TAX$</td><?endif?>

В чем может быть дело, подскажите пожалуйста!?
avatar
0
17
Здравствуйте!

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

С помощью условных операторов такое сделать не получится, только если Вы полностью вручную оформляете форму заказа.
f
18
Добрый вечер. У меня почему-то "отвалился" скрипт интеграции доставки EMS, то есть ввожу город, но расчета не происходит. Всё перепроверил, но ничего не нашел. Сайт shadberry.ru. Подскажите пожалуйста как все восстановить? 
Заранее спасибо.
avatar
0
19
Потому что Вы из шаблона "страница служебных форм" убрали инициализацию скрипта. Откройте инструкцию и выполните пункт подключение скрипта
h
20
Здравствуйте, Сергей.  2 проблемы:
1. как подключить калькулятор? Где можно разместить код, чтобы он заработал? Щелчок по "Внешний калькулятор" -  всплывающее окно закрывается и ничего не происходит.  
2. Все, что говорилось выше - говорилось людьми, разбирающимися в программировании. Вы знаете программирование, смотря на вас, буду учиться говорить и на этом языке. 

Можно попросить вас пример функции, которая рассчитает стоимость доставки в зависимости от города и способа получения.
avatar
0
21
Здравствуйте, Александр.

Код для внешнего калькулятора подключается в шаблоне "Страница служебных форм". Чтобы он работал, достаточно в настройках способа доставки выбрать "Внешний калькулятор" и сохранить. Более ничего делать не нужно.

Пример функции.
Допустим, у нас есть выпадающий список с городами, один из которых выбирает пользователь. Это поле добавляется в панели управления ИМ / Управление полями заказа. Пусть у поля ID = 4.

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

Код
// обработчик изменения выпадающего списка
$('#order-fld-4').on('change', function(){
    // получаем город, который выбрал пользователь
    var city = $(this).val();
    // запускаем нашу функцию и передаем в нее город
    myCalculator(city);
});
// Функция расчета и записи стоимости доставки
function myCalculator(city){
    var cost;

    // Сопоставляем выбранные город и цену
    switch(city){
      case 'Москва': cost = 100; break;
      case 'Санкт-Петербург': cost = 200; break;
      case 'Казань': cost = 300; break;
      default: cost = 500;   
   }

   // если поле custom_delivery_tax не существует       
   if($('input[name="custom_delivery_tax"]').length == 0){  
     // добавить его
     $('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
   }
   // запись стоимости доставки в поле
   custom_delivery_tax   $('input[name="custom_delivery_tax"]').val(cost);
}
x
22
Сергей, буду очень благодарна, если подскажете, 
после $ORDER_FIELDS$ шаблона"Страница служебных форм": вставляю данный скрипт, но ничего не получается 
   
Код
<script>
  // переменная, в которую будет помещена величина наценки
  var calcPrice = 0;
  // выбираем способ доставки с внешним калькулятором
  var calcDelivery = $('#del-type-11');
  // обработчик событий выбора способа доставки с внешним калькулятором
  calcDelivery.on('click', function(){
  // произвести расчет calcPrice
  
      // обработчик изменения
  выпадающего списка
  $('#order-fld-9').on('change', function(){
      // получаем город, который выбрал
  пользователь
      var city = $(this).val();
      // запускаем нашу функцию и
  передаем в нее город
      myCalculator(city);
  });
  // Функция расчета и записи стоимости доставки
  function myCalculator(city){
      var cost;
  
      // Сопоставляем выбранные город и
  цену
      switch(city){
        case 'Москва': cost = 250;
  break;
        case 'Санкт-Петербург': cost =
  150; break;
              default: cost = 300;    
     }
  
     // если поле custom_delivery_tax
  не существует        
     
  if($('input[name="custom_delivery_tax"]').length == 0){   
       // добавить его
       
  $('#checkout-form').append('<input type="hidden"
  name="custom_delivery_tax" value="0">');
     }
     // запись стоимости доставки в
  поле
       
  $('input[name="custom_delivery_tax"]').val(del_tax);
  }
      // обновить форму заказа
        
  shEvOrd('delivery',$('#del-type-11'));
  });
  </script>
avatar
0
23
Мария, нужно взглянуть на сайт (можете в ЛС прислать)
x
24
Не отправить ЛС (неверный домен ключа).
Адрес сайта xoxosale.ru
Спасибо!
avatar
0
25
Там проблема с форматированием кода и немного в логике, у меня что-то получилось, посмотрите:

Код
var calcPrice = 0;
var calcDelivery = $('#del-type-11');
calcDelivery.on('change', function(){
   $('#order-fld-9').on('change', function(){
     var city = $(this).val();
     myCalculator(city);
    });
   function myCalculator(city){
     var cost;
   
     switch(city){
       case 'Москва': cost = 250; break;
       case 'Санкт-Петербург': cost = 150; break;
       default: cost = 300;  
     }
   
     if($('input[name="custom_delivery_tax"]').length == 0){  
       $('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
     }
   
     $('input[name="custom_delivery_tax"]').val(cost);
    }
   
    shEvOrd('delivery',$('#del-type-11'));
  });
x
26
К сожалению не помогло ((
Урок 68. Внешний калькулятор для способа доставки
Урок 68. Внешний калькулятор для способа доставки