Чтобы добавить иконки корзины и избранного в 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()
Управляет отображением элементов при добавлении товаров
Иконка корзины (например, 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>