InSales API - Widgets — различия между версиями
Vt (обсуждение | вклад) (→Получение информации) |
(→Пример реализации виджета) |
||
(не показаны 54 промежуточные версии 2 участников) | |||
Строка 1: | Строка 1: | ||
− | = | + | =Суть виджета= |
− | Запрос: GET /admin/ | + | |
+ | |||
+ | [[Файл: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"> |
− | + | <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> | |
− | </widget> | + | <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> | |
− | </widget> | + | <code>some widget code here</code> |
− | </widgets> | + | <height type="integer">60</height> |
+ | </application-widget> | ||
+ | </application-widgets> | ||
</pre> | </pre> | ||
− | =Получение информации= | + | =Получение информации о виджете= |
− | Запрос: GET /admin/ | + | Запрос: 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> |
− | + | <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> | |
− | </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, нужно предварительно заменить все символы '<' и '>' на соответствующие '&lt;' и '&gt;'. Для этого можно воспользоваться сервисом http://www.htmlescape.net/htmlescape_tool.html | ||
+ | |||
+ | После преобразования, добаляем наш виджет в InSales | ||
+ | |||
+ | Запрос: POST /admin/application_widgets.xml | ||
+ | |||
+ | <pre> | ||
+ | <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> | ||
+ | </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><script>alert(order_info.referer);</script></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, нужно предварительно заменить все символы '<' и '>' на соответствующие '<' и '>'. Для этого можно воспользоваться сервисом http://www.htmlescape.net/htmlescape_tool.html
После преобразования, добаляем наш виджет в InSales
Запрос: POST /admin/application_widgets.xml
<application-widget> <code> <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> </code> <height>60</height> </application-widget>3. Результат