Как добавить свою плавающую кнопку и не перекрыть корзину

Плавающая кнопка кажется маленькой деталью, пока на сайте не появляется магазин. После этого правый нижний угол начинают делить корзина, избранное, поиск, мессенджер и иногда кнопка «Наверх». На макете всё выглядит аккуратно, потому что в Zero Block видна только дизайнерская кнопка. На опубликованной странице рядом с ней возникает интерфейс Тильды.

Короткий ответ

Если подходит штатный виджет, используйте его — Тильда сама расставит свои кнопки. Для собственного дизайна не фиксируйте координаты каждой кнопки вручную. Готовый MOD-171 не зависит от внутреннего API этой очереди: он выбирает указанные кнопки, измеряет их и сам раскладывает снизу вверх. Поэтому в селектор надо включить все виджеты, которые делят один угол.

Почему обычный fixed начинает мешать

У дизайнерской кнопки обычно записано что-то вроде «20 пикселей справа и 20 снизу». У корзины есть свои координаты. Ни одна из них не знает о другой.

Когда две кнопки занимают одно место, z-index способен только выбрать верхнюю. Нижняя останется перекрытой, а посетитель не сможет нажать её. Поэтому значение 99999 не исправляет задачу — оно маскирует одну кнопку другой.

Что Тильда делает для своих виджетов

В отдельном файле рантайма Тильда собирает вертикальную очередь из:

• плавающей корзины;
• избранного;
• кнопки поиска.

Она измеряет высоту, оставляет между кнопками 20 пикселей и пересчитывает координаты на брейкпоинтах. Своя кнопка Zero Block в этот список автоматически не попадает.

Именно поэтому проблема возникает не из-за неправильного дизайна: два независимых механизма просто не обменялись размерами.

Когда можно обойтись без модификации

Сначала спросите, действительно ли нужен свой виджет.

• Для корзины используйте плавающую кнопку корзины.
• Для избранного — штатный виджет избранного.
• Ссылку на мессенджер можно оставить в фиксированном меню, если она не обязана постоянно жить в углу.
• Кнопку «Наверх» не обязательно показывать на короткой странице.

Чем меньше плавающих элементов, тем меньше они закрывают контент на телефоне.

Если фирменная кнопка обязательна, проверьте хотя бы два состояния: пустая корзина и корзина с товаром. Виджет может появляться только после первого добавления, поэтому одного скриншота главной недостаточно.

Что делает MOD-171

MOD-171 работает как независимый диспетчер угла страницы. По умолчанию он находит элементы с data-mk-widget, плавающую корзину и кнопку избранного, затем ставит их в одну вертикальную очередь. Высота каждого элемента измеряется отдельно, поэтому кнопки могут быть разного размера.

Мод пересчитывает позиции после изменения ширины окна и появления новых узлов. Он не вызывает внутренние t_posWidget__* и не выдаёт эту связь за публичный API Тильды. Цена такой независимости — все нужные виджеты должны попасть в селектор мода. Если на проекте другой класс корзины или поиска, его добавляют в параметр widget и проверяют на опубликованной странице.

Как подготовить кнопку дизайнеру

До кода определите её поведение:

• одно действие, а не меню из пяти равных иконок;
• понятная подпись для скринридера;
• зона нажатия не меньше 44 × 44 пикселей;
• состояние фокуса для клавиатуры;
• контраст на светлом и тёмном фоне;
• отдельная проверка на ширине 320 пикселей;
• место, где кнопка не закроет кнопку формы или cookie-баннер.

Если кнопка открывает попап, проверьте Escape и возврат фокуса после закрытия. Если ведёт во внешний мессенджер — предупредите посетителя понятной подписью.

Проверка перед сдачей клиенту

• Корзина пустая: кнопка стоит на своём месте.
• В корзину добавлен товар: наложения нет.
• Включено избранное: все три кнопки доступны.
• Открыт поиск: очередь не прыгает поверх контента.
• Экран пересекает 960 и 640 пикселей: позиции пересчитались.
• Кнопка доступна клавиатурой и имеет видимый фокус.
• На странице без магазина остаётся безопасное положение.

Передайте клиенту не координату right: 20px, а правило: какие виджеты могут появиться рядом и где менять действие своей кнопки. Тогда добавление избранного через месяц не сломает интерфейс, который при сдаче выглядел готовым.