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

Материал из Insales Wiki
Перейти к: навигация, поиск
(→‎Получение информации)
(→‎Пример реализации виджета)
 
(не показаны 54 промежуточные версии 2 участников)
Строка 1: Строка 1:
−
=Получение списка=
+
=Суть виджета=
  
−
Запрос: GET /admin/widgets.xml
+
 
 +
 
 +
[[Файл:Widget_screenshot.png|100px|thumb|left| пример виджета]]
 +
 
 +
 
 +
Виджет - это [http://htmlbook.ru/html/iframe iframe] выводимый на странице заказа в бэкофисе.
 +
 
 +
 
 +
Являясь по сути html блоком на странице - позволяет использовать html для форматирования и javascript для реализации какой-то логики.
 +
 
 +
 
 +
Для обмена данными с сервером приложения можно использовать [http://ru.wikipedia.org/wiki/JSON#JSONP_.26_JSONPP JSONP]
 +
 
 +
'''Описание полей:'''
 +
 
 +
''id'' - id виджета
 +
 
 +
''created_at'' - дата создания
 +
 
 +
''code'' - html содержимое виджета
 +
 
 +
''height'' - высота блока виджета
 +
 
 +
В  теле виджета доступна глобальная javascript переменная '''window.order_info''', содержащая сведения о текущем заказе.
 +
 
 +
=Получение списка виджетов=
 +
 
 +
Запрос: GET /admin/application_widgets.xml
  
 
Ответ:
 
Ответ:
Строка 7: Строка 34:
 
HTTP/1.1 200 OK
 
HTTP/1.1 200 OK
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?xml version="1.0" encoding="UTF-8"?>
−
<widgets type="array">
+
<application-widgets type="array">
−
    <widget>
+
  <application-widget>
−
        <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
+
    <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
−
        <id type="integer">1</id>
+
    <id type="integer">1</id>
−
        <widget-code>&lt;script&gt;alert(order_info.referer);&lt;/script&gt;</widget-code>
+
    <code>&amp;lt;script&amp;gt;alert(order_info.referer);&amp;lt;/script&amp;gt;</code>
−
     </widget>
+
     <height type="integer">60</height>
−
    <widget>
+
  </application-widget>
−
        <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
+
  <application-widget>
−
        <id type="integer">2</id>
+
    <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
−
        <widget-code>some widget code here</widget-code>
+
    <id type="integer">2</id>
−
     </widget>
+
    <code>some widget code here</code>
−
</widgets>
+
     <height type="integer">60</height>
 +
  </application-widget>
 +
</application-widgets>
 
</pre>
 
</pre>
  
−
=Получение информации=
+
=Получение информации о виджете=
  
−
Запрос: GET /admin/widgets/#{id}.xml
+
Запрос: GET /admin/application_widgets/#{id}.xml
  
 
Ответ:
 
Ответ:
Строка 29: Строка 58:
 
HTTP/1.1 200 OK
 
HTTP/1.1 200 OK
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?xml version="1.0" encoding="UTF-8"?>
−
<widget>
+
<application-widget>
−
    <id type="integer">831</id>
+
  <created-at type="datetime">2012-08-09T00:36:54+04:00</created-at>
−
    <created-at type="datetime">2010-07-29T18:17:45+04:00</created-at>
+
  <id type="integer">1</id>
−
    <widget-code>some widget code here</widget-code>
+
  <code>some html or javascript code here</code>
−
</widget>
+
  <height type="integer">60</height>
 +
</application-widget>
 
</pre>
 
</pre>
 +
 +
=Добавление виджета=
 +
 +
Запрос: POST /admin/application_widgets.xml
 +
<pre>
 +
<application-widget>
 +
  <code>some html or javascript code</code>
 +
  <height>60</height>
 +
</application-widget>
 +
</pre>
 +
 +
Ответ:
 +
<pre>
 +
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>
 +
</pre>
 +
 +
=Редактирование виджета=
 +
 +
Запрос: PUT /admin/application_widgets/#{id}.xml
 +
<pre>
 +
<application-widget>
 +
  <code>code changed</code>
 +
  <height>100</height>
 +
</application-widget>
 +
</pre>
 +
 +
Ответ:
 +
<pre>
 +
HTTP/1.1 200 OK
 +
</pre>
 +
 +
=Удаление виджета=
 +
 +
Запрос: DELETE /admin/application_widgets/#{id}.xml
 +
 +
Ответ:
 +
<pre>
 +
HTTP/1.1 200 OK
 +
</pre>
 +
 +
 +
=Пример реализации виджета=
 +
'''Задача:''' добавить виджет, запрашиваеющий данные  о статусе заказа с сервера приложения и выводящий результат.
 +
 +
'''1. HTML код виджета''':
 +
  <pre>
 +
  <!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></pre>
 +
 +
'''2. Добавление виджета в платформу'''
 +
 +
Перед тем как передать html код виджета через API в InSales, нужно предварительно заменить все символы '<' и '>' на соответствующие '&amp;lt;' и '&amp;gt;'. Для этого можно воспользоваться сервисом http://www.htmlescape.net/htmlescape_tool.html
 +
 +
После преобразования, добаляем наш виджет в InSales
 +
 +
Запрос: POST /admin/application_widgets.xml
 +
 +
<pre>
 +
<application-widget>
 +
<code>
 +
  &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;
 +
  &amp;lt;head&amp;gt;
 +
    &amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=utf-8&amp;quot;/&amp;gt;
 +
    &amp;lt;style&amp;gt;
 +
      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;
 +
      }
 +
    &amp;lt;/style&amp;gt;
 +
  &amp;lt;/head&amp;gt;
 +
  &amp;lt;body&amp;gt;
 +
    &amp;lt;p&amp;gt;Номер заказа: &amp;lt;b&amp;gt;&amp;lt;span id='order_number'&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/b&amp;gt;&amp;lt;/p&amp;gt;
 +
    &amp;lt;table id='statuses' style='border: 1px solid black;'&amp;gt;
 +
      &amp;lt;tr&amp;gt;
 +
        &amp;lt;th&amp;gt;Дата&amp;lt;/th&amp;gt;
 +
        &amp;lt;th&amp;gt;Статус&amp;lt;/th&amp;gt;
 +
      &amp;lt;/tr&amp;gt;
 +
    &amp;lt;/table&amp;gt;
 +
 +
    &amp;lt;script&amp;gt;
 +
      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= '&amp;lt;td&amp;gt;'+ key +'&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;'+ data[key] +'&amp;lt;/td&amp;gt;';
 +
          table.appendChild(new_tr);
 +
        }
 +
      }
 +
    &amp;lt;/script&amp;gt;
 +
  &amp;lt;/body&amp;gt;
 +
  &amp;lt;/html&amp;gt;
 +
</code>
 +
<height>60</height>
 +
</application-widget>
 +
</pre>
 +
 +
'''3. Результат'''[[Файл:Widget_realization_example.png|200px|thumb|left|Пример реализации виджета]]

Текущая версия на 06:54, 28 февраля 2014

Суть виджета

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


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


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


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

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

id - id виджета

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

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

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

В теле виджета доступна глобальная javascript переменная window.order_info, содержащая сведения о текущем заказе.

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

Запрос: 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>
  <height>60</height>
</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


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

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

1. HTML код виджета: 

  <!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>

2. Добавление виджета в платформу

Перед тем как передать html код виджета через API в InSales, нужно предварительно заменить все символы '<' и '>' на соответствующие '&lt;' и '&gt;'. Для этого можно воспользоваться сервисом http://www.htmlescape.net/htmlescape_tool.html

После преобразования, добаляем наш виджет в InSales

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

<application-widget>
<code>
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;
    &lt;style&gt;
      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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Номер заказа: &lt;b&gt;&lt;span id='order_number'&gt;&lt;span&gt;&lt;/b&gt;&lt;/p&gt;
    &lt;table id='statuses' style='border: 1px solid black;'&gt;
      &lt;tr&gt;
        &lt;th&gt;Дата&lt;/th&gt;
        &lt;th&gt;Статус&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

    &lt;script&gt;
      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= '&lt;td&gt;'+ key +'&lt;/td&gt;&lt;td&gt;'+ data[key] +'&lt;/td&gt;';
          table.appendChild(new_tr);
        }
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
</code>
<height>60</height>
</application-widget>
3. Результат
Пример реализации виджета
Источник — «https://wiki.insales.ru/index.php?title=InSales_API_-_Widgets&oldid=6706»