Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Стандартная корзина на Тильде, нужно добавить возможность открывать ее не только через виджет, но и по кнопке.

_ Ученик (146), на голосовании 1 месяц назад
Стандартная корзина на Тильде, нужно добавить возможность открывать ее не только через виджет, но и по кнопке. В идеале еще вынести счетчик добавленных товаров отдельно. Как подобное осуществить?
Голосование за лучший ответ
Анонимус Просветленный (30817) 2 месяца назад
Создание кнопки для открытия корзины
  • В редакторе Тильды добавьте кнопку, которую вы хотите использовать для открытия корзины.
  • Установите для кнопки уникальный ID, например, open-cart.

Добавление счетчика товаров
  • Для отображения счетчика добавленных товаров, вам нужно будет создать отдельный блок или элемент, который будет показывать количество товаров в корзине.

Использование JavaScript
  • Тильда позволяет добавлять собственный JavaScript код. Вам нужно будет добавить следующий код в раздел "Настройки" -> "Дополнительные настройки" -> "HTML-код".
 <script> 
document.addEventListener('DOMContentLoaded', function() {
// Получаем кнопку и счетчик
const openCartButton = document.getElementById('open-cart');
const cartCountElement = document.getElementById('cart-count'); // Убедитесь, что у вас есть элемент с этим ID для счетчика

// Функция для открытия корзины
function openCart() {
// Открываем корзину
window.TildaCart && window.TildaCart.open();
}

// Добавляем обработчик события на кнопку
openCartButton.addEventListener('click', openCart);

// Функция для обновления счетчика
function updateCartCount() {
const cart = window.TildaCart && window.TildaCart.getCart();
const count = cart ? cart.items.length : 0;
cartCountElement.textContent = count; // Обновляем текст счетчика
}

// Обновляем счетчик при загрузке страницы
updateCartCount();

// Обновляем счетчик при добавлении товара в корзину
document.addEventListener('tilda.cart.add', updateCartCount);
});
</script>
Создание элемента для счетчика
  • Создайте элемент на странице, который будет отображать количество товаров в корзине. Убедитесь, что у него установлен ID cart-count.
 <div id="cart-count">0</div> 
Похожие вопросы