Иконки корзины и избранного в Zero Block Tilda
Как разместить иконки в своей шапке, добавить счётчики и показать сумму товаров.Подробнее о модеСвернуть описание
Иконки корзины и избранного в Zero Block Tilda
Как разместить иконки в своей шапке, добавить счётчики и показать сумму товаров.Что умеет мод
- Размещает иконки корзины и избранного в выбранных шейпах Zero Block.
- Использует штатные иконки Tilda или собственные SVG, PNG и WebP.
- Показывает количество товаров и сумму корзины с настройками оформления.
- Позволяет задать размеры по шейпу, адаптивы и подписи для доступности.
Как подключить
Добавьте штатные виджеты
Для корзины нужен ST100, для избранного — ST110. Если нужна только одна иконка, отключите вторую в конструкторе; второй виджет тогда не требуется.
Подготовьте шейпы
В Zero Block создайте шейпы без заливки. Задайте CSS Class Name cart для корзины и fav для избранного либо укажите собственные классы в конструкторе. Один класс можно использовать у нескольких шейпов.
Выберите область и оформление
Укажите ID Zero Block или общий uc-класс. В режиме «По шейпу» размер задаётся в Tilda на каждом адаптиве. Настройте иконки, счётчики и сумму, оставив для них место вокруг шейпа.
Установите и проверьте
Вставьте код в T123 после Zero Block, ST100 и ST110. Опубликуйте страницу, добавьте и удалите товары, измените количество и откройте окна через новые иконки. Проверьте телефон и управление клавиатурой.
Что учитывать. Корзина, избранное и данные заказа остаются под управлением Tilda. Сумма рядом с иконкой берётся из корзины и не включает стоимость доставки.
Вопросы и ограничения
Можно показать только корзину?
Да. Включите корзину и отключите избранное. Для такого сценария достаточно ST100 и шейпа корзины.
Нужна ли собственная картинка иконки?
Нет. Можно использовать иконку из блока Tilda. Для своей выберите соответствующий источник и укажите прямую HTTPS-ссылку на SVG, PNG или WebP.
Как задать положение и размер на телефоне?
В режиме «По шейпу» настройте сам шейп в мобильном адаптиве Zero Block. Для суммы, счётчика и других параметров используйте адаптивные настройки конструктора.
Почему в редакторе результат отличается от сайта?
Штатные скрипты магазина в редакторе работают не полностью. Проверяйте опубликованную страницу и реальные действия с товарами.
Доступ к конструктору
Это бесплатная модификация. Войдите в аккаунт, чтобы настроить её и получить код.
