Иконка корзины в Zero Block: счётчик и сумма заказа

Вы сверстали свою шапку в Zero Block, а стандартная иконка корзины стоит отдельно и не попадает в композицию. Её хочется поставить рядом с меню, показать число товаров и при необходимости сумму заказа.

Для этого не нужно заново собирать всю корзину. Мод «Иконки корзины и избранного в зеро-блоке» связывает вашу композицию со штатными окнами Tilda. Вы управляете расположением, а товары и оформление заказа остаются в ST100.

Для корзины нужен блок ST100, для избранного — ST110. Если вы показываете только корзину, вторую функцию можно отключить. Добавлять пустое избранное ради одной иконки не требуется.

До оформления проверьте обычное добавление товара. Если ST100 не открывается без мода, сначала исправьте базовую настройку. Новая иконка будет вести к тому же окну, а не заменит отсутствующую корзину.

Создайте шейп — обычную фигуру без заливки — там, где должна стоять иконка. В его настройках задайте CSS Class Name cart. Для избранного используется fav. При желании можно выбрать собственные короткие имена и повторить их в конструкторе.

Проверьте место на каждом адаптиве Zero. Оставьте запас справа или сверху под счётчик, а рядом — под сумму. Число «12» занимает больше места, чем «1», и не должно заходить на соседний пункт меню.

1. Откройте конструктор и включите нужные функции: корзину, избранное или обе.
2. Укажите ID своего Zero Block либо общий класс нужных блоков.
3. Выберите режим «По шейпу», если размеры должны задаваться в Zero.
4. Настройте вид иконки, счётчик и показ суммы. Можно взять штатную иконку или свою картинку.
5. Поставьте сгенерированный код в T123 после Zero Block и штатных виджетов. Опубликуйте страницу.

Не пытайтесь одновременно подчеркнуть всё: крупную иконку, яркий счётчик и длинную сумму. Для небольшой мобильной шапки обычно достаточно значка и числа товаров. Сумму можно оставить в более просторной версии.

Сумма рядом с иконкой берётся из корзины и не включает доставку. Поэтому лучше подписать её как сумму товаров, если рядом есть пояснение. Не называйте это окончательной стоимостью заказа: она может измениться после выбора доставки.

Добавьте один товар и откройте корзину через новую иконку. Затем измените количество, добавьте другую позицию и удалите всё. Счётчик и сумма должны следовать этим изменениям.

• Проверьте пустую корзину и корзину с несколькими товарами.
• Откройте и закройте окно на телефоне.
• Убедитесь, что соседние пункты меню нажимаются.
• Проверьте переход к иконке клавишей Tab.

Повторите действия на опубликованном сайте: внутри редактора штатные скрипты магазина работают не полностью.

Проверьте три вещи: правильный блок выбран в конструкторе, класс назначен самому шейпу и на странице есть нужный ST100 или ST110. Класс и селектор — разные записи: в поле CSS Class Name не ставят точку перед именем.

Если на компьютере всё хорошо, а на телефоне значок смещён, проверьте мобильное положение и размер шейпа. В режиме «По шейпу» мод опирается именно на эти настройки. Изменение только десктопного адаптива не исправит мобильную шапку.

Читайте также: Как поделиться корзиной в Tilda: товары одной ссылкой · Избранное в Tilda: поиск, статусы и заметки.