Исходный код вики Для разработчиков
Версия 4.1 от Михаил Галич на 11.12.2023, 13:53
Последние авторы
author | version | line-number | content |
---|---|---|---|
1 | == Для разработчиков == | ||
2 | |||
3 | Назначение данного раздела — описать способы взаимодействия с виджетом Веб-платформы по задуманому вами сценарию. Типичный процесс подключения, открытия и отслеживания виджета выглядит так: | ||
4 | |||
5 | ~1. Подключите скрипт external.script.js к вашему сайту. Его адрес будет доступен **после добавления сайта** в процессе настройки в **администраторской панели Веб-Платформы**, так же как и параметр id для подключения | ||
6 | |||
7 | 2. Вставьте в необходимом месте на своём сайте код: | ||
8 | |||
9 | {{{<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>}}} | ||
10 | |||
11 | |||
12 | == Функции == | ||
13 | |||
14 | === WPInit({params}) === | ||
15 | |||
16 | Функция загрузки виджета с параметризацией, при создании необходимо передать id виджета, который можно найти в Административной панели | ||
17 | |||
18 | ===== Минимальный способ инициализации: ===== | ||
19 | |||
20 | * WPInit({ id: 1 }) | ||
21 | |||
22 | ===== Пример передаваемых данных: ===== | ||
23 | |||
24 | Виджет можно инициализировать с различными параметрами, все из них опциональные, кроме id. | ||
25 | |||
26 | {{{WPInit({ | ||
27 | id: 1, | ||
28 | width: 400, | ||
29 | height: 600, | ||
30 | type: 'modal' | ||
31 | })}}} | ||
32 | |||
33 | === WPOpen({params}) === | ||
34 | |||
35 | Функция открытия виджета в каком-либо блоке, используется при инициализации виджета с type: 'instant' | ||
36 | |||
37 | ===== Пример передаваемых данных: ===== | ||
38 | |||
39 | {{{// показ виджета с группой id 5 | ||
40 | WPOpen({ | ||
41 | groupid: [5] | ||
42 | })}}} | ||
43 | |||
44 | === WPOpenModal({params}) === | ||
45 | |||
46 | Функция открытия виджета в модальном окне, используется при инициализации виджета с type: 'modal' | ||
47 | |||
48 | ===== Пример передаваемых данных: ===== | ||
49 | |||
50 | {{{// показ виджета на нажатие кнопки с id "OpenButton" var OpenButton = document.getElementById('OpenButton'); OpenButton.onclick = function() { WPOpenModal({ tariffsid: [27, 28] }) }}}} | ||
51 | |||
52 | === WPChange({status, data}) === | ||
53 | |||
54 | Функция, которая вызывается каждый раз при изменении состояния виджета. Каждый раз передаёт в переменной response состояние в status и опционально данные в data. При переопределении этой функции у себя на странице, администратор может следить за состоянием виджета и статусом заказа из javascript | ||
55 | |||
56 | ===== Примеры передаваемых данных: ===== | ||
57 | |||
58 | * { status:'starting' } — виджет в процессе запуска, в этот момент определяется, что он должен в данный момент отображать | ||
59 | * { status:'started' } — виджет на начальном экране, где показывается список услуг для покупки | ||
60 | * { status:'reserved', data: { order_id: 2 } } — виджет находится на стадии забронированного заказ, в data передаётся id | ||
61 | * { status:'completed', data: { order_id: 2 } } — виджет находится на стадии оплаченного заказ, в data передаётся id заказа | ||
62 | |||
63 | ===== Пример работы с данными: ===== | ||
64 | |||
65 | {{{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 } }}}} | ||
66 | |||
67 | == Параметры == | ||
68 | |||
69 | ==== Обязательные параметры WPInit ==== | ||
70 | |||
71 | ==== id: 1 ==== | ||
72 | |||
73 | id виджета, который можно узнать в Административной панели | ||
74 | |||
75 | ==== Возможные параметры WPInit ==== | ||
76 | |||
77 | ==== height: 480 ==== | ||
78 | |||
79 | Высота виджета в пикселях, по умолчанию: | ||
80 | |||
81 | * 480px, если виджет запущен как type: 'modal' | ||
82 | * 100%, если виджет запущен как type: 'instant' | ||
83 | |||
84 | ==== width: 640 ==== | ||
85 | |||
86 | Ширина виджета в пикселях, по умолчанию: | ||
87 | |||
88 | * 640px, если виджет запущен как type: 'modal' | ||
89 | * 100%, если виджет запущен как type: 'instant' | ||
90 | |||
91 |