Перейти к содержанию

Модули и методы JS

В документе описывется JavaScript API для управления формой отзывa на вашем сайте, отображением виджетов, а также отслеживание различных событий.

Модули предоставляют доступ к низкоуровневому API скрипта. Используйте этот API, если ваш сайт использует подгрузку контента с помощью AJAX.

Доступ к модулю осуществляется через вызов:

1
Shoppilot.require('module_name');

Доступны следующие модули:

Модуль Описание
omnibox Омнибокс — всплывающий виджет с разными формами (отзыв, вопрос, ответ)
(type)_widget Статические виджеты, встраиваемые в страницу
multi_widget Специальный виджет, позволяющий загружать много виджетов одним запросом
events Отслеживание событий
user_config Пользовательские настройки

Омнибокс

Модуль omnibox предоставляет методы для управления поведением Омнибокса.

send(command)

Отправляет соответствующую команду Омнибоксу.

Параметры:

Параметр Описание Возможные значения
command Команда showQuestionForm, showReviewForm

Пример вызова:

1
2
3
var omnibox = Shoppilot.require('omnibox');
// отобразить форму отзыва
omnibox.send('showReviewForm');

setContext(options)

Меняет контекст Омнибокса. Следует использовать при AJAX-навигации на сайте.

Параметр Описание Возможные значения
options.type Контекст product, category, store, brand
options.id ID объекта

Пример вызова:

1
2
3
var omnibox = Shoppilot.require('omnibox');
//  Новый контекст — товар с id=123
omnibox.setContext({type: 'product', id: '123'});

backgroundLogin()

Начинает процедуру Single Sign-On в невидимом iFrame. В случае успешного логина при сабмите формы в Омнибоксе аутентификация не потребуется.

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

isLoggedIn()

Возвращает Promise. Пример вызова:

1
2
3
4
5
6
7
var LOGGED_IN_TO_WEBSITE; // TODO
var Omnibox = Shoppilot.require('omnibox');
Omnibox.isLoggedIn().then(function (logged_in_to_shoppilot) {
  if (LOGGED_IN_TO_WEBSITE && !logged_in_to_shoppilot) {
    Omnibox.backgroundLogin();
  }
});

Виджет

Для каждого контекста есть свой модуль: product_widget,category_widget, brand_widget, store_widget. Методы модулей идентичны.

new Widget(options)

Конструктор виджета.

Параметр Описание
options Объект с параметрами
options.name Системное имя виджета
options.onDone Success-callback
options.onFail Fail-callback
options.product_id Если контекст product
options.category_id Если контекст category
options.brand_name Если контекст brand
options.container CSS селектор или DOM элемент

Параметр options.container указывается только при использовании мульти-виджета (см. ниже).

Пример вызова:

1
2
var ProductWidget = Shoppilot.require('product_widget');
var product_reviews = new ProductWidget({name: 'product-reviews', product_id: '123'});

Info

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

appendTo(container)

Вставляет видежет в DOM дерево. Возвращает Promise.

Параметр Описание
container CSS селектор или DOM элемент

Пример вызова:

1
2
3
var ProductWidget = Shoppilot.require('product_widget');
var w = new ProductWidget({name: 'product_reviews', product_id: '123'});
w.append_to("#product-reviews"); // <div id="product-reviews"></div>

Мульти-виджет

Модуль multi_widget позволяет получить несколько виджетов одним запросом. Это очень удобно, когда на странице больше одного виджета.

render(widgets)

Добавить в DOM дерево несколько виджетов.

Параметр Описание
widgets Массив объектов типа Widget (см. выше)

Пример вызова:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var ProductWidget = Shoppilot.require('product_widget');
var inline_rating = new ProductWidget({
  name: 'inline-rating',
  product_id: '123',
  container: '.inline-rating'
});
var product_reviews = new ProductWidget({
  name: 'product-reviews',
  product_id: '123',
  container: '.product-reviews'
});

var MultiWidget = Shoppilot.require('multi_widget');
MultiWidget.render([inline_rating, product_reviews]);

Отслеживание событий

Модуль events позволяет отслеживать события виджетов и омнибокса.

on(event_name, callback)

Параметр Описание
event_name Имя отслеживаемого события
callback Функция обратного вызова

Возможные значения параметра event_name:

Название события Описание
widget.impression Просмотр виджета
widget.render Отрисовка виджета на странице
widget.review.vote Клик по like/dislike в отзыве
omnibox.close Закрытие Омнибокса
omnibox.review_form.open Открытие формы отзыва
omnibox.review_form.submit Сабмит формы отзыва
omnibox.review_form.reject Ошибка при создании отзыва
omnibox.review_form.accept Успешное создание отзыва
omnibox.question_form.open Открытие формы вопроса
omnibox.question_form.submit Сабмит формы вопроса
omnibox.question_form.reject Ошибка при создании вопроса
omnibox.question_form.accept Успешное создание вопроса

Параметры функции обратного вызова callback(event)

Параметр Описание
event Объект-событие
event.name Имя события
event.data Данные, ассоциированные с данным событием

Пример перехвата события «просмотр отзывов»:

1
2
3
4
5
6
var events = Shoppilot.require('events');
events.on('widget.impression', function (event) {
  var widget = event.data.widget;
  // отправляем событие в Google Analytics
  ga('send', 'event', 'widget-' + widget.name, 'impression');
});

Пример перехвата события «открытие формы отзыва»:

1
2
3
4
5
var events = Shoppilot.require('events');
events.on('omnibox.review_form.open', function (event) {
  // отправляем событие в Google Analytics
  ga('send', 'event', 'review form', 'open');
});

Пользовательские настройки

Danger

Это приватное API, оно может меняться. Используйте на свой страх и риск.

Модуль user_config позволяет добавить или изменить некоторые настройки по умолчанию.

set(key, value)

Устанавливает или изменяет параметр по умолчанию

Параметр Описание
key Название параметра
value Значение параметра

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

1
2
var config = Shoppilot.require('user_config');
config.set('review_custom_attributes', {shop: {string: 'Магазин Химки'}});

На странице отзывов во вкладке «Пользовательские атрибуты» вы увидите атрибут shop: Магазин Химки.