InSales API - Widgets — различия между версиями
Vt (обсуждение | вклад) (→Пример реализации виджета) |
Vt (обсуждение | вклад) (→Пример реализации виджета) |
||
Строка 130: | Строка 130: | ||
</head> | </head> | ||
<body> | <body> | ||
− | + | <p>Номер заказа: <b><span id='order_number'><span></b></p> | |
− | <p>Номер заказа: <b><span id='order_number'> | ||
<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><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> </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>