LIFEHACKOV.RU

Tilda Publishing

Как добавить избранное в 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 канале.

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

  • Здравствуйте! Просмотрела ваше виде про добавление избранного в 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’;
    }
    });

    Ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Сайт функционирует за счет рекламы

Пожалуйста, выключи блокировщик рекламы, чтобы продолжить пользоваться сайтом