Как добавить избранное в Zero Block или в меню в Tilda Publishing

Введение

Как добавить избранное в Zero Block или в меню? Zero Block и Tilda Publishing – это популярные инструменты для создания сайтов, которые позволяют быстро и легко создавать красивые и функциональные страницы. Одним из важных элементов любого сайта является навигационное меню, которое позволяет пользователям легко перемещаться по сайту. Кроме того, возможность добавлять избранные элементы в навигационное меню может улучшить опыт пользователей и повысить их вовлеченность на сайте.

Как сделать свою иконку избранного в zero block

Для добавления избранного в Zero Block или в навигационное меню в Tilda Publishing следуйте этим простым шагам:

1. Войдите в свой аккаунт на Tilda Publishing и откройте нужный проект.
2. Нажмите на кнопку “Добавить блок” и выберите “Zero Block”.
3. Еще раз нажмите на кнопку “Добавить блок”, пункт “Магазин” и выберите блок “Избранное”.
4. Добавьте блок или несколько блоков с товарами.
5. Настройте Zero Block по своему усмотрению, добавляя необходимые элементы и размещая их на странице. Этот блок и будет выступать в качестве навигационного меню.
6. Нажмите на “+” и выбираем add image.
7. Загрузите в тильду свою иконку для избранного.
8. Расположите иконку нужным вам образом.
9. Нажмите по ней правой кнопкой мыши и выберите пункт add css class name.
10. Придумайте class name и впишите в соответствующее поле. (Пример: new_favorites)
11. Снова нажмите на иконку избранного и найдите пункт link.
12. В поле URL введите следующее значение без кавычек: “#showfavorites“.

Теперь необходимо сделать свой индикатор количества добавленных товаров в избранное (счётчик). Для этого:

1. Нажмите на “+” и выберите add text.
2. Удалите текст для примера и впишите в это текстовое поле цифру 0.
3. Настройте стили этого текстового блока по своему усмотрению и расположите его рядом с иконкой избранного.
4. Нажмите на текстовый блок правой кнопкой мыши и выберите пункт add css class name.
5. Придумайте class name и впишите в соответствующее поле. (Пример: new_counter)

Итак, подготовительные мероприятия завершены. Мы создали свою иконку с индикатором для избранных товаров в tilda publishing и поместили её в zero block.

Как скрыть стандартную иконку избранного в tilda publishing

Для того, чтобы ваша иконка избранного функционировала, необходимо наличие стандартного блока “Избранное” в tilda publishing. Этот блок будет на сайте, но его нужно будет скрыть. Для этого:

1. Перейдите в zero block.
2. Нажмите на”+” и выберите add HTML.
3. Зайдите в HTML блок и пропишите в нем следующий код:

<style>
    .new_favorites { //class name вашей иконки
        display: block;
        cursor: pointer;
    }
   .t1002__wishlisticon {//class name стандартной иконки иконки
       display: none;
   }
</style>

1. Сохраните изменения и выйдите из zero block.
2. Опубликуйте страницу.

После этих действий стандартная иконка избранного будет скрыта, а все ей функции будет выполнять ваша новая иконка.

Как настроить счётчик избранного в tilda publishing

После того, как вы скрыли стандартную иконку избранного, необходимо настроить идентификатор количества добавленных товаров в избранное. Для этого:

1. Снова перейдите в zero block.
2. Зайдите в 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>

1. Сохраните изменения и выйдите из zero block.
2. Опубликуйте страницу.

Вы сделали свою иконку избранного и добавили её в навигационное меню в tilda publishing!

Заключение

Добавление избранного в Zero Block или в навигационное меню в Tilda Publishing — это простой и эффективный способ улучшить опыт пользователей и повысить вовлеченность на сайте. Следуя простым инструкциям, вы можете быстро и легко добавить свою иконку избранного на свой tilda сайт, что сделает его более привлекательным.

Узнайте как скрывать блоки в tilda и показывать их нажатием на кнопку в нашей статье или на YouTube канале.