Как сделать поиск в Тильде

Рассмотрим все блоки с поиском, а также покажу, как сделать красивый поиск в Zero-block

Время чтения статьи около 7 минут.
Также, после статьи, есть подробная видеоинструкция

УСЛУГИ

— Курс Бешеное SEO на Тильде — Создаем с нуля сайт, который приносит много СЕО трафика
— Разработка интернет-магазинов с гарантией
— SEO-продвижение сайта

Содержание

Блоки для реализации поиска

До недавнего времени, реализовать поиск на Tilda Publishing, который вписывался в дизайн сайта и выглядел нормально, было очень сложно. Учитывая, что сам поиск на сайтах реализуют в шапке сайта.

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

1-й блок T985

Сейчас в Тильде появился отличный блок для поиска, который находится в разделе «Другое —> Блок T985»
Этот блок поиска открывается в pop-up (всплывающем) окне.
Самое прикольное, что мы можем этот блок открывать по ссылке, а ссылку можем эту повесить на любой элемент на странице, где можно дать ссылку.

Еще одна из фичей этого блока, то что можно сделать подсказки возле окна поиска. Для этого в блоке для подсказок, через запятую перечисляем нужные нам запросы. Особенно это полезно для SEO-продвижения сайта

Также, мы можем изменить стандартную иконку поиска на свою, для этого в настройках есть возможность загрузить свою картинку или загрузить из готовых библиотек платформы

Какие настройки у этого блока есть:

Выбрать где осуществлять поиск по сайту, есть 4 варианта: по всему сайту, по каталогу, по страницам и по постам (эти настройки есть у всех блоков с поиском)
Мы можем настроить стиль иконки и ее расположение, а также детально настроить для мобильной верстки. Эта настройка нужна, если вы будете использовать стандартную (встроенную) кнопку для открытия поиска
Можем изменить стиль самого поля для поиска. Задать скругление углов, настроить цвет обводки, фона, текста и тд.
В дополнительных настройках, мы можем задать сколько результатов будет отображаться на странице и отключить стандартную иконку поиска в этом блоке. Эта галочка нужна только тогда, когда вы хотите сделать, чтобы окно поиска открывалось только по заданной ссылке на каком то элементе

Настройки блока поиска T985

Вот так выглядят поисковые подсказки

2-й блок T838

Самый простой, но и от этого топорный блок. В стандартной тильдовской реализации, его использовать на сайте очень сложно. Куда можно вписать такой огромный блок с полем и кнопкой?
Ну точно не в меню. Либо нужно знать css и попробовать его как-то стилизовать.

Единственная вариация его применения, где более-менее он бы смотрелся, это наложить его на зеро блок. Но до этого, тоже не каждый додумался бы.
Про этот способ я говорил в серии видео «Создание интернет-магазина на Тильде с нуля»

В контенте блока мы можем только задать «Подсказку для поля поиска» и текст для кнопки. Кстати, если вам не нужна кнопка поиска, то можно ее убрать, удалив текст из этого поля.

Какие есть настройки:

Где искать (по всему сайту, по каталогу, по страницам и по постам)
Задать ширину блока
Задать отступ слева
Немного настроек стиля, это цвет бордюра, фона, текста, радиус скругления и цвет иконки
И стилизовать кнопку «Искать»

Наложение блока поиска на zero

3-й блок ME901

Этот блок находится не в разделе «Другое», а в разделе «Меню», в самом низу, просто потому, что он находится в блоке для навигации.
Этот блок относительно неплох (не в плане поиска, а плане реализации меню для сайта), но у него есть один жирный минус.

Есть у него особенность, этот блок раскрывается при ширине экрана более 1500 пикселей, а в свернутом виде он в бургере, при ширине, меньше 1500 px. Из-за этой особенности, возникает конфликт с другими блоками из категории "Меню". Ну и выглядит сама страница с развернутым меню странновато, из-за больших отступов по краям слева и справа

Что есть у него в Контенте:

Только «Подсказка значения в поле ввода поиска»

Теперь по настройкам:

Как и во всех поисках, это где искать
Можно отключить/включить сам поиск в этом блоке
Стилизовать поле для ввода - только нижний бордюр
Так как самой кнопки "Найти" нет, то и отсутствует настройка стилей для кнопки

Поиск с помощью блока ME901

Вот так выглядит меню в разрешении 1920. Согласитесь не очень?)

А теперь самое интересное
Кастомный поиск для Zero block

Что мы сделаем?
Мы возьмем блок Т838 (2-й блок), настроим и стилизуем его, как нам надо, потом с помощью строчки скрипта, перенесем его в нужное нам место в зеро блоке

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

Я показываю, как я выношу поиск в шапку сайта, между лого и номером телефона, вы же можете выбрать любое место на сайте

Приступаем

Для начала в зеро блоке, где хотим сделать наш поиск, создаем новый слой, для этого нажимаем слева на плюсик и выбираем "Add HTML"
Два раза жмем на этот слой, открывается код, удаляем все оттуда и вставляем вот этот код:


<div class = "searchinput"></div>

3. Устанавливаем левый верхний край там, где хотим, чтобы начинался наш блок с поиском, на скрине у меня на 4 колонке с небольшим отступом от верхнего края. Ширину этого слоя не регулируем, это сделаем через настройки блока поиска Т838
4. Нажимаем Save и выходим
5. Добавляем ниже блок Т 838 из раздела Другое
6. Убираем отступы сверху и снизу, а также убираем отступ от левого края, устанавливаем ширину блока (на скрине это 4 колонки), настраиваем стиль для поля и кнопки (если она будет)
7. Добавляем ниже блок Т123 html-код
8. В контент блока добавляем вот такой код:


<style>
    /*Настройки для кнопок*/
    .t838 .t-submit {
    /*Отступ слева и справа*/    
    padding-left: 20px !important;
    padding-right: 20px !important;
    /*Высота кнопки*/
    height: 40px  !important;
    }
    
    .t838 .t-input {
    /*Высота поля ввода*/
    height: 40px !important;
    }
</style>


<script>
$( document ).ready(function() {
    //Перемещаем блок с поиском в Zero
    $("#rec477940719").appendTo(".searchinput");
});
</script>

9. В строке 21, меняем #rec477940719 на id блока T838. Для этого идем в настройки блока, листаем в самый низ и там последняя строка Block id: и копируем его начиная с решетки
10. Сохраняем и опубликовываем страницу.
11. Если все работает, то идем в наш Зеро блок и настраиваем адаптацию поиска под все разрешения. На мобилках (все про мобильную адаптацию), я обычно этот слой скрываю, на его место, ставлю иконку поиска и ставлю ссылку на блок с поиском, блок №1 в этой статье
12. Чтобы результаты поиска выводились, а не скрывались за другим слоем, нам надо зайти в настройки Zero блока, где у нас поиск и поставить Overflow - Visible.
13. Идем в настройки сайта => Еще => Ставим галочку «Разрешить внутренний поиск по сайту (для блоков T838, T985, ME901)» Иначе поиск работать не будет

ВАЖНО!!! Все изменения будут видны, только на опубликованной странице

Какие настройки стиля есть в этом коде

padding-left и padding-right — это отступы в кнопках от края текста. Если у вас нет кнопки Найти, то эта настройка вам не нужна
height — здесь задается высота поля/кнопки. Там подписано для какого элемента задается

Добавление слоя, где будет поиск

Добавляем блок T 838, убираем отступы сверху и снизу, а также убираем отступ слева

В строке 21, меняем id блока на id блока нашего поиска

Где находится id блока

Видео: Как сделать кастомный поиск на сайте в Tilda

Код №1

Этот код добавляем в Зеро блок в то место, где должен быть поиск


<div class = "searchinput"></div>

Код №2

Этот код добавляем в блок T123


<style>
    /*Настройки для кнопок*/
    .t838 .t-submit {
    /*Отступ слева и справа*/    
    padding-left: 20px !important;
    padding-right: 20px !important;
    /*Высота кнопки*/
    height: 40px  !important;
    }
    
    .t838 .t-input {
    /*Высота поля ввода*/
    height: 40px !important;
    }
</style>


<script>
$( document ).ready(function() {
    //Перемещаем блок с поиском в Zero
    $("#rec477940719").appendTo(".searchinput");
});
</script>