Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Как блок с поиском Т838 добавить в ZeroBlock в Tilda

Избранное

Корзина

Оригинальные бренды

Поиск

Как блок с поиском Т838 добавить в ZeroBlock в Tilda

Создали ZeroBlock и наполнили контентом, включили опцию
overflow - visible

Добавили в него элемент HTML с классом searchinput

Добавили блок T838 на страницу и задали ему класс uc-zero-search

Добавили на страницу код в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Перемещаем штатный поиск T838 в Zero, меняем иконку в поиске

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
.uc-zero-search input , .uc-zero-search button {
    height: 50px;
}
.uc-zero-search button  {
    padding: 0 20px;
}
div.uc-zero-search {
    padding: 0 !important;
}
.t838 .t-container {
    max-width: none;
}
.t838 .t-col {
    max-width: none;
    padding: 0;
    margin: 0;
}   
.searchinput{z-index:99 !important}
</style>


<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
    let searchWrap = document.querySelector('.searchinput .tn-atom');
    let searchBlock = document.querySelector('.uc-zero-search');
    searchWrap.append(searchBlock);
})();
});
</script>

Библиотека для примера (замена иконки в поле)


<style>
svg.t838__search-icon { display: none}
.t838__blockinput {
    background-image: url(https://static.tildacdn.com/tild3365-3735-4561-a162-373563636631/2932802.svg);
    background-size: 40px 40px;
    background-position: 0px center;
    background-repeat: no-repeat;
}
</style>