Клиентская интеграция
Этапы подключения
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.
- Пользователь вводит поисковую фразу и видит предпросмотр поиска;
- Затем нажимает клавишу enter или инициирует другой способ получения всех результатов;
- Веб-компонент переводит браузер пользователя на страницу результатов поиска;
- Веб-компонент показывает полную поисковую выдачу;
Пользовательские события
Вы можете получать информацию о взаимодействии пользователей с интерфейсом - например, о клике по товару, добавлении товара в корзину из поиска или добавлении в избранное. Для этого предусмотрена возможность подписки на соответствующие события веб-компонентов.
Таким образом, вы сможете своевременно обновлять состояние корзины, собирать статистику по пользовательским действиям или использовать эти данные для других бизнес-задач.
Типы событий:
- clickOnProduct - клик на товар;
- addToCart - добавление товара в корзину;
- removeFromCart - удаление товара из корзины;
- addToWishlist - добавление товара в список избранного;
- 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>