InSales API - Widgets — различия между версиями

Материал из Insales Wiki
Перейти к: навигация, поиск
(→‎Пример реализации виджета)
(→‎Пример реализации виджета)
Строка 130: Строка 130:
 
   </head>
 
   </head>
 
   <body>
 
   <body>
−
    <!-- html код виджета -->
+
     <p>Номер заказа: <b><span id='order_number'><span></b></p>
−
     <p>Номер заказа: <b><span id='order_number'>7693<span></b></p>
 
 
     <table id='statuses' style='border: 1px solid black;'>
 
     <table id='statuses' style='border: 1px solid black;'>
 
       <tr>
 
       <tr>
Строка 146: Строка 145:
 
       }
 
       }
 
       var table = document.getElementById('statuses');
 
       var table = document.getElementById('statuses');
 +
 +
      // устанавливаем номер заказа, используя id из переменной window.order_info
 +
      var order_number_field = document.getElementById('order_number');
 +
      order_number_field.innerHTML = window.order_info.id;     
  
 
       // подключаем скрипт который передаёт нам данные через JSONP
 
       // подключаем скрипт который передаёт нам данные через JSONP

Версия 12:46, 7 декабря 2012

Суть виджета

пример виджета


Виджет - это iframe выводимый на странице заказа в бэкофисе.


Являясь по сути html блоком на странице - позволяет использовать html для форматирования и javascript для реализации какой-то логики.


Для обмена данными с сервером приложения можно использовать JSONP

Описание полей:

id - id виджета

created_at - дата создания

code - html содержимое виджета

height - высота блока виджета

Получение списка виджетов

Запрос: GET /admin/application_widgets.xml

Ответ: 

HTTP/1.1 200 OK
<?xml version="1.0" encoding="UTF-8"?>
<application-widgets type="array">
  <application-widget>
    <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
    <id type="integer">1</id>
    <code>&lt;script&gt;alert(order_info.referer);&lt;/script&gt;</code>
    <height type="integer">60</height>
  </application-widget>
  <application-widget>
    <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
    <id type="integer">2</id>
    <code>some widget code here</code>
    <height type="integer">60</height>
  </application-widget>
</application-widgets>

Получение информации о виджете

Запрос: GET /admin/application_widgets/#{id}.xml

Ответ: 

HTTP/1.1 200 OK
<?xml version="1.0" encoding="UTF-8"?>
<application-widget>
  <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
  <id type="integer">1</id>
  <code>some html or javascript code here</code>
  <height type="integer">60</height>
</application-widget>

Добавление виджета

Запрос: POST /admin/application_widgets.xml 

<application-widget>
  <code>some html or javascript code</code>
</application-widget>

Ответ: 

HTTP/1.1 200 OK
<?xml version="1.0" encoding="UTF-8"?>
<application-widget>
  <created-at type="datetime">2012-08-09T17:26:48+04:00</created-at>
  <height type="integer">60</height>
  <id type="integer">6</id>
  <code>some html or javascript code</code>
</application-widget>

Редактирование виджета

Запрос: PUT /admin/application_widgets/#{id}.xml 

<application-widget>
  <code>code changed</code>
  <height>100</height>
</application-widget>

Ответ: 

HTTP/1.1 200 OK

Удаление виджета

Запрос: DELETE /admin/application_widgets/#{id}.xml

Ответ: 

HTTP/1.1 200 OK


Пример реализации виджета

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

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      table#statuses {
        border-collapse: collapse;
        border-right: 1px solid black;
        border-left: 1px solid black;
      }
      table#statuses td, table#statuses th {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p>Номер заказа: <b><span id='order_number'><span></b></p>
    <table id='statuses' style='border: 1px solid black;'>
      <tr>
        <th>Дата</th>
        <th>Статус</th>
      </tr>
    </table>

    <script>
      var data = {};
      // функция которая вызывается во внешнем js файле и устанавливает значение переменной data
      function set_data(input_object) {
        data = input_object;
      }
      var table = document.getElementById('statuses');

      // устанавливаем номер заказа, используя id из переменной window.order_info
      var order_number_field = document.getElementById('order_number');
      order_number_field.innerHTML = window.order_info.id;      

      // подключаем скрипт который передаёт нам данные через JSONP
      var script = document.createElement('script');
      script.src = 'http://www.insales.ru/assets/js/widget_example_jsonp_data.js';
      document.documentElement.appendChild(script);

      // после отработки внешнего скрипта, заполняем таблицу пришедшими данными
      script.onload = function() {
        for (var key in data) {
          var new_tr = document.createElement('tr');
          new_tr.innerHTML= '<td>'+ key +'</td><td>'+ data[key] +'</td>';
          table.appendChild(new_tr);
        }
      }
    </script>
  </body>
  </html>
Источник — «https://wiki.insales.ru/index.php?title=InSales_API_-_Widgets&oldid=6282»