Получение полного списка всех настроенных виджетов, отображаемых на странице заказа в панели администратора, позволяет просматривать и управлять всеми доступными виджетами.
При получении детальной информации о конкретном виджете по его идентификатору можно узнать параметры и содержимое виджета.
Запрос:
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>
Добавление виджета
Виджет на странице заказа позволяет добавлять пользовательские HTML-блоки и JavaScript-код для вывода важной информации или необходимых дополнительных функций.
Запрос:
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>
Редактирование виджета
Обновление существующего виджета по его идентификатору позволяет изменять HTML-код, JavaScript-логику и размер виджета по высоте.
Удаление существующего виджета по его идентификатору необходимо для очистки карточки заказа от ненужных или устаревших виджеты.
Запрос:
DELETE /admin/application_widgets/\#{id}.xml
Ответ:
HTTP/1.1 200 OK
Пример реализации виджета
Задача: добавить виджет, запрашивающий данные о статусе заказа с сервера приложения и выводящий результат.
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>
Добавление виджета в платформу
Перед тем как передать 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>
Оценки: 1
27.07.2023 12:02
Комментарий
// подключаем скрипт который передаёт нам данные через JSONP
var script = document.createElement('script');
script.src = 'http://www.insales.ru/assets/js/widget_example_jsonp_data.js';
'http://www.insales.ru/assets/js/widget_example_jsonp_data.js'; *404* Крутой пример ставлю 10 из 10-и разработчиков!
Ответ разработчика:
Здравствуйте!
В script.src нужно передать свою ссылку на скрипт.
Написанный скрипт должен сформировать данные в формате JSONP и передать в функцию set_data.
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales Всё для продаж уже внутри!
