Что подготовить
Нужны доступ к шаблону или администратору сайта, выбранный магазин в кабинете и загруженный каталог. Для Битрикса сначала выполните установку модуля. Для другого сайта откройте «Настройки», найдите «Ключи интеграции» и «Виджет на сайт». В браузер передаётся только public key; integration key и токены туда не вставляют.
Проверьте, нет ли уже подключения Anmarto в шаблоне, системе управления тегами или настройках модуля. Код старого виджета /s/WIDGET_CODE.js и нынешний /widget/anmarto-widget.js не являются взаимозаменяемыми.
Битрикс: строка в шапке
- Откройте настройки установленного модуля
abr.searchв административной части Битрикса. - Для автоматического подключения используйте «подключать автоматически, без правки шаблона» и «вставлять в блок вёрстки».
- В поле «Блок:» укажите отдельную обёртку поиска, например
#site-search. Кнопка «Выбрать на сайте» помогает получить селектор. - Не выбирайте общий
header: виджет накрывает содержимое выбранного блока целиком, включая прежнее поле и кнопку. - В «Страница результатов» укажите
/search/, только если такая страница создана. Пустое значение оставляет полную выдачу поверх текущей страницы.
На мобильном устройстве тема может иметь другую шапку. Убедитесь, что выбранный селектор находит нужное место и там. Не удаляйте рабочий резервный поиск до проверки новой строки.
Битрикс: отдельная страница результатов
Создайте страницу /search/index.php штатным способом. Пример обёртки с обычными шапкой и подвалом Битрикса:
<?php
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/header.php');
$APPLICATION->SetTitle('Поиск');
$APPLICATION->IncludeComponent(
'abr:search.page',
'',
['MOUNT_ID' => 'anmarto-results', 'SET_TITLE' => 'Y']
);
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/footer.php');
Компонент создаёт контейнер и подключает выдачу; вручную дублировать его загрузчик не нужно. Он читает q или searchText из адреса, а SET_TITLE разрешает поставить заголовок по запросу. MOUNT_ID должен быть уникальным на странице. Повторный чат компонент не поднимает.
Если тема ограничивает ширину, изменяйте внешнюю обёртку страницы, а не внутренности карточек:
.search-page-container { width: 100%; min-width: 0; }
#anmarto-results { width: 100%; min-width: 0; }
Первый селектор здесь иллюстративный: назначьте этот класс своей обёртке. Компонент не создаёт его автоматически.
Другой сайт: нынешний виджет
- В «Настройки → Виджет на сайт» скопируйте сгенерированный код с адресом вашего сервиса.
- Подготовьте пустой контейнер
<div id="site-search"></div>в шапке. - В единственный загрузчик добавьте
data-search-mount="#site-search". Размещайте его перед</body>. - При необходимости добавьте
data-results-url="/search/"; на созданной странице результатов используйтеdata-search-page="#search-results"и соответствующий контейнер. - Для поиска без консультанта используйте
data-consultant="false". Подключение корзины проверяйте отдельно.
| Параметр | Назначение |
|---|---|
data-key="PUBLIC_KEY" |
Публичный идентификатор выбранного магазина |
data-query-param="q" |
Имя параметра запроса; у WordPress может быть s |
data-placeholder |
Подпись поисковой строки |
data-results-url |
Переход по Enter и лупе |
Проверка и неисправности
Введите точное название известного товара, нажмите Enter, затем откройте фильтр и карточку. Повторите на телефоне. Ссылка вида /search/?q=герметик должна восстанавливать запрос. Это пример, а не обещание наличия герметика в вашем каталоге.
Сообщение «Поиск ещё не подключён» у компонента означает, что нужно проверить подключение модуля и его ключ. Пустая выдача при работающем поле требует проверки каталога. Две строки или две кнопки чата обычно требуют удаления дублирующего подключения. Если скрылась вся шапка, уточните селектор контейнера. Не заменяйте ключ на секретный для устранения ошибки.
Далее: внешний вид, корзина, проверка подключения, все статьи.