Иконки корзины и избранного в Zero Block (нулевом блоке) для Тильды

Данный код взят с сайта mo-ti.ru/zerocart, у него много инструкций и модификаций, которые позволят улучшить опыт использования вашего сайта клиентами.

Чтобы добавить иконки корзины и избранного в Zero Block (нулевой блок) на Tilda, можно использовать код для вставки этого функционала. Вот пошаговая инструкция.

Своя иконка корзины в Tilda (ZeroBlock + ST100)

HTML-структура элементов в ZeroBlock (Нулевом блоке):

Добавляете три элемента:

Иконка корзины (Image, hape, buttom) → Класс my_cart_icon
Текст количества товаров (Text) → Класс my_cart_count
Текст суммы заказа (Text) → Класс my_cart_price (опционально)

Код для функционирования корзины (вставляем в блок "Другое" → T123):

✅ Код скопирован!

<!-- Иконка корзины в Zero Block (нулевом блоке) для Тильды av-five.ru -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Внутренний IIFE-блок для изоляции кода
    (function () {

        // Режим отображения пустой корзины:
        // true - скрывать элементы, если корзина пуста
        // false - показывать всегда
        const hideMode = false;

        // Добавляем внутренние классы для последующего управления стилями и событиями
        const cartIconElems = document.querySelectorAll(".my_cart_icon .tn-atom");
        cartIconElems.forEach(el => el.classList.add("cart-icon"));

        const cartCountElems = document.querySelectorAll(".my_cart_count .tn-atom");
        cartCountElems.forEach(el => el.classList.add("cart-count"));

        const cartPriceElems = document.querySelectorAll(".my_cart_price .tn-atom");
        cartPriceElems.forEach(el => el.classList.add("cart-price"));


        // Показываем элементы корзины (иконка, количество, цена)
        function showCart() {
            document.querySelectorAll(".cart-icon").forEach(el => el.classList.add("show-cart"));
            document.querySelectorAll(".cart-count").forEach(el => el.classList.add("show-cart"));
            document.querySelectorAll(".cart-price").forEach(el => el.classList.add("show-cart"));
        }

        // Основная функция обновления данных корзины
        function checkCartTotal() {
            if (window.tcart !== undefined) {

                if (!hideMode) showCart();

                const chCounter = window.tcart.total;     // Количество товаров
                const chPrice = window.tcart.prodamount;  // Сумма заказа

                // Если сумма равна 0
                if (chPrice === 0) {
                    document.querySelectorAll(".cart-price").forEach(el => el.innerHTML = '');

                    if (hideMode) {
                        // Скрываем все элементы корзины
                        document.querySelectorAll(".cart-icon").forEach(el => el.classList.remove("show-cart"));
                        document.querySelectorAll(".cart-count").forEach(el => el.classList.remove("show-cart"));
                        document.querySelectorAll(".cart-price").forEach(el => el.classList.remove("show-cart"));
                    }
                } else {
                    // Устанавливаем цену
                    document.querySelectorAll(".cart-price").forEach(el => el.innerHTML = chPrice + ' руб');

                    if (hideMode) showCart();
                }

                // Обновляем количество товаров
                document.querySelectorAll(".cart-count").forEach(el => el.innerHTML = chCounter);

                // Если товаров нет — блокируем клик по иконке
                if (chCounter == 0) {
                    document.querySelectorAll(".cart-icon").forEach(el => el.classList.add("blkElem"));
                } else {
                    document.querySelectorAll(".cart-icon").forEach(el => el.classList.remove("blkElem"));
                }

                // Защита от пустого значения
                if (chCounter === '') {
                    document.querySelectorAll(".cart-count").forEach(el => el.innerHTML = 0);
                }
            }
        }

        // Запускаем проверку через небольшую задержку, чтобы дождаться загрузки корзины
        setTimeout(() => checkCartTotal(), 500);


        // Наблюдатель за изменениями в стандартном счётчике корзины Tilda
        const observer = new MutationObserver(() => {
            setTimeout(() => checkCartTotal(), 300);
            document.querySelectorAll(".cart-icon").forEach(el => el.classList.add("cartcopyanim"));
            setTimeout(() => {
                document.querySelectorAll(".cart-icon").forEach(el => el.classList.remove("cartcopyanim"));
            }, 1000);
        });

        // Подключаем наблюдение к стандартному элементу корзины Tilda
        const carticonCounter = document.querySelector('.t706__carticon-counter');
        if (carticonCounter) {
            observer.observe(carticonCounter, {
                childList: true,
                subtree: true,
                characterDataOldValue: true
            });
        } else {
            console.log('cart counter option not active');
        }


        // Добавляем обработчик клика по иконке корзины — открывает модальное окно корзины
        document.querySelectorAll(".cart-icon").forEach(el => {
            el.addEventListener("click", e => {
                e.preventDefault();
                tcart__openCart(); // Открытие корзины Tilda
            });
        });

    })();
});
</script>

<style>
/* Блокировка взаимодействия с элементами, если корзина пуста */
.blkElem {
    pointer-events: none;
}

/* Анимация при добавлении товара */
.cartcopyanim {
    -webkit-animation: t706__pulse-anim 0.6s;
    animation: t706__pulse-anim 0.6s;
}

/* Скрываем текстовые элементы ZeroBlock до момента их активации */
.my_cart_icon .tn-atom,
.my_cart_count .tn-atom,
.my_cart_price .tn-atom {
    opacity: 0;
    pointer-events: none;
}

/* Активный режим отображения */
.r .show-cart {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Стилизация курсора для всех элементов */
.cart-icon,
.cart-count,
.cart-price {
    cursor: pointer;
}

/* Скрываем стандартную иконку корзины Tilda */
.t706__carticon {
    display: none !important;
}
</style>

Что делает этот код?

my_cart_icon
Иконка корзины (например, SVG или картинка)

my_cart_count
Отображает количество товаров в корзине

my_cart_price
Отображает общую сумму заказа

checkCartTotal()
Проверяет состояние корзины и обновляет отображение

observer
Следит за изменением счётчика товаров в стандартной корзине Tilda

showCart()
Управляет отображением элементов при добавлении товаров

Своя иконка избранного в Tilda (ZeroBlock + ST110)

HTML-структура элементов в ZeroBlock (Нулевом блоке):

Добавляете два элемента:

Иконка сердца (Image, hape, buttom) → Класс my_favorites_icon
Счетчик (Text) → Класс my_favorites_coun

Код для функционирования списка избранного (вставляем в "Другое" → T123):

<!-- Иконка избранного в Zero Block (нулевом блоке) для Тильды av-five.ru -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Внутренний IIFE-блок для изоляции переменных и функций
    (function () {

        // Режим отображения:
        // true - скрывать элементы, если избранное пусто
        // false - показывать всегда
        const emptyFavorites = false;

        // Находим элементы избранного по новым классам
        const fIcon = document.querySelectorAll('.my_favorites_icon');     // Иконка избранного
        const fTotal = document.querySelectorAll('.my_favorites_count');   // Количество товаров в избранном


        // Функция показывает элементы избранного
        function showWishIcon() {
            fIcon.forEach(el => el.classList.add('show-fav'));
            fTotal.forEach(el => el.classList.add('show-fav'));
        }

        // Функция скрывает элементы избранного
        function hideWishIcon() {
            fIcon.forEach(el => el.classList.remove('show-fav'));
            fTotal.forEach(el => el.classList.remove('show-fav'));
        }


        // Основная функция проверяет состояние избранного и обновляет интерфейс
        function checkTotalWishList() {
            if (window.twishlist !== undefined) {

                if (!emptyFavorites) showWishIcon();

                const nTot = twishlist.total; // Получаем количество товаров в избранном

                // Обновляем цифру количества
                fTotal.forEach(el => {
                    const atom = el.querySelector('.tn-atom');
                    if (atom) atom.innerText = nTot;
                });

                // Анимация при добавлении товара
                fIcon.forEach(el => el.classList.add('favorites_icon_anim'));
                setTimeout(function () {
                    fIcon.forEach(el => el.classList.remove('favorites_icon_anim'));
                }, 700);


                if (nTot === 0) {
                    if (emptyFavorites) {
                        hideWishIcon(); // Скрываем всё, если избранное пустое и режим активен
                    } else {
                        showWishIcon(); // Показываем, даже если пустое
                    }
                } else {
                    // Разрешаем клик по иконке, если есть товары
                    fIcon.forEach(el => el.classList.remove('blkFav'));
                    if (emptyFavorites) showWishIcon();
                }
            }
        }


        // Запускаем первую проверку после загрузки страницы
        setTimeout(function () {
            checkTotalWishList();
        }, 1000);


        // Наблюдатель за изменениями в стандартном счётчике избранного Tilda
        const observer = new MutationObserver(() => {
            setTimeout(function () {
                checkTotalWishList();
            }, 300);
        });

        const wishiconCounter = document.querySelector('.t1002__wishlisticon-counter');
        if (wishiconCounter) {
            observer.observe(wishiconCounter, {
                childList: true,
                subtree: true,
                characterDataOldValue: true
            });
        } else {
            console.log('wishlist counter option not active');
        }


        // Добавляем обработчик клика — открывает модальное окно "Избранное"
        fIcon.forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                twishlist__openWishlist(); // Открытие списка избранного Tilda
            });
        });


    })(); // Конец IIFE
});
</script>

<style>
/* Блокировка взаимодействия, если список пуст */
.blkFav {
    pointer-events: none;
}

/* Скрытие элементов до их активации */
.my_favorites_icon,
.my_favorites_count {
    opacity: 0;
    pointer-events: none;
}

/* Активный режим отображения */
.r .show-fav {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Стилизация иконки избранного */
.my_favorites_icon {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

/* Скрываем стандартную иконку избранного Tilda */
.t1002__wishlisticon {
    display: none !important;
}
</style>

Данный код взят с сайта mo-ti.ru/zerocart, у него много инструкций и модификаций, которые позволят улучшить опыт использования вашего сайта клиентами.