URL скопирован в буфер обмена!
Как сделать поиск по сайту в Zero Block на Tilda?
С помощью этой модификации можно создать в Zero Block поле поиска по всему сайту. Дополнительно можно вывести кнопку очистки поля и кликабельные быстрые подсказки, которые автоматически подставляют текст в поле поиска.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
ID блока T838
Название переменной поля поиска
Класс кнопки поиска
Класс кнопки очистки поиска
Класс для кнопок подсказок
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD131--><style>
.tcd-closebtn, .tcd-search-btn, .tcd-quick-btn {
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const TildaT838TCD = document.querySelector('#rec1365042761');
if (TildaT838TCD) {
TildaT838TCD.style.position = 'absolute';
TildaT838TCD.style.left = '-9999px';
TildaT838TCD.style.width = '1px';
TildaT838TCD.style.height = '1px';
}
setTimeout(function() {
const TCDzeroinput = document.querySelector('input[name="search"]');
const TCDsearchBtnTilda = document.querySelector('.tcd-search-btn');
const TCDorgignalsrchTC = document.querySelector('#rec1365042761 input.t838__input');
const TCDorgignalbtnTC = document.querySelector('#rec1365042761 button.t-submit');
const TildaclearbtnTC = document.querySelector('.tcd-clear-btn');
const TildaquickbtnTC = document.querySelectorAll('.tcd-quick-btn');
if (TCDzeroinput && TCDsearchBtnTilda && TCDorgignalsrchTC && TCDorgignalbtnTC) {
TCDzeroinput.addEventListener('input', function() {
TCDorgignalsrchTC.value = TCDzeroinput.value;
TCDorgignalsrchTC.dispatchEvent(new Event('input', { bubbles: true }));
});
TCDsearchBtnTilda.addEventListener('click', function(e) {
e.preventDefault();
TCDorgignalbtnTC.click();
});
TCDzeroinput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
TCDsearchBtnTilda.click();
}
});
if (TildaclearbtnTC) {
TildaclearbtnTC.addEventListener('click', function(e) {
e.preventDefault();
TCDzeroinput.value = '';
TCDorgignalsrchTC.value = '';
TCDorgignalsrchTC.dispatchEvent(new Event('input', { bubbles: true }));
});
}
TildaquickbtnTC.forEach(function(btn) {
btn.addEventListener('click', function() {
const textti = btn.textContent.trim();
TCDzeroinput.value = textti;
TCDorgignalsrchTC.value = textti;
TCDorgignalsrchTC.dispatchEvent(new Event('input', { bubbles: true }));
});
});
}
}, 500);
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Добавляем на страницу блок поиска T838, копируем его id и вставляем в генератор в поле "ID блока T838";
2. Создаём Zero Block и добавляем в него форму с одним полем ввода(тип поля: поле ввода в одну строку). В настройках поля variable name указываем search. Удаляем у формы стандартную кнопку, для этого убираем текст и задаём ширину и высоту 0px;
3. Создаем в зеро блоке кнопку с классом tcd-search-btn при клике на которую будет происходить поиск;
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
4. При необходимости можно добавить дополнительные кнопки для поиска:
Кнопка с классом tcd-clear-btn - при клике очищает поле поле поиска;
Кнопки с классом tcd-quick-btn - при клике на кнопки текст из кнопок будет подставляться в поиск. Удобно использовать для быстрых подсказок, можно сделать несколько кнопок с разным текстом;
5. В настройках сайта в разделе "еще" включаем галочку возле пункта "Разрешить внутренний поиск по сайту (для блоков T838, T985, ME901)";
3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком с формой.
2. Создаём Zero Block и добавляем в него форму с одним полем ввода(тип поля: поле ввода в одну строку). В настройках поля variable name указываем search. Удаляем у формы стандартную кнопку, для этого убираем текст и задаём ширину и высоту 0px;
3. Создаем в зеро блоке кнопку с классом tcd-search-btn при клике на которую будет происходить поиск;
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
4. При необходимости можно добавить дополнительные кнопки для поиска:
Кнопка с классом tcd-clear-btn - при клике очищает поле поле поиска;
Кнопки с классом tcd-quick-btn - при клике на кнопки текст из кнопок будет подставляться в поиск. Удобно использовать для быстрых подсказок, можно сделать несколько кнопок с разным текстом;
5. В настройках сайта в разделе "еще" включаем галочку возле пункта "Разрешить внутренний поиск по сайту (для блоков T838, T985, ME901)";
3. Копируем код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком с формой.
НАЙТИ
TiCode
