Виджет не загружается

Если вы внедрили widget.js, а строка поиска не появляется, пройдите по этому списку по порядку. Каждая проверка устраняет одну причину.

Проверка 1: скрипт действительно загрузился

Откройте инструменты разработчика браузера → Network → фильтр по widget.js. Вы должны увидеть 200. Если вы видите:

Для CSP добавьте app.aacsearch.com в вашу директиву script-src:

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' https://app.aacsearch.com; img-src 'self' data: https:;"
/>

Проверка 2: контейнер существует на момент загрузки

Виджет монтируется в элемент, определяемый data-container. Если элемент не существует в момент выполнения скрипта, монтирование молча завершается неудачей.

<!-- ❌ Контейнер после скрипта -->
<script
  src="https://app.aacsearch.com/api/widget/widget.js"
  data-container="#aac-search"
  data-api-key="ss_search_..."
  data-index-slug="products"
></script>
<div id="aac-search"></div>

<!-- ✅ Контейнер перед скриптом -->
<div id="aac-search"></div>
<script
  src="https://app.aacsearch.com/api/widget/widget.js"
  data-container="#aac-search"
  data-api-key="ss_search_..."
  data-index-slug="products"
></script>

Если контейнер отрисовывается SPA-фреймворком после первой отрисовки, отложите инициализацию:

// Пример React — дождитесь, пока контейнер появится в DOM
useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://app.aacsearch.com/api/widget/widget.js";
  script.dataset.container = "#aac-search";
  script.dataset.apiKey = process.env.NEXT_PUBLIC_AACSEARCH_SEARCH_KEY!;
  script.dataset.indexSlug = "products";
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Проверка 3: API-ключ действителен для этого источника

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

В инструментах разработчика → Network → фильтр по /api/search/...:

Проверка 4: монтирование в Shadow DOM

Виджет рендерится внутри корня Shadow DOM, прикреплённого к вашему контейнеру. Если ваш CSS использует !important или глобальный селектор, нацеленный на предков [shadow-root], виджет может рендериться, но быть невидимым.

В инструментах разработчика → Elements → раскройте контейнер → ищите #shadow-root (open). Если он там есть, виджет загрузился. Если внутреннее содержимое имеет display: none или opacity: 0, виноват ваш CSS.

/* ❌ Частая ошибка */
* {
  visibility: visible !important;
}

/* ✅ Ограничьте своими компонентами */
.my-component * {
  visibility: visible !important;
}

Проверка 5: ошибки в консоли

Консоль браузера → ищите сообщения с префиксом [aacsearch].

Проверка 6: блокировщик рекламы / расширение

Небольшая, но реальная причина: расширения типа uBlock с пользовательскими правилами иногда блокируют сторонние скрипты, подпадающие под общий паттерн. Проверьте в окне инкогнито без расширений, чтобы исключить это.

Проверка 7: смена маршрута SPA

Если виджет смонтировался на главной странице, но исчез после перехода на страницу товара, SPA, вероятно, удалил контейнер. Переинициализируйте при каждой смене маршрута:

// Пример React — Next.js App Router
import { useEffect } from "react";
import { usePathname } from "next/navigation";

useEffect(() => {
  window.AACSearch?.mount({
    container: "#aac-search",
    apiKey: process.env.NEXT_PUBLIC_AACSEARCH_SEARCH_KEY!,
    indexSlug: "products",
  });
  return () => window.AACSearch?.unmount("#aac-search");
}, [usePathname()]);

Матрица решений

Диагностический пакет

Связанные страницы

• Установка виджета
• Обзор виджета
• Ошибки аутентификации
• Лимиты запросов