Пользователь открыл карточку товара со смартфона, пролистал описание, характеристики, отзывы — и потерял из виду кнопку «В корзину». Она уехала наверх вместе с ценой, а чтобы нажать, надо скроллить обратно. Каждый такой лишний жест — это трение, а трение на мобильном стоит конверсии. Именно эту проблему решает залипающая панель действий внизу экрана.
В этой статье разберём, как правильно сделать sticky-панель в мобильном магазине на 1С-Битрикс: что в неё класть, как не перекрыть контент и системные жесты, как связать её с торговыми предложениями и не уронить скорость. Всё — с прицелом на реальную вёрстку шаблона и без абстрактных советов. Если каталог тяжёлый, а его данные приходят из учётной системы, стоит параллельно посмотреть на аудит и оптимизацию 1С — панель хороша лишь настолько, насколько быстро под ней грузятся цена и наличие.
Коротко
- Залипающая нижняя панель держит главное действие (цена + «В корзину») под большим пальцем при любой прокрутке.
- Обязательны нижний отступ контента на высоту панели и учёт safe-area, иначе она перекроет контент и жесты.
- Панель переиспользует данные и обработчики карточки — не дублируйте бизнес-логику добавления в корзину.
- Для товаров с вариантами панель обязана учитывать выбранное торговое предложение, цену и наличие.
Зачем нужна нижняя панель действий
На десктопе кнопка покупки почти всегда в поле зрения: экран широкий, карточка помещается целиком или почти целиком. На смартфоне всё иначе — экран узкий и высокий, а контент карточки длинный. Пока пользователь читает характеристики и отзывы, ключевая кнопка уходит за пределы видимой области. Чтобы совершить целевое действие, ему приходится прервать чтение и скроллить наверх.
Залипающая панель убирает этот разрыв. Решение о покупке может созреть в любой точке страницы — и в этот момент кнопка уже под рукой. Психологически это важно: чем меньше шагов между «хочу» и «в корзине», тем выше вероятность, что действие состоится. На длинных карточках эффект особенно заметен.
Что именно улучшается
- Доступность действия. Кнопка всегда в зоне комфортного нажатия у нижнего края.
- Меньше скролла. Не нужно возвращаться к началу карточки ради покупки.
- Видимость цены. Актуальная цена и наличие постоянно перед глазами.
- Ясность следующего шага. Панель делает целевое действие визуально главным.
Где панель уместна, а где нет
Sticky-панель — это точечный инструмент, а не украшение для каждой страницы. Она оправдана там, где есть одно доминирующее действие и длинный контент над ним.
| Страница | Уместна? | Главное действие в панели |
|---|---|---|
| Карточка товара | Да | Цена, наличие, «В корзину» |
| Корзина | Да | Итог и «Оформить заказ» |
| Оформление заказа | Да | «Далее» / «Подтвердить» |
| Список каталога | Осторожно | Фильтр / сортировка |
| Информационная статья | Обычно нет | — |
Если на странице несколько равнозначных действий, панель теряет смысл: она сильна ровно тогда, когда есть одно очевидно главное. На десктопе панель, как правило, скрывают — там она чужеродна и отъедает полезное место.
Что размещать в панели
Панель должна быть лаконичной: пара элементов, не больше. Для карточки товара это связка «информация + действие».
- Цена. Актуальная цена товара или выбранного варианта; для B2B — с учётом группы клиента.
- Краткий статус наличия. «В наличии» или срок поставки — коротко, без деталей.
- Главная кнопка. «В корзину» или «Купить», крупная и с явным контрастом.
- Опционально — количество. Компактный степпер, если для товара это важно.
Всё, что не помещается в этот минимум, оставляют в теле карточки. Панель — это не вторая карточка, а быстрый доступ к главному действию. Перегруженная панель теряет и функцию, и место на экране.
Безопасные зоны и жесты смартфона
Главная техническая ловушка нижней панели — системные элементы смартфона. У iPhone внизу полоса жестов, у Android — панель навигации или зона свайпа. Если панель прижата к самому краю без запаса, её кнопки наезжают на системную зону, и нажатие превращается в случайный свайп.
Решают это двумя приёмами вёрстки:
- Safe-area. Нижний внутренний отступ панели задают через
env(safe-area-inset-bottom), чтобы кнопки поднимались над системной зоной. - Отступ контента. Телу страницы добавляют нижний padding на высоту панели, иначе последний блок карточки прячется под ней.
Эти детали кажутся мелкими, но именно из-за них панель либо работает, либо раздражает. Их закладывают в вёрстку сразу, а не «дошлифовывают» после жалоб.
Панель и торговые предложения
Если товар в 1С-Битрикс продаётся с торговыми предложениями (цвет, размер, фасовка), панель обязана жить в одном состоянии с блоком выбора варианта. Пользователь переключил размер — цена и наличие в панели должны обновиться, а кнопка «В корзину» — добавить именно выбранный SKU.
Типичные требования к такой связке:
- Единое состояние. Выбранное предложение хранится в одном месте; панель читает его, а не собственную копию.
- Обновление цены и наличия. При смене варианта панель показывает цену и остаток именно этого предложения.
- Блокировка при невыбранном варианте. Пока вариант не выбран, кнопка предлагает выбрать, а не добавляет случайный SKU.
Данные о вариантах, ценах и остатках приходят на сайт из учётной системы, поэтому корректность панели упирается в качество обмена. Если остатки и цены обновляются неточно, панель будет показывать неверное наличие — здесь помогает автоматизация продаж и склада на 1С, которая держит данные о товаре актуальными.
Реализация в шаблоне 1С-Битрикс
Технически панель — это отдельный блок в шаблоне детальной страницы товара (или в шаблоне компонента catalog.element), позиционированный position: fixed у нижнего края. Ключевой принцип — переиспользование, а не дублирование.
- Возьмите данные карточки. Панель выводит ту же цену, наличие и кнопку, что и основной блок покупки, — из тех же данных компонента.
- Переиспользуйте обработчик добавления. Кнопка панели дёргает тот же JS-обработчик добавления в корзину, что и основная кнопка, чтобы поведение совпадало.
- Свяжите с выбором варианта. Панель подписывается на смену торгового предложения и обновляет цену, наличие и целевой SKU.
- Отделите стили медиазапросом. Панель показывается только на узких экранах; на десктопе она скрыта.
- Зарезервируйте место. Нижний отступ контента задаётся сразу, чтобы не было сдвига макета при появлении панели.
Если карточка нестандартная или логика покупки сложная (комплекты, разные единицы измерения), панель проще собрать как часть кастомной доработки шаблона, чем «натягивать» на готовый компонент. Общие принципы аккуратной серверной логики мы разбирали в статье про D7 ORM в Битрикс, а вопросы деплоя таких правок — в материале про CI/CD и деплой Битрикс.
Поведение при прокрутке и клавиатуре
Панель должна вести себя предсказуемо в динамике. Несколько нюансов, которые часто упускают:
- Экранная клавиатура. Когда пользователь заполняет поле (например, количество или промокод), клавиатура выезжает снизу; панель не должна перекрывать активное поле или прыгать поверх клавиатуры.
- Плавность, а не дёрганье. Панель просто зафиксирована — она не должна пересчитывать позицию на каждый пиксель скролла и мерцать.
- Скрытие на нерелевантных экранах. На финальном экране «спасибо за заказ» панель покупки уже не нужна.
Иногда панель прячут при скролле вниз и показывают при скролле вверх, чтобы освободить экран для чтения. Это допустимо, но добавляет сложности — стоит внедрять только если контента действительно много.
Производительность и Core Web Vitals
Плохо сделанная панель бьёт по метрике сдвига макета (CLS): если контенту не зарезервировать место, при появлении панели страница «прыгает». Поэтому отступ под панель задают заранее, а не после её отрисовки.
- Никаких сдвигов. Место под панель резервируется сразу — CLS остаётся низким.
- Лёгкий CSS. Фиксация — это чистый CSS, без тяжёлого JS на каждый кадр прокрутки.
- Переиспользование данных. Панель не делает лишних запросов: цена и наличие уже загружены картой товара.
Если карточка в принципе грузится медленно, панель этого не спасёт. Скорость витрины — отдельная большая задача, которую системно решают на уровне инфраструктуры и кэша; смежные вопросы мы разбирали в статье про хостинг и инфраструктуру на BitrixVM.
Доступность и удобство нажатия
Панель должна быть удобной для пальца и понятной для программ чтения с экрана. Базовые требования:
- Крупная зона нажатия. Кнопка «В корзину» — не меньше комфортного размера тапа, с запасом от краёв.
- Контраст. Текст цены и кнопка читаются при ярком свете, а не сливаются с фоном.
- Понятные подписи. Кнопка называется действием («В корзину»), а не иконкой без подписи.
- Доступность для скринридера. У элементов панели корректные роли и подписи.
Аналитика и проверка гипотез
Панель — это изменение, которое стоит измерять, а не внедрять «на веру». Полезно отслеживать долю добавлений в корзину именно через панель, влияние на общий процент добавлений и на завершённые оформления. Если есть возможность, сравнивают поведение с панелью и без неё на сопоставимых сегментах трафика.
Важно смотреть не только на клики по панели, но и на итоговую конверсию: панель может «перетягивать» на себя нажатия, не увеличивая продажи, — тогда её роль скорее в удобстве. Данные о заказах для такой оценки удобнее собирать, когда сайт и учётная система связаны сквозной аналитикой; выстроить её помогает автоматизация на 1С.
Частые ошибки
- Панель перекрывает контент. Не задан нижний отступ тела — последний блок карточки прячется под панелью.
- Игнор safe-area. Кнопки наезжают на системную полосу жестов, нажатие срывается в свайп.
- Дублирование логики. Кнопка панели добавляет товар не так, как основная, — расхождение в поведении и багах.
- Не учтён вариант. Панель добавляет товар-родитель вместо выбранного SKU или показывает не ту цену.
- Сдвиг макета. Панель появляется после загрузки и «толкает» контент — растёт CLS.
- Панель на десктопе. Полоса внизу широкого экрана выглядит чужеродно и отъедает место.
- Перегруженность. В панель напихали много элементов, и она превратилась во вторую карточку.
Чек-лист внедрения
- Определено место. Панель включена там, где есть одно главное действие: карточка, корзина, оформление.
- Минимум элементов. В панели цена, краткое наличие и одна главная кнопка — без лишнего.
- Safe-area учтён. Кнопки подняты над системной зоной жестов на iPhone и Android.
- Отступ контента задан. Тело страницы не прячется под панелью, сдвига макета нет.
- Связь с вариантами. Панель обновляет цену и наличие при смене торгового предложения и добавляет верный SKU.
- Логика переиспользована. Кнопка панели использует те же обработчики, что и основная.
- Скрыта на десктопе. Панель работает только на узких экранах.
- Проверено на устройствах. Протестировано на живых смартфонах, включая клавиатуру и жесты.
Вывод
Залипающая панель действий — недорогой по трудозатратам, но заметный по влиянию элемент мобильной коммерции. Она держит главное действие под большим пальцем, убирает лишний скролл к кнопке и делает путь к корзине короче. На длинных карточках это прямой рычаг мобильной конверсии.
Секрет в деталях: учесть безопасные зоны, зарезервировать место, связать панель с выбором варианта и переиспользовать логику карточки, а не дублировать её. Тогда панель работает незаметно и помогает продавать. А поскольку цена и наличие в ней приходят из 1С, финальное качество зависит и от того, насколько чисто настроен обмен с учётной системой.
