Установка скрипта

У скрипта, который устанавливается на ваш сайт, 2 ответственности:

  • Отображать виджеты. Читайте далее.
  • Отображать веб-формы (отзыв, вопрос, ответ, комментарий).
<script>
  (function() {
    // Инициализация
    window._shoppilot = window._shoppilot || [];

    // Команды скрипта
    // …

    // Основная часть скрипта
    var store_id = '<?= STORE_ID ?>';
    var theme_id = 'default';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = '//get.shoppilot.ru/f/v1/'
      + store_id + '/' + theme_id + '/app.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
</script>

Комментарии к коду

  • STORE_ID — идентификатор витрины вашего интернет-магазина
  • Команды скрипта всегда вызываются до кода загрузки скрипта

Команды скрипта

Команды скрипта — это упрощенный способ вызова функий JS API. Команды должны быть расположены после инициализации, но до основной части. Они обрабатываются лишь один раз, сразу после того, как скрипт загрузится.

Пример вызова команды:

_shoppilot.push(['command', 'arg1', 'arg2', 'arg3']);
_setProductId
// <offer id="abc123"></offer> в YML файле
_shoppilot.push(['_setProductId', 'abc123']);

Выставляет товар c ID abc123 как контекст страницы. Используется на карточках товара.

Омнибокс будет работать в контексте этого товара. Товарные виджеты будут отображать контент для этого товара.

_setCategoryId
// <category id="321"></category> в YML файле
_shoppilot.push(['_setCategoryId', '321']);

Выставляет категорию c ID abc123 как контекст страницы. Используется на листингах категории.

_setBrandName
// <offer id="abc123"><vendor>Samsung</vendor></offer> в YML файле
_shoppilot.push(['_setBrandName', 'Samsung']);

Выставляет бренд Samsung как контекст страницы. Используется на листингах бренда.

_addProductWidget
_shoppilot.push(['_setProductId', 'abc123']);

// Добавит виджет product-reviews для товара abc123 в элемент с ID "product-reviews"
_shoppilot.push(['_addProductWidget', 'product-reviews', '#product-reviews']);

// Добавит виджет questions для товара abc123 в элемент с ID "product-questions"
_shoppilot.push(['_addProductWidget', 'questions', '#product-questions']);

// Добавит виджет inline-rating для товара qwe890 в элемент с классом "inline-rating-qwe890"
_shoppilot.push(['_addProductWidget', 'inline-rating', '.inline-rating-qwe890', {product_id: 'qwe890'}])

Добавляет виджет для товара. Контекст будет взят из глобально установленного значения или может быть переопределен через options.product_id.

_addCategoryWidget
_shoppilot.push(['_setCategoryId', '55']);

// Добавит виджет category-reviews для категории 55 в элемент с ID "category-reviews"
_shoppilot.push(['_addCategoryWidget', 'category-reviews', '#category-reviews']);

Добавляет виджет для категории. Контекст будет взят из глобально установленного значения или может быть переопределен через options.category_id.

_addBrandWidget
_shoppilot.push(['_setBrandName', 'LG']);

// Добавит виджет brand-reviews для бренда LG в элемент <div data-brand-reviews></div>
_shoppilot.push(['_addBrandWidget', 'brand-reviews', 'div[data-brand-reviews]']);

Добавляет виджет для бренда. Контекст будет взят из глобально установленного значения или может быть переопределен через options.brand_name.

_addStoreWidget
// Добавит виджет store-review в элемент с ID "store-reviews"
_shoppilot.push(['_addStoreWidget', 'brand-reviews', '#store-reviews']);

Добавляет виджет для витрины. Контекстом будет сам магазин (сайт).

_addStyles
_shoppilot.push(['_addStyles', 'widgets']);

Добавляет на страницу необходимые для виджетов стили.

_setOnReady
_shoppilot.push(['_setOnReady', function (Shoppilot) {
  // API готово к работе
  // Shoppilot.require(…)
}]);

Задает функцию-callback, которая будет вызвана по завершении инициализации скрипта.

_setOnReady & Promises
<!-- Вверху страницы -->
<script>
  var ShoppilotAPI = $.Deferred();
</script>

<!-- Какой-то код, использующий Shoppilot API -->
<script>
  ShoppilotAPI.then(function (Shoppilot) {
    var ProductWidget = Shoppilot.require('product_widget');
    // ...
  });
</script>

<!-- Скрипт Shoppilot -->
<script>
  // ...
  window._shoppilot = window._shoppilot || [];
  _shoppilot.push(['_setOnReady', function (Shoppilot) {
    ShoppilotAPI.resolve(Shoppilot);
  }]);
  // ...
</script>

results matching ""

    No results matching ""