ИИ-поиск
Три способа показать ИИ-поиск в магазине, что получает покупатель и как срабатывает переход на ваш обычный поиск.
ИИ-поиск никогда сам не меняет вашу вёрстку. Вы выбираете, как покупатель до него доберётся: через вашу строку поиска или через наше поле, поставленное там, где вам удобно.
Что получает покупатель
- Подсказки при вводе: популярные запросы до начала ввода, затем подходящие категории и товары со второго символа.
- Выдача в два шага. Сначала быстро появляются товары, как в обычном поиске. Если запрос написан обычными словами, ИИ разбирает его, превращает в фильтры и коротко объясняет выбор.
- Чипы фильтров. Каждое распознанное условие — отдельный чип. Чип с пунктиром ИИ добавил сам. Удаление любого чипа мгновенно пересчитывает выдачу без повторного обращения к ИИ.
- Честные карточки. Если товар показан потому, что условие пришлось ослабить, карточка об этом говорит.
- Клавиатура. ↑ ↓ — переход по подсказкам и товарам, Enter — открыть, Esc — закрыть, Tab — перейти к консультанту с текущим запросом.
Три способа показать поиск
1. Ваша строка поиска, результаты под ней
Вариант по умолчанию. Виджет подключается к вашему полю поиска: подсказки и результаты открываются под ним поверх страницы.
| Настройка | По умолчанию | Что это |
|---|---|---|
inputSelector | input[type=search], input[name=q] | CSS-селектор поля поиска |
formSelector | form[role=search] | Форма поиска, если поле стоит вне своего <form> |
layout | dropdown | dropdown — под полем; fullscreen — способ 2 |
2. Ваша строка поиска, полноэкранный слой
Укажите layout: fullscreen. Клик в вашу строку поиска открывает полноэкранный слой: сверху наше поле поиска, ниже подсказки и результаты. Шапка сайта остаётся без изменений.
На экранах уже 768 px поиск всегда открывается на весь экран, независимо от настройки.
3. Наше поле в вашей вёрстке
Поставьте тег <lockstock-search> туда, где должно быть наше поле поиска, а внутрь — вашу обычную форму поиска:
<lockstock-search>
<form action="/search" method="get">
<input name="q" placeholder="Поиск по каталогу">
<button type="submit">Найти</button>
</form>
</lockstock-search>- Ваша форма — запасной вариант. Пока виджет загружается, если он выключен, для посетителей контрольной группы A/B или если наш скрипт заблокирован, покупатель видит и использует вашу форму. JavaScript для этого не нужен.
- Когда виджет активен, ваша форма скрывается, а на её месте появляется наше поле — в собственном Shadow DOM и с вашим брендированием.
- Работает в любом стеке, включая React, Vue и одностраничные приложения: теги, добавленные после загрузки страницы, тоже подхватываются.
- Добавьте в свой CSS
lockstock-search { display: block; }и задавайте размер, как у любого блочного элемента: пока наше поле не загрузилось, браузер считает незнакомый тег строчным. Поле занимает всю его ширину. - Наше поле загружается, когда браузер свободен, или сразу, если покупатель первым добрался до вашей формы. Уже набранный текст переносится.
| Атрибут | По умолчанию | Что это |
|---|---|---|
action | action вашей формы | Ваша страница поиска, используется для перехода ниже |
param | name вашего поля, иначе q | Параметр запроса на вашей странице поиска |
placeholder | placeholder вашего поля | Подсказка в нашем поле |
Тег можно использовать вместе со способом 1 или 2: работает то поле, в котором покупатель печатал последним.
Переход на ваш поиск
Ваш собственный поиск остаётся страховкой. Если ИИ-поиск не ответил за 1,5 секунды или вернул ошибку, виджет отправляет форму поиска так, будто его нет: срабатывают ваши обработчики и проверки, и покупатель попадает на привычную страницу результатов. С <lockstock-search> покупатель переходит на action с запросом в param.
Следите, чтобы ваша страница поиска работала: покупатель видит её каждый раз, когда ИИ-поиск не может помочь.