Быстрый старт

Вход в личный кабинет и настройка приложения

Свяжитесь с нами и получите логин и пароль от личного кабинета, войдите в него по ссылке:

https://my.o3d.oasiscatalog.com/

Интеграция через iframe

В настройках приложения укажите (если ещё не указали) callback для заказов.

Перейдите во вкладку «Пользовательские поля» и добавьте элемент типа «кнопка» и отметьте галочку «Стандартная отправка заказа».

Внедрите на сайт iframe с атрибутом src следующего вида:

https://o3d.oasiscatalog.com/app/%appId%?article=%article%

где appId - ID вашего приложения, а article - артикул товара. Подробнее об этих и других URL-параметрах вы можете прочитать в документации.

Пример:

<iframe src="https://o3d.oasiscatalog.com/app/1?article=100750" frameborder="0" style="width: 100%; height: 400px;"></iframe>

Теперь напишите обработчик по указанному вами callback-адресу, для описания необходимой вам логики. Данные передаются в виде JSON-данных POST запросом в поле с именем `data`. Подробнее о структуре данных вы можете почитать в документации.

Интеграция через JavaScript API

Перейдите во вкладку «Пользовательские поля» и добавьте элемент типа «кнопка», галочку «Стандартная отправка заказа» отмечайте только в том случае, если хотите получать информацию о обработанном заказе таким же образом, как в iframe-интеграции.

Добавьте на страницу скрипт:

<script src="https://o3d.oasiscatalog.com/js/api/1.0/o3d.js"></script>

В необходимом для вас месте страницы укажите произвольный элемент:

<div id="o3d"></div>

И проинициализируйте его:

var o3d = new O3d({
    element: document.getElementById('o3d'),
    app: %appId%,
    article: '%article%'
});

где appId - ID вашего приложения, а article - артикул товара. Подробнее обо всех доступных опциях можно прочитать в документации.

Теперь вы можете выполнять различные действия через API, например:

console.log(o3d.getAreas()); // выводит список всех текущих областей и слоёв
o3d.submit(function (data) {
    console.log(data); // отправляет заказ, в data содержатся данные ответа от сервера
});

Подробнее о всех доступных методах и событиях читайте в документации.

Last updated