Product Guides
Start typing to search…

Клиентская интеграция

Эта инструкция описывает client-to-server интеграцию продукта Rocket Search на сайт интернет-магазина.

Этапы подключения

1. Базовая интеграция

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

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

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

📘

Базовые этапы интеграции

Подробнее о начале интеграции с Retail Rocket можно ознакомиться в соответствующем разделе.

2. Подготовка демо-стенда

После получения товарной базы магазина, мы формируем демо-стенд в стандартном дизайне. Этот этап позволяет оценить качество поисковой выдачи с учетом особенностей конкретного ассортимента.

Каждый магазин имеет уникальные характеристики своей базы товаров, а также собственное представление об "идеальной" поисковой выдаче. Ранний анализ этих факторов помогает выявить возможные нюансы и учесть их при настройке поиска, что значительно повышает итоговое качество работы.

Чтобы ускорить процесс достижения оптимального результата, демо-стенд рекомендуется запускать как можно раньше.

3. Реализация клиентского дизайна

Перед началом работ согласовываются и фиксируются все требования к внешнему виду и поведению интерфейса. Это обеспечивает прозрачность процесса и исключает недопонимания на этапе внедрения.

Разработка дизайна и UI реализуется на отдельном демо-стенде, где вы сможете в реальном времени видеть ход работы и оценивать результат. Такой подход позволяет заранее понять, как именно продукт будет выглядеть и функционировать на сайте магазина до интеграции.

4. Интеграция на сайт магазина

На этом этапе происходит подключение продукта к вашему сайту. Подробное описание процесса интеграции вы сможете найти в следующих разделах данной инструкции.

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

Процесс интеграции

Подключение скрипта

Необходимо разместить ссылку на скрипт в теге <head>:

<script src="https://cdn.rocketsearch.ru/content/javascript/smartsearch/{{partnerId}}/latest/index.umd.js"></script>
👍

Заметка

  • partnerId - уникальный идентификатор вашего интернет-магазина в Retail Rocket, выдается при регистрации;
  • Вместо ручного подключения скрипта можно использовать пакетный менеджер npm;

Размещение веб-компонентов

Компонент настроек поиска

Для работы предпросмотра поиска необходимо добавить в вёрстку магазина веб-компонент <rrg-smart-search-settings>:

<rrg-smart-search-settings
  lang="ru"
  stock="84"
  cart='{"10320617":5,"13082044":3,"80293500":2}'
  wishlist="{10320617:true,13082044:true}"
></rrg-smart-search-settings>

Параметры компонента:

  • lang - язык магазина;
  • stock - сток текущего пользователя, если используется мультирегиональность;
  • cart - содержимое корзины магазина в формате {id товара: количество};
  • wishlist - содержимое списка избранного в формате{id товара: true | false};
🚧

Корзина и список избранного

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

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

Для работы предпросмотра поиска необходимо добавить в вёрстку магазина веб-компонент <rrg-smart-search-input-with-preview> , вместо строки ввода поисковой фразы.

<rrg-smart-search-input-with-preview></rrg-smart-search-input-with-preview>

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

Компонент результатов поиска

Для показа результатов поиска необходимо добавить в вёрстку магазина веб-компонент <rrg-smart-search-result-page> на страницу результатов поиска.

<rrg-smart-search-result-page></rrg-smart-search-result-page>

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

📘

Последовательность перехода пользователя в результаты Rocket Search

  1. Пользователь вводит поисковую фразу и видит предпросмотр поиска;
  2. Затем нажимает клавишу enter или инициирует другой способ получения всех результатов;
  3. Веб-компонент переводит браузер пользователя на страницу результатов поиска;
  4. Веб-компонент показывает полную поисковую выдачу;

Пользовательские события

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

Таким образом, вы сможете своевременно обновлять состояние корзины, собирать статистику по пользовательским действиям или использовать эти данные для других бизнес-задач.

Типы событий:

  1. clickOnProduct - клик на товар;
  2. addToCart - добавление товара в корзину;
  3. removeFromCart - удаление товара из корзины;
  4. addToWishlist - добавление товара в список избранного;
  5. removeFromWishlist - удаление товара из списка избранного;
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const previewComponent = document.querySelector('rrg-smart-search-input-with-preview');
    const resultPageComponent = document.querySelector('rrg-smart-search-result-page');
    const settingsComponent = document.querySelector('rrg-smart-search-settings');

    const onClickOnProduct = ({ detail: productId }) => {
      console.log(`Product clicked: ${productId}`);
    }
    previewComponent.addEventListener('clickOnProduct', onClickOnProduct);
    resultPageComponent.addEventListener('clickOnProduct', onClickOnProduct);

    const onAddToCart = ({ detail: productId }) => {
      ... // средствами магазина добавить товар в корзину текущего пользователя
      const cartProducts = ... // получить содержимое корзины
      // в формате вида {10320617:5,13082044:3,80293500:2}
      settingsComponent.setAttribute("cart", cartProducts);
      rrApi.addToBasket(productId) // отправить событие базового трекинга
      console.log(`Product added to cart: ${productId}`);
    }
    previewComponent.addEventListener("addToCart", onAddToCart);
    resultPageComponent.addEventListener("addToCart", onAddToCart);

    const onRemoveFromCart = ({ detail: productId }) => {
      ... // средствами магазина убрать товар из корзины текущего пользователя
      const cartProducts = ... // получить содержимое корзины
      // в формате вида {10320617:5,13082044:3,80293500:2}
      settingsComponent.setAttribute("cart", cartProducts);
      console.log(`Product removed from cart: ${productId}`);
    }
    previewComponent.addEventListener("removeFromCart", onRemoveFromCart);
    resultPageComponent.addEventListener("removeFromCart", onRemoveFromCart);

    const onAddToWishlist = ({ detail: productId }) => {
      ... // средствами магазина добавить товар в избранное текущего пользователя
      const wishlistProducts = ... // получить содержимое избранного
      // в формате вида {10320617:true,13082044:true}
      settingsComponent.setAttribute("wishlist", JSON.stringify(wishlistProducts));
      console.log(`Product added to wishlist: ${productId}`);
    }
    previewComponent.addEventListener("addToWishlist", onAddToWishlist);
    resultPageComponent.addEventListener("addToWishlist", onAddToWishlist);

    const onRemoveFromWishlist = ({ detail: productId }) => {
      ... // средствами магазина убрать товар из избранного текущего пользователя
      const wishlistProducts = ... // получить содержимое избранного
      // в формате вида {10320617:true,13082044:true}
      settingsComponent.setAttribute("wishlist", wishlistProducts);
      console.log(`Product removed from wishlist: ${productId}`);
    }
    previewComponent.addEventListener("removeFromWishlist", onRemoveFromWishlist);
    resultPageComponent.addEventListener("removeFromWishlist", onRemoveFromWishlist);
  });
</script>

Updated about 6 hours ago