White Label by book24.ru

Документация к партнерским виджетам book24.ru

Конфигурация

Далее по коду объект settings соответствует такому объекту:

 var settings = {
    xToken: '{нужно уточнять отдельно}',
    apiUrl: 'https://demo.book24.ru/api/v1/',
    // ссылка на каталог для пустой корзины
    linkToCatalog: 'https://demo.book24.ru/catalog/',
    // Логотип в шапке виджета оформления и корзины, этот параметр указывает куда 
    // переходить по клику на него
    redirectLogo: '/',
    // Неоходимо на конце ссылки добавить /#/ для корректной работы
    linkToBasket: 'https://demo.book24.ru/personal/cart/#/',
    basicAuth: '{нужно уточнять отдельно}',
    dataAttributeName: 'data-book24-widget',
    prefixLog: 'Book24Widget:',
    img: {
       // Путь для картинок которые показываются при загрузке товаров
       productItemLoading: 'item-loading.jpg',
       productItemNotFound: 'item-not-picture.jpg',
       // Логотипы
       logo: 'logo.png',
       logo2x: 'logo@2x.png',
       logoMobile: 'logo_mobile.svg',
     }
  };

Сертификат

Для того чтобы виджеты корректно работали в safari и chrome 84+, необходимо сделать следующее:

  1. Создать поддомен, например api.yourdomain.com

  2. Далее прописать в DNS: api.yourdomain.com IN CNAME api.book24.ru

  3. Предоставить SSL сертификат контактному лицу по партнерской программе.

0. Корзина и оформление заказа

Для успешного функционирования виджета необходимо подключить два JavaScript скрипта, а также сконфигурировать их.

Обработчик событий

Начнем с первого скрипта, это обработчик добавления товара и обновления значка корзины. Его необходимо подключать на страницу товаров/товара:

<script src="book24-widget-handlers.js"></script>

Затем настроить:

new Book24WidgetHandlers(settings);

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

<button data-book24-widget="${ID}" 
        data-book24-widget-product-type="product"
        class="book24-widget-basket-btn">Добавить в корзину
</button>

Для корректной работы мобильной версии корзины необходимо добавить мета-тег:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Работа с предзаказами

Для того чтобы можно было оформить предзаказ, нужно добавить дополнительный атрибут data-book24-widget-preorder-action с полной ссылкой на товар для предзаказа. Далее надо изменить значение атрибута data-book24-widget-product-type на preorder:

<button data-book24-widget="${ID}" 
        data-book24-widget-product-type="preorder"
        data-book24-widget-preorder-action="checkout"
        class="book24-widget-basket-btn book24-widget-basket-btn--preorder">
        Оформить предзаказ
</button>

При успешном добавлении в корзину эмитится событие product-add-successful с ID товара:

 document.addEventListener('product-add-successful', function (e) {
   console.info(e.detail);
 })

Где ID это id конкретного продукта полученного по апи.

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

<div class="book24-widget-container-right">
   <a class="book24-widget-track-order" href="#">Отследить заказ</a>
   <button class="book24-widget-basket-mini">
       <span class="book24-widget-basket-mini__counter">0</span>
   </button>
</div>

Виджет так же эмитит событие trackEvent:

document.addEventListener('trackEvent', function (e) {
  console.info('[trackEvent] ' + e.detail.data.type + ': ', e.detail.data.info);
})

В объект события приходит тип e.detail.data.type и данные корзины e.detail.data.info

Типы события есть следующие:

  1. product-add-successful

Стили

Так же для этого виджета есть возможность подключить стили по желанию, если нужна дефолтная стилизацию то нужно подключить в шапку файл book24-widget-handlers.css

<link rel="stylesheet" href="book24-widget-handlers.css" />

Корзина

Для подключения необходимо на страницу(пустую страницу) где будет находится будущая корзина добавить в body следующую разметку:

<div id=book24-widget-app></div>

Затем перед закрывающим тегом body добавить ряд скриптов: Полифилл для работы Object.assign в IE 11 (Опционально если не надо поддерживать)

<script src="//polyfill.io/v3/polyfill.min.js?flags=gated&rum=true&features=default%2CObject.assign"></script>

Скрипт с настройкой корзины:

<script>
var book24WidgetBasket = document.getElementById('book24-widget-app');

localStorage.setItem('book24BasketSettings', JSON.stringify(settings));

book24WidgetBasket.addEventListener('book24ProductsLoaded', function (e) {
  /* Это слушатель кастомного события  'book24ProductsLoaded' которое срабатывает при
      изменения товаров в корзине, в массиве e.detail.data.productsIds хранятся  NOMCODE
      каждого товара.
      Это нужно для возможности изменять ссылки на товары в корзине.
      Так же для этих целей у всех ссылок есть data-атрибут, data-book24-product-nomcode
      с конкретным кодом каждого товара для более удобного доступа */
  console.info('Список NOMCODE товаров: ', e.detail.data.productsIds);
});
</script>

И наконец сам скрипт корзины:

<script src="book24-widget-app.min.js"></script>

Логотип магазина

Для того чтобы изменить логотип в корзине на свой, необходимо рядом cbook24-widget-app.min.js положить два png файла, logo.png и logo@2x.png для ретины. Если 2x логотипа нет, используйте 1x но название должно быть как написано выше.

0.1 События для отслеживания действий с корзиной

Корзина эмитит событие trackEvent на различные действия с корзиной и оформлением:

var book24WidgetBasket = document.getElementById('book24-widget-app');

book24WidgetBasket.addEventListener('trackEvent', function (e) {
  console.info('[trackEvent] ' + e.detail.data.type + ': ', e.detail.data.info);
})

В объект события приходит тип e.detail.data.type и данные корзины e.detail.data.info

Типы события есть следующие:

  1. view-basket - просмотр корзины

  2. change-quantity - изменение количества товара в большую или меньшую сторону

  3. remove-all-products - удаление всех товаров разом

  4. remove-product - удаление одного товара

  5. add-promocode - добавление промокода

  6. remove-promocode - удаление промокода

  7. restore-product - восстановление удаленного продукта

  8. restore-products - восстановление всех продуктов

  9. user-register- переход с шага заполнения данных пользователя на шаг доставки (триггер - кнопка "Далее" на странице заполнения данных пользователя)

  10. delivery-selected - переход с шага доставки на шаг оплаты (триггер - кнопка "Далее" на странице доставки)

  11. payment-selected - переход с шага оплаты на шаг подтверждения заказа (триггер - кнопка "Далее" на странице оплаты)

  12. order-save - событие срабатывает при успешном оформлении заказа(триггер - кнопка "Подтвердить заказа"), в payload событие находится объект с FUSER_ID и ORDER_ID

  13. device-type-change событие срабатывает при изменении ширины браузера.

1.Виджет выбора города

Нужно разместить следующую разметку в том месте где нужен выбор города (обычно это шапка):

<div id="book24-widget-location"></div>

После надо добавить настройки:

localStorage.setItem('book24LocationSettings', JSON.stringify(settings));

Затем подключить скрипт с названием book24-widget-location.min.js после настроек.

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

<!-- Сначала скрипты виджетов-->
<script src="book24-widget-handlers.js"></script>
<script src="book24-widget-delivery.js"></script>
<script>
    // Потом настройки 
</script>
<!-- Скрипт локации на последнем месте -->
<script src="book24-widget-location.min.js"></script>

На этом настройка закончена.

Как только пользователь будет изменять город, срабатывает кастомное событие с информацией о выбранном городе - его код и название, подписаться на событие можно следующим ранее виденным образом:

var book24Location = document.getElementById('book24-widget-location');

if (book24Location) {
  book24Location.addEventListener('book24ChangeLocation', function (e) {
    console.info('Выбранный город: ', e.detail.location);
  });  
}

Виджет так же эмитит два события при закрытии и открытии выбора города:

// Выбор города открыт
if (book24Location) {
  book24Location.addEventListener('city-select-open', function (e) {
    console.info('city-select-open');
  });
}
// Выбор города закрыт
if (book24Location) {
  book24Location.addEventListener('city-select-close', function (e) {
    console.info('city-select-close');
  });  
}

2. Виджет доставки

Нужно добавить разметку на страницу с товаром:

<div data-product-id="132062">
  <div class="book24-widget-delivery__courier">
    <span class="icon-track"></span>
  </div>
  <div class="book24-widget-delivery__pvz">
    <span class="icon-pickup"></span>
  </div>
</div>

В data-product-id нужно вставить айдишник продукта по аналогии с обработчиком событий - id конкретного продукта полученного по апи.

Затем подключить скрипт book24-widget-delivery.js

После настроить :

new Book24WidgetDelivery(settings);

Если подключен виджет выбора города, то локация берется из него, если же нет, то по умолчанию ставится Москва(сейчас есть баг что ставится Питер).

Предзаказы

Для того чтобы информация о предзаказе корректно отображалась, если товар является предзаказом надо добавить дополнительный дата атрибут data-book24-widget-type="preorder":

<div data-product-id="132062" data-book24-widget-type="preorder">
  <div class="book24-widget-delivery__courier">
    <span class="icon-track"></span>
  </div>
  <div class="book24-widget-delivery__pvz">
    <span class="icon-pickup"></span>
  </div>
</div>

Методы

У экземпляра виджета есть метод loadDelivery() для обновления данных:

var instanceWidgetDelivery = new Book24WidgetDelivery(settings);

Например, если пользователь изменил свой город в виджете выбора города - необходимо вызывать данный метод для обновления данных:

var book24Location = document.getElementById('book24-widget-location');

book24Location.addEventListener('book24ChangeLocation', function (e) {
    // Обновляем данные виджета доставки
    instanceWidgetDelivery.loadDelivery();
});

Стили

Так же есть возможность стилизации, если она нужна то нужно подключить файл стилей book24-widget-delivery.css в шапку:

<link rel="stylesheet" href="book24-widget-delivery.css"/>

Полный пример подключения всех виджетов исключая корзину и оформление:

Last updated