Добавление виджетов транспортных компаний 2.0

Суть калькуляторов доставки транспортных компаний в том, что они предоставляют доступ к своим API в ответ присылая данные по стоимости доставки вашего заказа.

Учитывая гибкие возможности виджетов транспортных компаний и короткие сроки их внедрения мы написали для веб-разработчиков (треб. знание JS и HTML) инструкцию по добавлению виджетов доставки в корзину 5CMS.

Убеждаемся, что у интересующей вас транспортной компании есть виджет (на сайте этой ТК).

Суть интеграции с виджетом транспортной компании:

  • считать скриптом по id из шаблона вес, объем, длина одной стороны, сумму заказа
  • отправить эти данные через виджет
  • полученные обратно данные от виджета записать в специальные поля в шаблоне
Все что требуется от веб-разработчика - знание JS

Теперь пошагово:

1) В Настройки -> Доставка создаем новый вариант доставки, вводим его название и выбираем "Используется виджет доставки".

И будет сгенерирован ваш ID доставки.

Виджет должен запускаться по клику "выбрать на карте" class="show_map" (чтобы не грузить лишних скриптов в холостую):

a) Код виджета и вызов скриптов виджета (вставляете в админке), рекомендуется обернуть в $(window).load(function(){ (чтобы вызов был запущен точно после загрузки всех скриптов)

б) Инициализация виджета (реком. открытие во всплывающем окне) по клику на "выбрать на карте":

$(document).on('click', '#li_delivery_ваш ID .show_map', function () {

   1) Считываем: вес, объем, длина одной стороны, сумму заказа:

   var weight = $('#ems-total-weight').text(); // кг
   var volume = $('#total-volume').text();
   var side = $('#cart-side').text(); // см
   var order_total_price = $('#ems-total-price').text();

   2) Вызываем инициализацию функции (напр.: open и тп)

});

в) Ответ от виджета используем следующим образом:

Если хотите учитывать параметр "Доставка бесплатна от", то дополнительно возьмите у радио-кнопки атрибут data-freefrom и при выполнении условия обнуляйте расссчитанную стоимость доставки.

Допустим виджет отдает нам стоимость доставки result.price

  • Пишем стоимость (с пересчетом в валюту пользователя с использованием переменной curr_convert) в <span id=not-null-delivery-price-ваш ID 
  • и стоимость как есть в <input id="widget_ваш ID "

Напр:

// calc (1)
   $('#not-null-delivery-price-ваш ID').html( (result.price*curr_convert).toFixed(0) );
   $('#widget_ваш ID').val(result.price);
// calc (1) end
// переменная curr_convert отдается из шаблона

  • Остальную инфу о заказе (город, вид, сроки и тд) вставляем скриптом в <div class="deliveryinfo"></div> (этот div уже присутствует автоматом в шаблоне)
  • Затем убедимся, что радио-кнопка доставки нажата и отправим инфу о рассчитанной доставки из .deliveryinfo в #calc_info (также уже присутствует в шаблоне)

// calc (2)
   $('#deliveries_ваш ID').click();
   $('#calc_info').html( $("#li_delivery_ваш ID .deliveryinfo").text() );
// calc (2) end

Добавление виджетов транспортных компаний 2.0

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!