Хостинговый виджет поиска

Встройте виджет AACsearch в вашу витрину с помощью одного тега script. Vanilla JS, Shadow DOM, пять локалей.

Хостинговый виджет AACsearch — самодостаточный UI поиска, который вы встраиваете в любую витрину с помощью одного тега <script>. Он берёт на себя строку поиска, сетку результатов, фасеты, сортировку, пагинацию и отслеживание кликов — без зависимости от фреймворка и шага сборки на вашей стороне.

Технический обзор

Свойство	Значение
Реализация	Vanilla JS, написан с нуля (без InstantSearch.js, без React)
Изоляция стилей	Shadow DOM — стили виджета не могут утекать в CSS вашего магазина
Размер бандла	~14 КБ минифицированный (двойной вывод IIFE + ESM)
Обслуживается по	`GET /api/widget/widget.js` (CORS разрешён, кэширован)
Аутентификация	Требует ключ API `ss_search_*`, встроенный в `data-api-key`
Локали	`en`, `de`, `es`, `fr`, `ru`

Виджет никогда не раскрывает административный ключ AACSearch. Он общается только через публичный поисковый эндпоинт, используя ограниченный ключ ss_search_*, который вы предоставляете.

Сниппет встраивания

Скопируйте сниппет из Панели управления → Поиск → вкладка Виджет и вставьте его в <head> вашей витрины или перед закрывающим тегом </body>:

<script
	src="https://app.aacsearch.com/api/widget/widget.js"
	data-base-url="https://app.aacsearch.com"
	data-api-key="ss_search_your_key_here"
	data-index-slug="products"
	data-container="#aac-search"
	data-theme="auto"
></script>

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

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

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

Атрибуты конфигурации

Вся конфигурация осуществляется через атрибуты data-* тега <script>.

Атрибут	Обязателен	По умолчанию	Описание
`data-base-url`	Да	—	Базовый URL вашего экземпляра AACsearch
`data-api-key`	Да	—	Ключ `ss_search_*` (только область поиска)
`data-index-slug`	Да	—	Слаг поискового индекса для запросов
`data-container`	Да	—	CSS-селектор элемента-контейнера
`data-locale`	Нет	`"en"`	Локаль UI: `en`, `de`, `es`, `fr` или `ru`
`data-theme`	Нет	`"auto"`	Цветовая тема: `"light"`, `"dark"` или `"auto"`
`data-mode`	Нет	`"inline"`	Режим отображения: `"inline"` или `"modal"`
`data-show-prices`	Нет	`"true"`	Показывать цены товаров в результатах
`data-show-images`	Нет	`"true"`	Показывать изображения товаров в результатах

inline — виджет рендерится непосредственно внутри элемента-контейнера. Подходит для выделенной страницы поиска или заметной секции поиска.

modal — виджет появляется как оверлей. Модальное окно, как правило, открывается по нажатию кнопки или сочетанию клавиш. (Примечание: кнопка-триггер модального окна должна быть добавлена вашей темой.)

Автоопределение локали

Виджет разрешает локали по цепочке запасных вариантов: атрибут data-locale → базовый язык (en-US → en) → "en". Если передать "ru-RU", разрешится в "ru".

Требования к API-ключу

Атрибут data-api-key должен быть ключом ss_search_*, а не токеном коннектора или административным ключом. Ключи поиска имеют только область search и могут безопасно встраиваться в HTML, видимый браузеру.

Создайте ключ поиска в Панели управления → Поиск → API-ключи → Создать ключ и выберите область search.

Если вы ограничиваете ключ конкретными источниками (allowedOrigins), добавьте домен вашей витрины в список разрешённых.

Режимы отображения и состояния UI

Виджет автоматически обрабатывает следующие состояния:

Состояние	Что видит пользователь
Ожидание (нет запроса)	Текст-подсказка в поле
Загрузка	Спиннер «Идёт поиск...»
Результаты	Сетка товаров с фасетами, элементами управления сортировкой и пагинацией
Нет результатов	Пустое состояние с предложением попробовать другой термин
Ошибка	Деградированное состояние со всё ещё функциональной строкой поиска

Поддерживаемые языки

Все строки UI встроены в бандл виджета. Внешние запросы i18n отсутствуют.

Локаль	Язык
`en`	Английский
`de`	Немецкий
`ru`	Русский
`es`	Испанский
`fr`	Французский

CSS-кастомизация

Виджет использует CSS-переменные, ограниченные хостом Shadow DOM. Вы можете переопределять их, нацелившись на элемент-контейнер:

/* Применяются внутри Shadow DOM через наследование CSS через :host */
#aac-search {
	--aac-primary: #e60000;
	--aac-radius: 4px;
}

Доступные CSS-переменные: --aac-primary, --aac-primary-hover, --aac-bg, --aac-bg-secondary, --aac-text, --aac-text-secondary, --aac-border, --aac-radius.

Тёмный режим обрабатывается автоматически при data-theme="auto" — виджет определяет системное предпочтение через prefers-color-scheme.

Аналитика

Виджет отслеживает поведение при поиске и отправляет события на POST /api/events/track. События включают search_query, zero_results, result_click, widget_open и filter_used. Полный справочник событий смотрите в разделе Аналитические события виджета.