Для разработчиков
Для разработчиков
Назначение данного раздела — описать способы взаимодействия с виджетом Веб-платформы по задуманому вами сценарию. Типичный процесс подключения, открытия и отслеживания виджета выглядит так:
1. Подключите скрипт external.script.js к вашему сайту. Его адрес будет доступен после добавления сайта в процессе настройки в администраторской панели Веб-Платформы, так же как и параметр id для подключения
2. Вставьте в необходимом месте на своём сайте код:
<script type="text/javascript"> // инициализируем виджет с параметрами WPInit({ id: 1, width: 400, type: 'modal' }) // сразу откроем его для пользователя WPOpenModal(); // вариант для модального окна // WPOpen(); // вариант для открытия в теле страницы. Используется при инициализации виджета с type: 'instant' // будем следить за состоянием виджета WPChange = function(response) { if (response.status == 'reserved') { // если заказ зарезирвирован, занесём данные из response.data.order_id себе на сайт } if (response.status == 'completed') { // если заказ оплачен, занесём данные из response.data.order_id себе на сайт } } </script>
Функции
WPInit({params})
Функция загрузки виджета с параметризацией, при создании необходимо передать id виджета, который можно найти в Административной панели
Минимальный способ инициализации:
- WPInit({ id: 1 })
Пример передаваемых данных:
Виджет можно инициализировать с различными параметрами, все из них опциональные, кроме id.
WPInit({ id: 1, width: 400, height: 600, type: 'modal' })
WPOpen({params})
Функция открытия виджета в каком-либо блоке, используется при инициализации виджета с type: 'instant'
Пример передаваемых данных:
// показ виджета с группой id 5 WPOpen({ groupid: [5] })
WPOpenModal({params})
Функция открытия виджета в модальном окне, используется при инициализации виджета с type: 'modal'
Пример передаваемых данных:
// показ виджета на нажатие кнопки с id "OpenButton" var OpenButton = document.getElementById('OpenButton'); OpenButton.onclick = function() { WPOpenModal({ tariffsid: [27, 28] }) }
WPChange({status, data})
Функция, которая вызывается каждый раз при изменении состояния виджета. Каждый раз передаёт в переменной response состояние в status и опционально данные в data. При переопределении этой функции у себя на странице, администратор может следить за состоянием виджета и статусом заказа из javascript
Примеры передаваемых данных:
- { status:'starting' } — виджет в процессе запуска, в этот момент определяется, что он должен в данный момент отображать
- { status:'started' } — виджет на начальном экране, где показывается список услуг для покупки
- { status:'reserved', data: { order_id: 2 } } — виджет находится на стадии забронированного заказ, в data передаётся id
- { status:'completed', data: { order_id: 2 } } — виджет находится на стадии оплаченного заказ, в data передаётся id заказа
Пример работы с данными:
WPChange = function(response) { if (response.status == 'starting') { // действие на внешней странице } if (response.status == 'started') { // действие на внешней странице } if (response.status == 'reserved') { // id зарезервированного заказа: response.data.order_id } if (response.status == 'completed') { // id оплаченного заказа: response.data.order_id } }
Параметры
Обязательные параметры WPInit
id: 1
id виджета, который можно узнать в Административной панели
Возможные параметры WPInit
height: 480
Высота виджета в пикселях, по умолчанию:
- 480px, если виджет запущен как type: 'modal'
- 100%, если виджет запущен как type: 'instant'
width: 640
Ширина виджета в пикселях, по умолчанию:
- 640px, если виджет запущен как type: 'modal'
- 100%, если виджет запущен как type: 'instant'