Создание калькулятора расчета стоимости доставки груза (dellin)

WebDev

Содержание

dellin.php
delivery.php

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

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

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

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

dellin.php

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Калькулятор</title>
  </head>
  <body>
    <!-- Здесь будет форма и обработка кода -->
  </body>
</html>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Первый скрипт:

<script type="text/javascript">
function AjaxFormRequest(result_id, form_id,url) {
  jQuery.ajax({
    url: url,
    type: "POST",
    dataType: "html",
    data: jQuery("#"+form_id).serialize(),
    success: function(response) {
      document.getElementById(result_id).innerHTML = response;
    },
    error: function(response) {
      document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";
    }
  });
}
</script>

Второй скрипт:

<script type="text/javascript">
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
</script>

И наконец третий скрипт:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#tzUpCalc').click(function() {
    $('html, body').animate({
      scrollTop: $("#tzTargetCalc").offset().top
    }, 800);
  });
});
</script>

Между <body> и </body> выведем форму:

<section id="tzTargetCalc">

<div id="result_div_id"></div>

<form id="tzFormCalc" action="" method="post">
<h3>Город доставки</h3>
<p><label for="moscow">Откуда</label> <input name="moscow" type="text" id="moscow" value="Москва" disabled /></p>
<p><label for="city">Куда</label> <input name="city" type="text" id="city" list="datalist" placeholder="Населенный пункт" autocomplete="off" /></p>

<datalist id="datalist">
<!--[if IE]><select><!--<![endif]-->
<option>Ангарск</option>
<option>Курск</option>
<!--[if IE]></select><!--<![endif]-->
</datalist>

<p><input id="home" name="home" type="checkbox" /> <label for="home">До адреса?</label></p>

<h3>Количество слонов</h3>
<p><label>Синих слонов</label> <input min="0" name="blue" type="number" placeholder="шт" /></p>
<p><label>Зеленых слонов</label> <input min="0" name="green" type="number" placeholder="шт" /></p>

<p><input type="button" value="Рассчитать стоимость доставки" id="tzUpCalc" onclick="AjaxFormRequest('result_div_id', 'tzFormCalc', '/delivery.php')" /></p>
</form>

</section>

На примере создания калькулятора в качестве груза мы взяли зеленых и синих слонов (каждый цвет имеет свой определенный вес, из которого будет рассчитываться цена доставки). Как мы видим, форма содержит следующие поля:

“Откуда” – город отправления (уже задан, не изменяется пользователем).
“Куда” – город доставки, берет свои значения из блока datalist.
“До адреса?” – необходима ли доставка до адреса заказчика (как правило, стоимость увеличивается) или он может забрать заказ в пункте самовывоза.
Синих слонов – 20 кг/1 шт.
Зеленых слонов – 60 кг/1 шт.

delivery.php

В первом файле зададим нужное нам количество городов:

<?php
if ($_POST['city'] == "Ангарск") $code = "3800000400000000000000000";
if ($_POST['city'] == "Курск") $code = "4600000100000000000000000";
?>

Переменная $code содержит код КЛАДР. Посмотреть нужный код населенного пункта можно на сайте компании.

Далее выполним проверку отметки “До адреса?” и рассчитаем итоговый вес слонов:

<?php
if (trim($_POST['home'])) $check = "true";
else $check = "false";

$weight = 0;

if ($_POST['blue'] > 0) {
  $weight += $_POST['blue'] * 20;
}
if ($_POST['green'] > 0) {
  $weight += $_POST['green'] * 60;
}
?>

А теперь непосредственно код для обращения к протоколу JSON (перед этим получите ваш личный ключ (appKey), зарегистрировавшись на сайте компании “Деловые Линии”):

<?php
$data = array(
  "appKey" => "Ваш_ключ",
  "derivalPoint" => "Код_КЛАДР_пункта_отправки",
  "derivalDoor" => true,
  "arrivalPoint" => "{$code}",
  "arrivalDoor" => $check,
  "sizedVolume" => "0.2",
  "sizedWeight" => $weight
);

$json = json_encode($data);

$url = ('https://api.dellin.ru/v1/public/calculator.json');
$ch = curl_init($url);

curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
$obj = json_decode($result);
curl_close($ch);
?>

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

<?php
if ($_POST['doors'] > 0 OR $_POST['doors_2'] > 0) {
  if (trim($code)) {
    $result = ('<p>Откуда: '.$obj->{'derival'}->{'terminal'}.'<br />
    Куда: '.$obj->{'arrival'}->{'terminal'}.'<br />
    Синих слонов: '.$_POST['blue'].' шт.<br />
    Зеленых слонов: '.$_POST['green'].' шт.<br />
    Общий вес: '.$weight.' кг<br />
    Срок доставки: '.$obj->{'time'}->{'nominative'}.'<br />
    Стоимость доставки: '.$obj->{'price'}.' руб.</p>');
    echo $result;
  }
  else {
    echo ('<p>Вы не указали населенный пункт или Вашего города нет в списке.</p>');
  }
}
else {
  echo ('<p>Вы не указали количество слонов.</p>');
}
?>

6,248 total views, 3 views today