Skip to end of metadata
Go to start of metadata

 

Пример подключения, приведённый в данной инструкции является устаревшим и его поддержка прекращена, рекомендуем использовать подключение с помощью JS SDK 3.

1. Введение

Этот документ описывает процесс установки модуля REES46 на ваш магазин на платформе HostCMS.

2. Краткий план установки

  1. Зарегистрировать магазин в системе REES46.
  2. Подключить основные скрипты модуля.
  3. Установить скрипты сбора данных.
  4. Настроить блоки рекомендаций.
  5. Проверить работоспособность.

3. Пошаговая инструкция по установке

Интеграция производится вручную, просто копируйте и вставляйте код из этой документации в указанные места ваших шаблонов и скриптов и все заработает.

3.1 Регистрация магазина

  1. Перейдите на сайт http://rees46.com.
  2. Зарегистрируйтесь и создайте новый магазин.
  3. Запишите код магазина и секретный ключ (длинная бесмысленная последовательность букв и цифр, которую вы получите после создания магазина на сайте REES46). И то и другое можно получить в разделе "Настройка магазина".

3.2 Подключите основные скрипты модуля

Откройте администраторскую часть, и войдите в раздел Templates. Найдите в списке свой магазин и нажмите Edit

Перейдите на вкладку Template и вставьте следующий код перед закрывающимся тегом </head>

<script type="text/javascript">
  <?php
	try {
    	$oSiteuser = Core_Entity::factory('Siteuser')->getCurrent();
	} catch (Exception $e) {
    	$oSiteuser = null;
	}
    if (!is_null($oSiteuser)) {
  ?>
    var user = {};
    user.id = '<?php echo($oSiteuser->id) ?>';
    user.email = '<?php echo($oSiteuser->email) ?>';
  <?php
    } else {
  ?>
    var user = null;
  <?php
    }
  ?>
  function initREES46() {
    $(function() {
      var categoryId = null;
      var itemId = null;
      if (typeof(getCartItemIds) == 'function') {
        var itemsInCartIds = getCartItemIds();
      } else {
        var itemsInCartIds = null;
      }
      REES46.init('КОД_ВАШЕГО_МАГАЗИНА_В_REES46', user);
      REES46.addReadyListener(function () {
        REES46.addStyleToPage();
        $('.rees46').each(function() {
          var recommenderBlock = $(this);
          var recommenderType = recommenderBlock.data('type');
          var recommenderTitle = recommenderBlock.data('title');
          var recommenderLimit = recommenderBlock.data('limit');
          if (recommenderLimit == null || recommenderLimit == undefined)
            recommenderLimit = 5;
          var recomend_products_tpl = ''
          if (recommenderType) {
            categoryId = recommenderBlock.data('category-id');
            itemId = recommenderBlock.data('item-id');
            REES46.recommend({
              recommender_type: recommenderType,
              category: categoryId,
              item: itemId,
              cart: itemsInCartIds,
              limit: recommenderLimit
            }, function(ids) {
              if (ids.length == 0) {
                return;
              }
              $.getJSON('/recommendations/?product_ids=' + ids.join(','), function(data) {
                var products = data.products;
                $(products).each(function() {
                  if (this.name != '' && this.name != null) {
                    var recommend_query = '?recommended_by=';
                    if (this.url.indexOf('?') > 0)
                      var recommend_query = '&recommended_by='
                    var recommend_url = this.url + recommend_query + recommenderType;
                    recomend_products_tpl += '<div class="recommended-item">' +
                                              '<div class="recommended-item-photo">' +
                                                '<a href="' + recommend_url + '"><img src="' + this.image_url + '" class="item_img" /></a>' +
                                              '</div>' +
                                              '<div class="recommended-item-title">' +
                                                '<a href="' + recommend_url + '">' + this.name + '</a>' +
                                              '</div>' +
                                              '<div class="recommended-item-price">' +
                                                this.price + ' ' + REES46.currency +
                                              '</div>' +
                                              '<div class="recommended-item-action">' +
                                                '<a href="' + recommend_url + '">Подробнее</a>'+
                                              '</div>'+
                                             '</div>';
                  }
                });
                var recommender_titles = {
                  interesting: 'Вам это будет интересно',
                  also_bought: 'С этим также покупают',
                  similar: 'Похожие товары',
                  popular: 'Популярные товары',
                  see_also: 'Посмотрите также',
                  recently_viewed: 'Вы недавно смотрели'
                };
                if (recommenderTitle == null || recommenderTitle == undefined)
                  recommenderTitle = recommender_titles[recommenderType]
                if (recomend_products_tpl != '') {
                  template = '<div class="recommender-block-title">' + recommenderTitle + '</div><div class="recommended-items">' + recomend_products_tpl + '</div>'
                  if (REES46.showPromotion) {
                    template = template + REES46.getPromotionBlock();
                  }
                  recommenderBlock.html(template);
                }
              });
            });
          }
        });
      });
    });
    $(document).ajaxSend(function(event, jqxhr, settings) {
      var data = settings.url;
      if (data) {
        var data_arr = data.split('?');
        url = data_arr[0];
        if (url.indexOf("shop/cart") != -1) {
          query = data_arr[1];
          var query_arr = query.split('&');
          var product_id = null;
          $.each(query_arr, function(idx, param) {
            if (param.indexOf("add") == 0) {
              var arr_param = param.split('=');
              product_id = arr_param[1];
            }
          });
          if (product_id != null) {
            REES46.addReadyListener(function() {
              REES46.pushData('cart', {
                item_id: product_id
              });
            });
          }
        }
      }
    });
  };
  var script = document.createElement('script');
  script.src = '//cdn.rees46.com/rees46_script2.js';
  script.async = true;
  script.onload = function() {
    initREES46();
    if (typeof(itemViewREES46) == "function")
      itemViewREES46();
  };
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Не забудьте заменить в этом коде КОД_ВАШЕГО_МАГАЗИНА_В_REES46 на ваш реальный код магазина.

Отройте раздел XSL templates и найдите в списке папку с названием Сайт24(с шаблонами для вашего интернет-магазина), там найдите файл МагазинКорзинаКраткаяСайт24. После тега <xsl:template match="/shop"> вставьте

<xsl:if test="count(shop_cart) > 0">
  <script type="text/javascript">
    getCartItemIds = function() {
    var itemsInCartIds = new Array;
    <xsl:for-each select="shop_cart/shop_item">
      var cartItemId = <xsl:value-of disable-output-escaping="yes" select="@id"/>;
      itemsInCartIds.push(cartItemId);
    </xsl:for-each>
    return itemsInCartIds;
    };
  </script>
</xsl:if>

3.3 Подключите скрипты сбора данных

Для полноценных рекомендаций необходимо собирать следующие события:

  • просмотр товара пользователем;
  • добавление товара в корзину;
  • удаление товара из корзины;
  • оформление заказа.

3.3.1 Просмотр товара

Отройте раздел XSL templates и найдите в списке папку с названием Сайт24(с шаблонами для вашего интернет-магазина), откройте ее. Найдите шаблон с названием МагазинТоварСайт24, нажмите редактировать, в шаблоне после тега <xsl:template match="shop_item"> вставьте следующий код

<script type="text/javascript">
  var itemId = <xsl:value-of disable-output-escaping="yes" select="@id"/>;
  var itemPrice = <xsl:value-of disable-output-escaping="yes" select="price"/>;
  var itemCategory = <xsl:value-of disable-output-escaping="yes" select="[email protected]"/>;
  function itemViewREES46() {
    REES46.addReadyListener(function () {
      REES46.pushData('view', {
        item_id: itemId,
        price: itemPrice,
		categories: [itemCategory]
      });
    });
  };
</script>

3.3.2 Добавление товара в корзину

Если вы не меняли структуру формы добавления товара в корзину с помощью AJAX, то ничего делать не нужно. Если же меняли, то свяжитесь свяжитесь с нами для решения возможных проблем.

3.3.3 Удаление товара из корзины

Откройте раздел Sample dynamic pages, зайдите в папку Интернет-магазин и откройте файл Интернет-магазин корзина. Перейдите на вкладку Page settings и найдите следующий код

// Удаление товара из корзины
if (Core_Array::getGet('delete'))
{
  $shop_item_id = intval(Core_Array::getGet('delete'));
  if ($shop_item_id)
  {
    $oShop_Cart_Controller = Shop_Cart_Controller::instance();
    $oShop_Cart_Controller
      ->shop_item_id($shop_item_id)
      ->delete();
  }
}

Перед $oShop_Cart_Controller = Shop_Cart_Controller::instance(); вставьте

$cookie_info = array();
$cookie_info['item_id'] = $shop_item_id;
setcookie( 'rees46_track_remove_from_cart', json_encode($cookie_info), 0, '/' );

3.3.4 Оформление заказа

Откройте раздел Sample dynamic pages, зайдите в папку Интернет-магазин и откройте файл Интернет-магазин корзина. Перейдите на вкладку Page code и найдите следующий код

// Окончание оформления заказа
case 4:
  $shop_payment_system_id = $_SESSION['hostcmsOrder']['shop_payment_system_id'] = intval(Core_Array::getPost('shop_payment_system_id', 0));
  // Если выбрана платежная система
  if ($_SESSION['hostcmsOrder']['shop_payment_system_id'])
  {
    Shop_Payment_System_Handler::factory(
      Core_Entity::factory('Shop_Payment_System', $shop_payment_system_id)
    )
    ->orderParams($_SESSION['hostcmsOrder'])
    ->execute();
  }

До блока

Shop_Payment_System_Handler::factory(
  Core_Entity::factory('Shop_Payment_System', $shop_payment_system_id)
)
->orderParams($_SESSION['hostcmsOrder'])
->execute();

Вставьте

$Shop_Cart_Controller = Shop_Cart_Controller::instance();
$aShop_Cart = $Shop_Cart_Controller->getAll($oShop);
$product_info = array();
foreach ($aShop_Cart as $oShop_Cart)
{
  if ($oShop_Cart->Shop_Item->id)
  {
    if ($oShop_Cart->postpone == 0)
    {
      // Prices
      $oShop_Item_Controller = new Shop_Item_Controller();
      Core::moduleIsActive('siteuser') && $oSiteuser && $oShop_Item_Controller->siteuser($oSiteuser);
      $oShop_Item_Controller->count($oShop_Cart->quantity);
      $oShop_Item = $oShop_Cart->Shop_Item;
      $aPrices = $oShop_Item_Controller->getPrices($oShop_Item, FALSE);
      $item = array();
      $item['item_id'] = $oShop_Cart->shop_item_id;
      $item['amount'] = $oShop_Cart->quantity;
      $item['price'] = $aPrices['price_discount'] - $aPrices['tax'];
      $item['name'] = $oShop_Item->name;
      $item['description'] = $oShop_Item->description;
      $item['link'] = $oShop_Item->Shop->Structure->getPath() . $oShop_Item->getPath();
      $item['image_url'] = $oShop_Item->getSmallFileHref();
      $item['categories'] = array($oShop_Item->shop_group_id);
      $product_info[] = $item;
    }
  }
}

А после этого блока следующее

$cookie_info = array();
$cookie_info['items'] = $product_info;
$cookie_info['order_id'] = $_SESSION['last_order_id'];
setcookie( 'rees46_track_purchase', json_encode($cookie_info), 0, '/' );

3.4 Подключите блоки рекомендованных товаров

3.4.1 Куда какие блоки ставить

Важно установить максимальное количество блоков из предложенных. Может возникнуть соблазн поставить только 1-2 блока, потому что "не хочется портить дизайн". В этом случае помните: 1-2 блока не могут работать эффективно. Для достижения максимального эффекта блоки должны быть расположены по рекомендованной схеме:

  • Главная страница:
    • популярные товары (без категории).
  • Страница категории:
    • популярные товары (сверху);
    • вы недавно смотрели (снизу);
    • возможно, вам это понравится (снизу).
  • Детальный просмотр товара (все снизу):
    • с этим товаром покупают;
    • похожие товары;
    • возможно, вам это понравится.
  • Страница корзины:
    • не забудьте посмотреть.

3.4.2 Коды установки блоков

Все блоки рекомендованных товаров устанавливаются простым HTML-тегом, содержащим дополнительные параметры:

<div class="rees46 rees46-recommend" data-type="recently_viewed"></div>

REES46 автоматически сканирует содержимое страницы на наличие этих тегов и вместо них выводит рекомендованные товары (если есть что рекомендовать).

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

ПараметрНазначениеПример
data-titleЕсли вам не нравится стандартное название блока рекомендованных товаров, вы можете использовать собственное<div class="rees46 rees46-recommend" data-type="recently_viewed" data-title="Вы недавно смотрели"></div>
data-limitЕсли вам нужно получить не больше определенного количества рекомендованных товаров, вы можете использовать этот атрибут. Стандартный лимит рекомендованных товаров: 4.<div class="rees46 rees46-recommend" data-type="recently_viewed" data-limit="3"></div>
data-item-idТекущий просматриваемый товар. Важно указывать его для рекомендаций interesting, also_bought, similar и buying_now. Это позволит не отображать выводить в блоке рекомендованных товаров тот товар, на карточке которого вы сейчас находитесь.<div class="rees46 rees46-recommend" data-type="recently_viewed" data-item="343"></div>
data-category-idТекущая просматриваемая категория. Используется в блоке рекомендаций "Популярные товары в категории". Позволяет получить персонализированный список популярных товаров в конкретной категории.<div class="rees46 rees46-recommend" data-type="recently_viewed" data-category="23"></div>

3.4.2.1 Добавление функциональности для рекомендаций

Перейдите в раздел Sample dynamic pages, зайдите в папку Интернет-магазин. В шапке выберите Page -> Add. Заполните следующие поля

Name of sample dynamic page = Рекомендации

Parent section = Интернет-магазин

Перейдите на вкладку Page settings и вставьте следующий код

<?php
$sProduct_ids = Core_Array::getRequest('product_ids');
$ids = array_map('intval', explode(',', $sProduct_ids));
$products = array();
$disabled_product_ids = array();
foreach ($ids as $id) {
  $oShop_Item = Core_Entity::factory('Shop_Item', $id);
  if ($oShop_Item->name == null || !$oShop_Item->active)
  {
    array_push($disabled_product_ids, $id);
    continue;
  }
  $p = Array(
    'name' => $oShop_Item->name,
    'url' => $oShop_Item->Shop->Structure->getPath() . $oShop_Item->getPath(),
    'price' => $oShop_Item->price,
    'image_url' => $oShop_Item->getSmallFileHref()
  );
  array_push($products, $p);
}
if (!empty($disabled_product_ids))
{
  $options = array(
    CURLOPT_URL            => 'http://api.rees46.com/import/disable?
    						   shop_id=ВАШ_КОД_МАГАЗИНА&
							   shop_secret=ВАШ_СЕКРЕТНЫЙ_КЛЮЧ&
							   item_ids='.implode(',', $disabled_product_ids),
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HEADER         => false,
    CURLOPT_FOLLOWLOCATION => false,
    CURLOPT_ENCODING       => '',
    CURLOPT_USERAGENT      => 'spider',
    CURLOPT_AUTOREFERER    => true,
    CURLOPT_CONNECTTIMEOUT => 2,
    CURLOPT_TIMEOUT        => 2,
    CURLOPT_MAXREDIRS      => 10
  );
  $ch = curl_init();
  curl_setopt_array( $ch, $options );
  curl_exec($ch);
}
header('Content-Type: application/json');
die(json_encode(Array('products' => $products)));

Не забудте заменить ВАШ_КОД_МАГАЗИНА и ВАШ_СЕКРЕТНЫЙ_КЛЮЧ на реальные значения. После этого нажмите Save

3.4.2.2 Добавление рекомендаций в структуру

Перейдите в раздел Structure. В шапке выберите Structure -> Add. Заполните следующие поля

Page name in menu = Рекомендации
Section name = recommendations
Выберите Section type -> Sample dynamic page и далее
Section = Интернет-магазин
Page = Рекомендации
Снимите галочки с "Display in menu" и "Indexing"

Затем нажмите "Save"

3.4.2.3 Добавление рекомендаций на главную страницу

Перейдите в раздел XSL Templates, в папку Сайт24. Откройте шаблон МагазинКаталогТоваровНаГлавнойСайт24, добавьте в блок <xsl:template match="/shop"> перед закрывающимся тегом </xsl:template> следующий код

<div class="rees46 rees46-recommend" data-type="popular"></div>

3.4.2.4 Добавление рекомендаций на страницу каталога

Перейдите в раздел XSL Templates, в папку Сайт24. Откройте шаблон МагазинКаталогТоваровСайт24, добавьте в блок <div class="indent"> перед <div class="url"><xsl:apply-templates select=".//shop_group[@id=$parent_group_id]" mode="goup_url"/></div> следующий код

<div class="rees46 rees46-recommend" data-type="popular" data-category-id="{$parent_group_id}"></div>

тут же внутри блока <div class="indent"> -> <form method="get" action="{//shop_group[@id=$parent_group_id]/url}{$form_tag_url}"> -> <xsl:if test="total &gt; 0 and limit &gt; 0"> перед тегом <div style="clear: both"></div> добавьте

<div class="rees46 rees46-recommend" data-type="recently_viewed" data-category-id="{$parent_group_id}"></div>
<div class="rees46 rees46-recommend" data-type="interesting" data-category-id="{$parent_group_id}"></div>

3.4.2.5 Добавление рекомендаций на страницу корзины

Перейдите в раздел XSL Templates, в папку Сайт24. Откройте шаблон МагазинКорзинаСайт24. В блок <xsl:template match="/shop"> перед закрывающим тегом </xsl:template> добавьте

<div class="rees46 rees46-recommend" data-type="see_also"></div>

3.4.2.6 Добавление рекомендаций на страницу товара

Перейдите в раздел XSL Templates, в папку Сайт24. Откройте шаблон МагазинТоварСайт24. Перед строкой <xsl:if test="/shop/show_add_comments/node() and ((/shop/show_add_comments = 1 and /shop/siteuser_id &gt; 0)  or /shop/show_add_comments = 2)"> вставьте следующее

<div class="rees46 rees46-recommend" data-type="also_bought" data-item-id="[email protected]}"></div>
<div class="rees46 rees46-recommend" data-type="similar" data-item-id="[email protected]}"></div>
<div class="rees46 rees46-recommend" data-type="interesting" data-item-id="[email protected]}"></div>

4. Проверка работоспособности

Проверка выполняется так:

  1. Включаете консоль разработчика в вашем браузере.
  2. Находите вкладку Network (или "Сеть"), в которой при обновлении страницы отображаются происходящие запросы.
  3. Включаете режим фильтрации только XHR-запросов.
  4. Проверяете, есть ли запросы, которые уходят на api.rees46.com.

4.1 Проверка отправки событий

  1. Перейдите на страницу просмотра товара.
  2. Убедитесь, что уходит запрос на адрес api.rees46.com/push

4.2 Проверка запроса рекомендаций

  1. Перейдите на главную страницу и убедитесь, что уходит один запрос на api.rees46.com/recommend.
  2. Перейдите на страницу категории и убедитесь, что уходят три запроса на api.rees46.com/recommend.
  3. Перейдите на страницу товара и убедитесь, что уходят три запроса на api.rees46.com/recommend.
  4. Перейдите на страницу корзины и убедитесь, что уходит один запрос на api.rees46.com/recommend.

5. Если рекомендации еще не появились

Рекомендации могут появиться не сразу – все зависит от посещаемости вашего сайта. Если на вашем сайте оформляются заказы, значит статистика собирается и скоро рекомендации начнут появляться. Но обязательно проверьте правильность установки по пунктам 4.1 и 4.2.

6. Участие в разработке модуля

REES46 является бесплатной профессиональной рекомендательной системой, цель которой – дать возможность персонализированного подхода к клиенту любому интернет-магазину. Если вы специалист в разработке модулей под HostCMS и желаете улучшить модуль, отправляйте pull request в репозиторий https://github.com/rees46/rees46_hostcms

  • No labels