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

Оформить доступ с промокодом
100
#2470a1
Как блок с поиском Т838 добавить в ZeroBlock в Tilda
Избранное
Корзина
Оригинальные бренды
Поиск

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

1
Создали ZeroBlock и наполнили контентом, включили опцию
overflow - visible
2
Добавили в него элемент HTML с классом searchinput
(не удаляйте содержимое из блока, не оставляйте его пустым)
3
Добавили блок T838 на страницу и задали ему класс uc-zero-search
4
Добавили на страницу код в блок Другое - Т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;
}
.searchinput  .tn-atom.tn-atom__html,
.searchinput .t-rec,
.searchinput .t838,
.searchinput .t-container,
.searchinput .t-col,
.searchinput .t838__wrapper,
.uc-zero-search input, 
.uc-zero-search button,
.uc-zero-search .t838 .t838__blockbutton
{
    height: inherit;
}
.uc-zero-search .t838 .t838__blockbutton{
    padding-left: 10px;
}

#allrecords button.t-submit {
    height: inherit;
    padding: 0 18px;
}
</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>
Made on
Tilda