Softline CheckoutИнтеграцияDynamic Product Checkout API

Виджет кнопки Купить

Виджет кнопки Купить для перехода в корзину с динамическим продуктом

Обзор возможностей

Вы можете добавить кнопку на своей стороне, при нажатии на которую покупатель перейдет в корзину по ссылке на покупку динамического продукта.

Для этого разместите на своей странице код виджета. Перед этим подставьте в код переменные значения.

При открытии страницы с кнопкой в браузере пользователя будут выполнены запросы к API и получена ссылка на покупку. Узнайте подробнее о том, как работает виджет.

Код виджета

Вставьте этот код на страницу, на которой должна отображаться кнопка Купить.

Код состоит из двух частей:

Код для отображения кнопки
Код для получения ссылки на покупку

Вставьте обе части в код своей страницы, как описано далее.

Код для отображения кнопки

Этот код нужен для отображения кнопки на странице.

Код не требует подстановки переменных и может быть вставлен как есть.
Разместите его в том месте кода страницы, где должна быть отображена кнопка.
Вы можете добавить свое оформление с помощью css и изменить текст, чтобы отобразить кнопку в стиле вашего сайта.
Параметр id содержит идентификатор ссылки. После выполнения кода виджета в атрибут href элемента с этим идентификатором будет подставлена ссылка на корзину, полученная от Dynamic Product Checkout API.

<a id="linkElementID">Купить</a>

Код для получения ссылки

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

Подставьте переменные значения в код.
Вставьте код в любое место страницы. Рекомендуем вставить этот фрагмент в конец <body>.

<script src = "https://js.ecommerce.softline.com/v1/widget.min.js">  </script>
<script>
// Data for authorization via Authentication API
var authData = {
 "username": "demo", // Your username
 "password": "1234" // Your password
};

// Data for a request to the Dynamic Product Checkout API
var productData = {
 "currency": "RUB", // Checkout currency
 "products": [{
   "id": 11111, // Original product ID
   "name": "Demo Product", // Product name
   "price": "30.00", // Price per product unite
   "quantity": 1 // Product quantity
  }
 ]
};

SLWidget.init(
 authData,
 "v1", // API version
 'https://api.ecommerce.softline.com/' // Endpoint Domain Name
);

SLWidget.run(
 "DynamicProduct", {
 elementID: "linkElementID",
 productData: productData
});

// Listen authorization result
document.body.addEventListener('auth-complete', function (e) {
 console.log(e.detail);

 if (e.detail.status === 'done') {
  // success code
  console.log('Auth complete');
 } else {
  // failure code
  console.log(e.detail.errorCode);
 }
});

// Listen basket generation result
document.getElementById('linkElementID').addEventListener('dynamic-product-complete', function (e) {
 console.log(e.detail);

 if (e.detail.status === 'done') {
  // success code
  console.log(e.detail.buylink);
 } else {
  // failure code
  console.log(e.detail.errorCode);
 }
});
</script>

Подстановка значений

Для работы виджета в его код должны быть подставлены следующие значения:

Данные для подключения внешней JS-библиотеки
Данные для авторизации
Данные для взаимодействия
Данные для получения ссылки на покупку динамического продукта

Данные для подключения внешней JS-библиотеки

Для работы виджета требуется подключить внешнюю JS-библитеку. Ссылка на адрес библиотеки содержится в элементе вида:

<script src="https://js.ecommerce.softline.com/v1/widget.min.js"></script>

В примере используется ссылка на библиотеку на боевом контуре.

Если вы хотите подключить библиотеку из тестового окружения, то замените ссылку на https://js.ecommerce.softline.com.demoslweb.com/v1/widget.min.js.

Данные для авторизации

В переменной authData заполните логин и пароль для авторизации через Authentication API. Это те же значения, которые вы передаете в параметрах username и password при получении токена авторизации.

Пример переменной authData

// Data for authorization via Authentication API
var authData = {
 "username": "demo", // Your username
 "password": "1234" // Your password
};

Данные для взаимодействия

В методе SLWidget.init заполните данные для взаимодействия.

Пример метода SLWidget.init

SLWidget.init(
 authData,
 "v1", // API Version
 'https://api.ecommerce.softline.com/', // Endpoint Domain Name
 true // test mode Switch
);

authData

variable

required

Название переменной, в которой содержатся данные для авторизации. Не меняйте это значение.

[apiVersion]

string

required

Версия API, к которой будут отправляться запросы. Актуальная версия: v1

[baseURL]

Доменное имя, которое будет подставлено в Endpoint URL для выполнения запроса к API.

По умолчанию равно https://api.ecommerce.softline.com/ - запросы выполняются в боевом окружении.
Измените на https://api.ecommerce.softline.com.demo.slweb.ru/ - если хотите, чтобы запросы были выполнены в тестовом окружении.

[testMode]

boolean

Включение/выключение тестового режима работы.
Варианты значений:

true – в консоль будет выводиться дополнительная информация о совершающихся запросах и ответах на них.
false – в консоль не выводятся дополнительные данные.

Если не передано, то true.

Данные для получения ссылки на покупку динамического продукта

В переменную productData вставьте код тела запроса к Dynamic Product Checkout API. Этот код содержит данные, необходимые для генерации ссылки на покупку.

Подставьте в код запроса переменные значения. Вы можете использовать только обязательные поля, как в примере далее. Или использовать полный набор параметров, который поддерживает запрос (в том числе передать два продукта и данные покупателя). Описание параметров и дополнительные примеры см. в описании запроса.

Пример переменной productData (минимальный набор данных)

// Data for a request to the Dynamic Product Checkout API
var productData = {
 "currency": "RUB", // Checkout currency
 "products": [{
   "id": 11111, // Original product ID
   "name": "Demo Product", // Product name
   "price": "30.00", // Price per product unite
   "quantity": 1 // Product quantity
  }
 ]
};

Как это работает

При открытии страницы, на которой расположена кнопка, происходит вызов метода SLWidget.init, который делает запрос к Authentication API и получает авторизационной токен.
В результате на элементе body будет сгенерировано событие auth-complete, которое содержит дополнительную информацию в details:
- status - статус выполнения операции: done в случай успеха или fail в случае ошибки.
- errorCode - код ошибки (передается только в случае ошибки).
Если авторизационный токен успешно получен, то происходит вызов метода SLWidget.run, который делает запрос к Dynamic Product Checkout API и получает ссылку на покупку динамического продукта.
В результате на элементе linkElementID будет сгенерировано событие dynamic-product-complete, которое содержит дополнительную информацию в details:
- status - статус выполнения операции: done в случай успеха или fail в случае ошибки.
- buylink - ссылка на добавление динамического продукта в корзину (передается только в случае успешной обработки).
- errorCode - код ошибки (передается только в случае ошибки).
Если ссылка успешно получена, то:
- В код кнопки будет подставлена ссылка: в аттрибут href элемента с id=linkElementID будет передан URL корзины.
- При нажатии на кнопку покупатель перейдет по этой ссылке.

В случае, если при обработке произошли ошибки:

В кнопку не будет подставлена ссылка. При нажатии на кнопку ничего не произойдет.
На странице не будет отображено ошибок, которые мог бы увидеть покупатель.
Вы можете включить тестовый режим работы и посмотреть информацию об ошибках в консоли. Для этого передайте в методе SLWidget.init значение true.