Конфигурация виджета Relavio Search

Виджет настраивается через data-* атрибуты HTML-контейнера или через объект параметров при ручной инициализации RelavioSearchWidget.init.

Настройка через HTML

<div
    data-relavio-search-widget
    data-api-key="YOUR_API_KEY"
    data-behavior="catalog-with-filters"
    data-placeholder="Найти товар"
    data-min-length="2"
    data-columns="4"
    data-catalog-rows="4"
    data-currency="₽"
></div>

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

Настройка через JavaScript

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

<script>
    window.RelavioSearchWidget.init(document.getElementById('search-widget'), {
        apiKey: 'YOUR_API_KEY',
        behavior: 'catalog',
        placeholder: 'Поиск по товарам',
        columns: 3,
        catalogRows: 4,
        currency: '₽',
    });
</script>

JavaScript-настройка удобна, если параметры приходят из приложения, меняются на клиенте или контейнер создается динамически.

Основные параметры

HTML-атрибут	JS-параметр	По умолчанию	Описание
data-api-key	apiKey	пусто	API-ключ проекта Relavio. Передается в заголовке api-key.
data-behavior	behavior	search	Режим работы виджета.
data-placeholder	placeholder	Поиск товаров	Текст внутри поля поиска.
data-min-length	minLength	2	Минимальная длина запроса для запуска поиска.
data-per-page	perPage	8	Количество товаров в одном ответе.
data-columns	columns	4	Количество колонок в каталожной сетке.
data-catalog-rows	catalogRows	4	Количество рядов каталога.
data-rows	catalogRows	4	Альтернативное имя для количества рядов.
data-currency	currency	₽	Валюта для отображения цены, если товар не содержит свою валюту.
data-disable-product-links	disableProductLinks	false	Отключает переходы по ссылкам товаров.
data-speech-language	speechLanguage	ru-RU	Язык распознавания речи.
data-search-url	searchUrl	/api/v1/search	Endpoint поиска.
data-suggests-url	suggestsUrl	/api/v1/search/suggests	Endpoint подсказок.
data-event-url	eventUrl	/api/v1/search/events	Endpoint событий аналитики.
data-demo	demo	пусто	Демонстрационный режим. Передается в заголовке X-Relavio-Demo.

Режимы поведения

search

Обычный быстрый поиск. После ввода запроса виджет отправляет запрос в searchUrl и показывает товары в выпадающем списке.

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

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

suggests

Режим подсказок. Виджет отправляет запросы в suggestsUrl и показывает историю, подсказки, категории и товары.

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

Также поддерживаются значения suggest и suggestions; они будут приведены к suggests.

catalog

Каталожный режим с сеткой и пагинацией.

<div
    data-relavio-search-widget
    data-api-key="YOUR_API_KEY"
    data-behavior="catalog"
    data-columns="4"
    data-catalog-rows="5"
></div>

Если data-per-page не задан, значение рассчитывается как columns * catalogRows.

catalog-with-filters

Каталожный режим с фильтрами. Виджет добавляет в запрос withFilters: true и отправляет выбранные значения в поле filters.

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

Также поддерживаются значения catalog_filters, catalog-with-filter и catalog-filters; они будут приведены к catalog-with-filters.

Формат запросов

Для поиска виджет отправляет POST-запрос:

{
  "page": 1,
  "per_page": 16,
  "query": "iphone",
  "search_id": "",
  "session_id": "",
  "filters": {},
  "withFilters": true
}

Для подсказок фильтры не отправляются:

{
  "page": 1,
  "per_page": 8,
  "query": "iph",
  "search_id": "",
  "session_id": ""
}

Сессия поиска

Виджет сохраняет search_id и session_id из ответов API. Эти значения используются в следующих запросах и в событиях аналитики, чтобы связать подсказки, выдачу и клики пользователя.

Отключение ссылок товаров

Если нужно использовать карточки товаров как элементы выбора, а не ссылки, включите data-disable-product-links:

<div
    data-relavio-search-widget
    data-api-key="YOUR_API_KEY"
    data-behavior="suggests"
    data-disable-product-links="true"
></div>

Булевыми значениями считаются true, 1, yes и пустой атрибут data-disable-product-links.

Настройка endpoint-ов

Если API находится на другом домене или проксируется через сайт, укажите URL явно:

<div
    data-relavio-search-widget
    data-api-key="YOUR_API_KEY"
    data-search-url="https://api.example.com/api/v1/search"
    data-suggests-url="https://api.example.com/api/v1/search/suggests"
    data-event-url="https://api.example.com/api/v1/search/events"
></div>

Для кросс-доменных запросов убедитесь, что API корректно настроен для CORS и принимает заголовок api-key.