Установка виджета Relavio Search

Виджет Relavio Search подключается на сайт через один JavaScript-файл и HTML-контейнер. После загрузки скрипта он сам находит элементы с атрибутом data-relavio-search-widget, добавляет поле поиска, стили, голосовой ввод и обработчики запросов к API.

Требования

Перед установкой подготовьте:

• API-ключ проекта Relavio;
• импортированные товары в поисковом индексе;
• страницу сайта, где должен отображаться поиск;
• доступ к изменению HTML-шаблона или блока CMS.

Базовое подключение

Добавьте контейнер в нужное место страницы:

<div
    data-relavio-search-widget
    data-api-key="YOUR_API_KEY"
></div>

Подключите скрипт перед закрывающим тегом </body>:

<script src="https://relavio.su/js/search-widget.js"></script>

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

Установка подсказок в шапку сайта

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

<div class="site-header__search">
    <div
        data-relavio-search-widget
        data-api-key="YOUR_API_KEY"
        data-behavior="suggests"
        data-placeholder="Найти товар"
    ></div>
</div>

<script src="https://relavio.su/js/search-widget.js"></script>

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

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

Для отдельной страницы поиска используйте режим catalog или catalog-with-filters.

<main class="search-page">
    <h1>Поиск товаров</h1>

    <div
        data-relavio-search-widget
        data-api-key="YOUR_API_KEY"
        data-behavior="catalog-with-filters"
        data-placeholder="Введите название, бренд или категорию"
        data-columns="4"
        data-catalog-rows="4"
    ></div>
</main>

<script src="https://relavio.su/js/search-widget.js"></script>

В этом режиме результаты отображаются сеткой, а фильтры строятся из ответа API.

Автоматическая инициализация

Скрипт автоматически вызывает RelavioSearchWidget.initAll() после загрузки страницы. Повторная инициализация уже готового контейнера не выполняется: виджет помечает элемент атрибутом data-relavio-search-widget-ready="true".

Это позволяет безопасно размещать несколько виджетов на одной странице:

<div data-relavio-search-widget data-api-key="YOUR_API_KEY" data-behavior="suggests"></div>
<div data-relavio-search-widget data-api-key="YOUR_API_KEY" data-behavior="catalog"></div>

Ручная инициализация

Если контейнер создается динамически, например после AJAX-навигации или открытия модального окна, инициализируйте его вручную:

<div id="relavio-search"></div>

<script>
    const element = document.getElementById('relavio-search');

    window.RelavioSearchWidget.init(element, {
        apiKey: 'YOUR_API_KEY',
        behavior: 'suggests',
        placeholder: 'Поиск по каталогу',
    });
</script>

Можно также вызвать повторный поиск всех неинициализированных контейнеров:

<script>
    window.RelavioSearchWidget.initAll();
</script>

Проверка после установки

После подключения проверьте:

• поле поиска появилось на странице;
• при вводе запроса отправляется запрос к /api/v1/search или /api/v1/search/suggests;
• в запросах есть заголовок api-key;
• товары отображаются с названием, ценой, изображением и ссылкой;
• клик по товару отправляет событие в /api/v1/search/events;
• в режиме каталога работает пагинация;
• в режиме catalog-with-filters отображаются фильтры.

Частые проблемы

Виджет не появился

Проверьте, что скрипт загружен без ошибки, контейнер содержит data-relavio-search-widget, а на странице нет JavaScript-ошибок.

Запросы возвращают ошибку авторизации

Проверьте API-ключ в data-api-key или в параметре apiKey при ручной инициализации.

Нет товаров в выдаче

Убедитесь, что товары импортированы и проиндексированы. Также проверьте, что запрос длиннее минимального значения data-min-length.

Не работает голосовой ввод

Голосовой ввод зависит от поддержки Web Speech API в браузере. Если API недоступен, кнопка микрофона будет отключена.