Поиск в Zero Block: почему штатный блок туда не ставится

Вы собрали шапку в Zero Block — логотип, меню, корзина — и хотите добавить туда поле поиска. Открываете библиотеку, а блока поиска в списке элементов Zero Block нет. Это не баг и не ограничение тарифа: в Тильде это два разных мира, и соединить их штатными средствами нельзя.

Почему так устроено

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

Блок поиска T838 — из первой категории. Он приходит со своей вёрсткой, своими классами и своей логикой, рассчитанными на то, что он занимает полосу страницы целиком. Внутрь холста, где всё позиционируется вручную, его положить некуда — в редакторе Zero Block такого элемента просто нет.

Что есть в Zero Block — это элемент HTML (в редакторе он называется «код»). В него можно положить произвольную разметку. Именно на нём держатся все обходные пути.

Принятый обходной путь

Решение, которое кочует по сообществу Тильды, устроено так: поставить T838 на страницу как обычно, а потом скриптом перенести его в Zero Block — физически переместить узел DOM внутрь нужного элемента холста.

1. В Zero Block добавляется элемент HTML

   Ему присваивается класс searchinput — это устоявшееся в Тильде соглашение для поля поиска в Zero Block. Пустым элемент оставлять нельзя: пустые элементы холста схлопываются.

2. Блок T838 добавляется на страницу отдельно

   И получает служебный класс — обычно uc-zero-search, — чтобы к нему можно было обратиться из скрипта и стилей.

3. У Zero Block включается overflow: visible

   Иначе перенесённое поле обрежется по границе холста, если выпадающая часть выходит за неё.

4. В блок T123 кладётся скрипт переноса

   Он дожидается загрузки страницы, находит оба узла и перекладывает поиск внутрь элемента холста:

document.addEventListener("DOMContentLoaded", function () {
  var wrap  = document.querySelector('.searchinput .tn-atom');
  var block = document.querySelector('.uc-zero-search');
  wrap.append(block);
});

К этому прилагается блок CSS на два десятка правил: перенесённый T838 приносит с собой контейнеры и колонки Тильды со своими максимальными ширинами, отступами и высотами, и всё это нужно обнулять вручную — иначе поле не совпадает по высоте с соседними элементами шапки.

Где он ломается

Способ рабочий — им пользуются, и он решает задачу. Но у него есть цена, о которой узнают позже:

• Скрипт молчит, когда не сработал. Если элемента с классом searchinput на странице не оказалось, querySelector вернёт null, а обращение к .append уронит скрипт с ошибкой в консоли. Внешне это выглядит как «поиск просто исчез из шапки» — без единого намёка на причину.
• Он привязан к внутренним классам Тильды. .tn-atom, .t838__wrapper, .t838__blockinput — это разметка платформы, а не публичный интерфейс. Тильда вправе поменять её в любом обновлении, и тогда сломается не поиск как функция, а конкретно ваша шапка.
• Он не переживает правку макета. Стоит поменять высоту шапки или добавить элемент рядом — и подобранные вручную height с padding перестают совпадать. Настраивать приходится заново, и в мобильной версии отдельно.
• Поиск от этого лучше не становится. Вы потратили вечер на перенос блока — и получили ровно тот же штатный поиск, который не находит наушнеки и не знает, что ноут — это ноутбук. Переехало поле, а не логика.

Что ещё пробуют

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

Своё поле с переходом на поисковую страницу. В элементе HTML верстается <input> с обработчиком, который по Enter отправляет человека на страницу поиска с запросом в адресе. Гибче предыдущего и не зависит от классов Тильды, но требует, чтобы поисковая страница умела читать запрос из адреса, — а штатный T838 этого не делает.

Как это решается у нас

Мы столкнулись с той же задачей с другой стороны: наш виджет должен открываться из поля поиска, где бы оно ни стояло. Переносить чужие узлы DOM для этого не нужно — достаточно услышать клик.

Поэтому в Zero Block вы верстаете поле как хотите — своей вёрсткой, своими стилями, со своей иконкой — и вешаете на него атрибут:

<div data-querra-search>
  <!-- ваша вёрстка поля или иконки -->
</div>

Виджет находит его сам и открывает по клику полноэкранный поиск по каталогу. Класс searchinput — то самое соглашение из обходного пути выше — тоже распознаётся, так что если вы уже верстали поле под перенос блока, менять разметку не придётся: скрипт переноса и стили-костыли можно просто удалить.

Ни overflow, ни выравнивание высот, ни обнуление контейнеров Тильды при этом не нужны: выдача живёт в Shadow DOM поверх страницы, а ваш элемент остаётся вашим — виджет его не переставляет и не перекрашивает.

Отдельно про штатное поле: если поиск в шапке у вас всё-таки обычный блок — T838, T985 или лупа в меню ME901 — атрибут не нужен вовсе. Виджет узнаёт эти блоки по разметке и перехватывает клик сам. Разбор всех четырёх блоков — в соседней статье.