Поиск в Zero Block на Тильде: как встроить строку

Zero Block даёт свободу вёрстки, но вместе с ней и ответственность: стандартный блок поиска сюда не перетаскивается. Разберём, как разместить строку поиска в собственном макете и ничего не сломать.

Что нужно решить до вёрстки

Три вопроса, от которых зависит вся дальнейшая работа:

1. Где живут результаты? На отдельной странице поиска, в выпадающем слое под строкой или в модальном окне.
2. Откуда берутся данные? Встроенный поиск Тильды, ваш каталог в JSON или внешний сервис.
3. Что происходит при пустом ответе? Нужен заранее продуманный экран, а не белое пятно.

Ответы определяют разметку. Менять их потом дороже, чем подумать десять минут сейчас.

Разметка строки в Zero Block

Внутри Zero Block добавляется блок кода T123 или элемент HTML, в который кладётся обычная форма:

<form class="site-search" role="search">
  <input type="search" name="q" placeholder="Что нужно сделать?" aria-label="Поиск по сайту">
  <button type="submit">Найти</button>
</form>

Несколько правил, которые экономят время:

• задавайте свои классы, а не полагайтесь на классы Тильды: они меняются между версиями;
• ставьте type="search" и aria-label — это даёт правильную клавиатуру на телефоне и доступность;
• в плейсхолдере пишите не «Поиск», а пример запроса: он подсказывает, как формулировать.

Как связать строку с результатами

Вариант с отдельной страницей

Самый устойчивый. Форма отправляет запрос на страницу результатов, адрес вида /search?q=..., а страница разбирает параметр и рисует выдачу. Работает без JavaScript, ссылку на выдачу можно переслать.

Вариант с выпадающим слоем

Строка остаётся на месте, результаты появляются под ней. Нужен небольшой скрипт: слушать ввод, ждать паузу в наборе, запрашивать данные, рисовать список.

Обязательно предусмотрите:

• закрытие по клику вне слоя и по клавише Escape;
• индикатор загрузки — без него кажется, что ничего не происходит;
• ограничение по числу результатов, иначе слой закрывает всю страницу.

Вариант с окном помощника

Строка открывает окно диалога, в котором человек описывает задачу словами. Годится, когда каталог сложный, а клиент не знает названий. Здесь вёрстка минимальна: строка и вызов виджета.

Мобильная версия: три частые поломки

• Строка уезжает за край. В Zero Block элементы позиционируются абсолютно, поэтому для узкого экрана нужно отдельно настроить размеры и положение.
• Клавиатура перекрывает результаты. Слой с выдачей должен прокручиваться и учитывать высоту видимой области.
• Кнопка «Найти» слишком мелкая. Минимальный удобный размер зоны нажатия — около 44 пикселей по высоте.

Что проверить перед публикацией

1. Ввод с телефона и с клавиатуры, включая отправку по Enter.
2. Пустой запрос: форма не должна вести на пустую страницу.
3. Запрос без результатов: экран с текстом и следующим шагом.
4. Длинный запрос из десяти слов: вёрстка не должна расползаться.
5. Скорость: результаты появляются быстро, иначе люди жмут кнопку повторно.

Вывод и следующий шаг

Zero Block не мешает поиску — он просто перекладывает вёрстку на вас. Сложность не в строке, а в том, что происходит после нажатия: продумайте результаты и пустой ответ, и остальное будет мелкой работой.

Следующий шаг: решите, где показывать результаты, и сверстайте экран «ничего не найдено» первым. Дальше строка встанет на место за полчаса.

Общий обзор способов — в статье как сделать поиск по сайту в Тильде.

Частые вопросы

Можно ли использовать стандартный блок поиска внутри Zero Block?

Нет, стандартные блоки живут вне Zero Block. Внутри верстается своя форма.

Нужен ли JavaScript?

Для отдельной страницы результатов — нет. Для выпадающих подсказок и мгновенной выдачи — да.

Как искать по каталогу Тильды?

Данные каталога можно забрать в JSON и фильтровать на странице либо передать во внешний сервис поиска.

Почему поиск не находит новые страницы?

Встроенный поиск зависит от индексации сайта, она происходит не мгновенно после публикации.

Как сделать подсказки в строке?

Запрашивать список совпадений при вводе с задержкой около 300 миллисекунд и показывать не больше 5–7 подсказок.

Что писать на странице «ничего не найдено»?

Короткий текст без извинений, форму заявки или контакт и ссылки на популярные категории.