Кастомизация виджета Relavio Search

Виджет поставляется со встроенными стилями, которые автоматически добавляются на страницу при инициализации. Их можно переопределять обычным CSS: достаточно подключить свои стили после search-widget.js или добавить более специфичные селекторы в CSS сайта.

Базовая структура

После инициализации контейнер получает класс relavio-search-widget. Внутри создаются поле поиска, кнопка голосового ввода, выпадающий список или каталожная сетка.

Основные элементы:

Класс	Назначение
`.relavio-search-widget`	Корневой контейнер.
`.relavio-search-widget__field`	Обертка поля поиска и кнопки микрофона.
`.relavio-search-widget__input`	Поле ввода запроса.
`.relavio-search-widget__voice-button`	Кнопка голосового ввода.
`.relavio-search-widget__dropdown`	Выпадающий список результатов или подсказок.
`.relavio-search-widget__list`	Список товарных карточек.
`.relavio-search-widget__card`	Карточка товара в выпадающем списке.
`.relavio-search-widget__image`	Изображение товара.
`.relavio-search-widget__title`	Название товара.
`.relavio-search-widget__description`	Описание товара, бренд, модель или категории.
`.relavio-search-widget__price`	Текущая цена.
`.relavio-search-widget__old-price`	Старая цена.

Настройка ширины и положения

По умолчанию виджет занимает всю доступную ширину контейнера, но ограничен max-width: 720px. Чтобы изменить это поведение, задайте стили корневому контейнеру.

css

.site-header .relavio-search-widget {
    max-width: none;
    width: 100%;
}

.search-page .relavio-search-widget {
    max-width: 1180px;
}

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

Настройка поля поиска

css

.relavio-search-widget__input {
    border-color: #d1d5db;
    border-radius: 14px;
    padding: 14px 56px 14px 18px;
    font-size: 16px;
}

.relavio-search-widget__input:focus {
    border-color: #111827;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08);
}

Текст внутри поля настраивается параметром data-placeholder.

Кнопка голосового ввода

Кнопка микрофона находится справа внутри поля поиска. Во время записи она получает класс is-listening.

css

.relavio-search-widget__voice-button {
    color: #6b7280;
}

.relavio-search-widget__voice-button.is-listening {
    background: #ef4444;
    color: #ffffff;
}

Если браузер не поддерживает Web Speech API, кнопка становится disabled.

Выпадающий список

Выпадающий список открывается классом is-open и содержит статусы, подсказки или товары.

css

.relavio-search-widget__dropdown {
    border-radius: 18px;
    border-color: #e5e7eb;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
}

.relavio-search-widget__status {
    color: #6b7280;
}

Карточки товаров в быстрых результатах

css

.relavio-search-widget__card {
    border-radius: 12px;
    gap: 14px;
}

.relavio-search-widget__card:hover,
.relavio-search-widget__card:focus {
    background: #f8fafc;
}

.relavio-search-widget__image {
    border-radius: 10px;
    background: #f3f4f6;
}

.relavio-search-widget__title {
    color: #111827;
    font-weight: 600;
}

.relavio-search-widget__price {
    color: #2563eb;
    font-weight: 700;
}

Подсказки

В режиме suggests виджет группирует данные в секции.

Класс	Назначение
`.relavio-search-widget__suggest-grid`	Сетка секций подсказок.
`.relavio-search-widget__section`	Секция, например История или Категории.
`.relavio-search-widget__section-title`	Заголовок секции.
`.relavio-search-widget__suggest-list`	Список подсказок.
`.relavio-search-widget__suggest-button`	Кнопка подсказки.

css

.relavio-search-widget__section-title {
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.relavio-search-widget__suggest-button {
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
}

.relavio-search-widget__suggest-button:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

Каталожная сетка

В режимах catalog и catalog-with-filters корневой контейнер получает дополнительный класс relavio-search-widget--catalog.

Основные классы каталога:

Класс	Назначение
`.relavio-search-widget__catalog`	Область каталога.
`.relavio-search-widget__header`	Закрепленная область с поиском.
`.relavio-search-widget__grid`	Сетка товаров.
`.relavio-search-widget__catalog-card`	Карточка товара в каталоге.
`.relavio-search-widget__catalog-image`	Изображение товара в каталоге.
`.relavio-search-widget__pagination`	Пагинация.
`.relavio-search-widget__pagination-button`	Кнопка страницы.

Количество колонок задается атрибутом data-columns и CSS-переменной --relavio-catalog-columns.

css

.relavio-search-widget--catalog {
    max-width: 1200px;
}

.relavio-search-widget__grid {
    gap: 20px;
}

.relavio-search-widget__catalog-card {
    border-radius: 18px;
    overflow: hidden;
}

.relavio-search-widget__catalog-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

Фильтры каталога

В режиме catalog-with-filters виджет добавляет боковую панель фильтров.

Класс	Назначение
`.relavio-search-widget__catalog-layout`	Общий layout фильтров и результатов.
`.relavio-search-widget__filters`	Блок фильтров.
`.relavio-search-widget__filters-title`	Заголовок фильтров.
`.relavio-search-widget__filter`	Один фильтр.
`.relavio-search-widget__filter-name`	Название фильтра.
`.relavio-search-widget__filter-option`	Значение списочного фильтра.
`.relavio-search-widget__filter-range`	Диапазонные поля.
`.relavio-search-widget__filter-input`	Поле значения диапазона.

css

.relavio-search-widget__filters {
    border-radius: 18px;
    background: #f8fafc;
    padding: 18px;
}

.relavio-search-widget__filter-option {
    gap: 10px;
    color: #334155;
}

.relavio-search-widget__filter-count {
    margin-left: auto;
    color: #94a3b8;
}

Адаптивность

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

css

@media (max-width: 768px) {
    .relavio-search-widget--catalog {
        --relavio-catalog-columns: 2;
    }
}

@media (max-width: 480px) {
    .relavio-search-widget--catalog {
        --relavio-catalog-columns: 1;
    }
}

Отключение переходов по товарам

Если внешний вид карточек нужен, но переход по ссылке не нужен, используйте data-disable-product-links="true". Виджет продолжит отображать товары и отправлять события кликов, но карточки не будут ссылками.

html

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

Кастомизация виджета Relavio Search ​

Базовая структура ​

Настройка ширины и положения ​

Настройка поля поиска ​

Кнопка голосового ввода ​

Выпадающий список ​

Карточки товаров в быстрых результатах ​

Подсказки ​

Каталожная сетка ​

Фильтры каталога ​

Адаптивность ​

Отключение переходов по товарам ​