Виджет - это 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
Задача: добавить виджет, запрашивающий данные о статусе заказа с сервера приложения и выводящий результат.
<!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>
Перед тем как передать 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>
