Как добавить избранное в Zero Block или в меню в Tilda Publishing
Содержимое
Введение
Как добавить избранное в Zero Block или в меню? Zero Block и Tilda Publishing – это популярные инструменты для создания сайтов, которые позволяют быстро и легко создавать красивые и функциональные страницы. Одним из важных элементов любого сайта является навигационное меню, которое позволяет пользователям легко перемещаться по сайту. Кроме того, возможность добавлять избранные элементы в навигационное меню может улучшить опыт пользователей и повысить их вовлеченность на сайте.
Как сделать свою иконку избранного в zero block
Для добавления избранного в Zero Block или в навигационное меню в Tilda Publishing следуйте этим простым шагам:
- Войдите в свой аккаунт на Tilda Publishing и откройте нужный проект.
- Нажмите на кнопку “Добавить блок” и выберите “Zero Block”.
- Еще раз нажмите на кнопку “Добавить блок”, пункт “Магазин” и выберите блок “Избранное”.
- Добавьте блок или несколько блоков с товарами.
- Настройте Zero Block по своему усмотрению, добавляя необходимые элементы и размещая их на странице. Этот блок и будет выступать в качестве навигационного меню.
- Нажмите на “+” и выбираем add image.
- Загрузите в тильду свою иконку для избранного.
- Расположите иконку нужным вам образом.
- Нажмите по ней правой кнопкой мыши и выберите пункт add css class name.
- Придумайте class name и впишите в соответствующее поле. (Пример: new_favorites)
- Снова нажмите на иконку избранного и найдите пункт link.
- В поле URL введите следующее значение без кавычек: “#showfavorites“.
Теперь необходимо сделать свой индикатор количества добавленных товаров в избранное (счётчик). Для этого:
- Нажмите на “+” и выберите add text.
- Удалите текст для примера и впишите в это текстовое поле цифру 0.
- Настройте стили этого текстового блока по своему усмотрению и расположите его рядом с иконкой избранного.
- Нажмите на текстовый блок правой кнопкой мыши и выберите пункт add css class name.
- Придумайте class name и впишите в соответствующее поле. (Пример: new_counter)
Итак, подготовительные мероприятия завершены. Мы создали свою иконку с индикатором для избранных товаров в tilda publishing и поместили её в zero block.
Как скрыть стандартную иконку избранного в tilda publishing
Для того, чтобы ваша иконка избранного функционировала, необходимо наличие стандартного блока “Избранное” в tilda publishing. Этот блок будет на сайте, но его нужно будет скрыть. Для этого:
- Перейдите в zero block.
- Нажмите на”+” и выберите add HTML.
- Зайдите в HTML блок и пропишите в нем следующий код:
<style>
.new_favorites { //class name вашей иконки
display: block;
cursor: pointer;
}
.t1002__wishlisticon {//class name стандартной иконки иконки
display: none;
}
</style>


- Сохраните изменения и выйдите из zero block.
- Опубликуйте страницу.
После этих действий стандартная иконка избранного будет скрыта, а все ей функции будет выполнять ваша новая иконка.
Как настроить счётчик избранного в tilda publishing
После того, как вы скрыли стандартную иконку избранного, необходимо настроить идентификатор количества добавленных товаров в избранное. Для этого:
- Снова перейдите в zero block.
- Зайдите в HTML блок и пропишите в нём следующий код:
<script>
let counterSb = document.querySelector('.new_counter'); //class name вашего идентификатора
let productsSb = document.querySelectorAll('.t1002__addBtn_active'); //class name кнопки «избранное» рядом с любым товаром
//Прописываем стили для нашего идентификатора (счётчика)
counterSb.style.backgroundColor = '#FF4A4A';
counterSb.style.borderRadius = '50%';
counterSb.style.paddingTop = '5px';
counterSb.style.paddingBottom = '5px';
// Обновляем значение счётчика
counterSb.textContent = productsSb.length;
// Создаем новый экземпляр MutationObserver
const observer = new MutationObserver(mutations => {
// При изменении DOM обновляем значение счётчика
productsSb = document.querySelectorAll('.t1002__addBtn_active');
counterSb.textContent = productsSb.length;
// Проверяем, равно ли значение счётчика нулю
if (productsSb.length === 0) {
// Скрываем счётчик, если значение равно нулю
counterSb.style.display = 'none';
} else {
// Иначе показываем счётчик
counterSb.style.display = 'block';
}
});
// Запускаем наблюдение за изменениями в DOM
observer.observe(document.body, {
childList: true,
subtree: true,
});
</script>


- Сохраните изменения и выйдите из zero block.
- Опубликуйте страницу.
Вы сделали свою иконку избранного и добавили её в навигационное меню в tilda publishing!
Заключение
Добавление избранного в Zero Block или в навигационное меню в Tilda Publishing — это простой и эффективный способ улучшить опыт пользователей и повысить вовлеченность на сайте. Следуя простым инструкциям, вы можете быстро и легко добавить свою иконку избранного на свой tilda сайт, что сделает его более привлекательным.
Узнайте как скрывать блоки в tilda и показывать их нажатием на кнопку в нашей статье или на YouTube канале.
Здравствуйте! Просмотрела ваше виде про добавление избранного в zero, всё понятно рассказано, но почему-то после добавления второй части кода и публикации, исчисление избранного исчезла и ничего не показывает. Можете пожалуйста подсказать в чём проблема?
Счетчик не работает
на айфоне не грузит на любом браузере! проблема вроде где то тут
const observer = new MutationObserver(mutations => {
// При изменении DOM обновляем значение счётчика
productsSb = document.querySelectorAll(‘.t1002__addBtn_active’);
counterSb.textContent = productsSb.length;
// Проверяем, равно ли значение счётчика нулю
if (productsSb.length == 0) {
// Скрываем счётчик, если значение равно нулю
counterSb.style.display = ‘none’;
} else {
// Иначе показываем счётчик
counterSb.style.display = ‘block’;
}
});