Получение статуса заказа на своем сайте из remonline.ru

Сервис "Ремонт Онлайн" предназначен для ведения учета заказов сервисных центров и ремонтных мастерских.

Обо всех плюсах и возможностях можно узнать у них на сайте.

Готовый пример можно посмотреть на сайте мастерской по ремонту MacBook.

Удаленное управление заказами

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

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

Документация по API составлена хорошо. Информации в этом разделе вполне достаточно для большинства задач.

Для работы с API будем использовать JavaScript + PHP. Вообще данный код использовался в CMS MODX, но подход может быть аналогичен и в других системах управления.

Возьмем простой HTML-код формы:

<h3>Поверить статус заказа</h3>

<p>Введите номер телефона, указанный в заказе:</p>
<form id="get-order" class="form">
 
 <div class="form-group">
   <input id="phone" type="text" value="" class="form-control" disabled />
 </div>
 
 <div class="form-group">
   <button type="submit" class="btn btn-block btn-info">Статус заказа</button>
 </div>
 
</form>

<!-- Блок для вывода информации -->
<div id="status-order">
</div>

В данном случае для вывода информации создан отдельный блок "status-order". Именно в него мы будем записывать полученную информацию.

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

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

window.onload = function() {

  var form = document.getElementById('get-order');
  var input = document.getElementById('phone');
 
  form.addEventListener('submit', function(e) {
    e.preventDefault(); //отменяем стандартный sumbit
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'remonline', false);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("phone="+input.value);
 
    if (xhr.status != 200) {
      alert( xhr.status + ': ' + xhr.statusText );
    } else {
      var output = document.getElementById('status-order');
      output.innerHTML = xhr.responseText;
    }
  }, false);
}

При нажатии кнопки "Статус заказа" в форме JavaScript перехватывает событие формы submit и отменяет его.

Вместо этого при помощи XMLHttpRequest-запроса обращаемся по ссылке вида http://yoursite.ru/remonline.

В MODX я создал плагин AJAX, который срабатывает на событие OnPageNotFound и содержит следующий код:

/* плагин AJAX */
switch($_GET['q']){ 
 case 'remonline':
 $config = array(
 'phone' => $_POST['phone']
 );
 echo $modx->runSnippet('getOrder' ,$config);
 break;
}
die();

Идея данного плагина: при попытки открыть страницу, которая не существует, срабатывает событие OnPageNotFound и запускается код этого плагина.

В плагине проверяется адрес обращения и запускается соответствующая ветка оператора switch. Чертовски удобная вещь!

В нашем случае срабатывает case 'remonline' и запускается сниппет getOrder. Сниппет является обычным куском кода PHP:

<?php

/* сниппет getOrder */

if( $curl = curl_init() ) {
 
 // информация о телефоне приходит в параметре $phone
 
 // получаем токен
 curl_setopt($curl, CURLOPT_URL, 'https://api.remonline.ru/token/new');
 curl_setopt($curl, CURLOPT_RETURNTRANSFER,true);
 curl_setopt($curl, CURLOPT_POST, true);
 curl_setopt($curl, CURLOPT_POSTFIELDS, "api_key=ВАШ_API_КЛЮЧ");
 $res = curl_exec($curl);

 curl_close($curl);
 
 $arr = json_decode($res, true);
 $token = $arr['token'];
 
 // получаем информацию о заказе
 $url="https://api.remonline.ru/order/?token=".$token."&client_phones[]=".$phone;
 $ch2 = curl_init();
 curl_setopt($ch2, CURLOPT_URL, $url);
 curl_setopt($ch2, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch2, CURLOPT_USERAGENT,'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
 $json = curl_exec($ch2);

$data = json_decode($json, true);
 
 if ($data['count'] === 0) {
   echo 'Заказы по указанным данным не найдены';
 } else {
   $output = "<table class='table'><tr><td>Номер заказа</td><td>Статус</td></tr>";
   for ($i=0; $i<$data['count']; $i++) {
     $output .= "<tr><td>".$data['data'][$i]['id_label']."</td><td>".$data['data'][$i]['status']['name']."</td></tr>";
   }
   $output .= "</table>";
   echo $output;
 }
 
 curl_close($ch2);
 
} else {
 echo 'curl not work'; 
}
?>

Вместо "ВАШ_API_КЛЮЧ" необходимо указать ваш API ключ в сервисе remonline. Получить его можно в личном кабинете сервиса.

Формат ввода данных в форму

Остался еще один не решенный вопрос: формат ввода номера телефона в форму для запроса.

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

Для решения этой задачи можно воспользоваться библиотекой Masked Input JS.

В ней можно задать жестко форму ввода данных в элемент input.

Итоговый код JavaScript для обработки формы будет выглядеть так:

window.onload = function() {
 
 // формат ввода данных в input
 $("#phone").prop('disabled', false).mask("(999)999-99-99");
 
 var form = document.getElementById('get-order');
 var input = document.getElementById('phone');
 
 form.addEventListener('submit', function(e) {
  e.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'remonline', false);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("phone="+input.value);
 
  if (xhr.status != 200) {
   alert( xhr.status + ': ' + xhr.statusText );
  } else {
   var output = document.getElementById('status-order');
   output.innerHTML = xhr.responseText;
  }
 }, false); 

Теперь все должно работать.

Повторюсь, готовый пример можно посмотреть на сайте мастерской по ремонту MacBook.

Если есть вопросы по реализации, то пишите в комментарии.