Липкая кнопка и мини-корзина в карточке товара

Покупатель открыл карточку товара, посмотрел фото, начал читать характеристики, доскроллил до отзывов — и в этот момент решил купить. Но кнопки «В корзину» на экране уже нет: она осталась вверху, рядом с ценой, за три экрана прокрутки. Чтобы совершить действие, человек должен вспомнить, где кнопка, и прокрутить обратно. Часть посетителей это делает. Часть — закрывает вкладку. Именно эту «утечку» и закрывают липкая кнопка «В корзину» и мини-корзина: основное действие карточки всегда под рукой, а статус корзины виден без перехода на отдельный экран.

Ниже — практический разбор для интернет-магазина на 1С-Битрикс: из чего состоит sticky-панель, что показывать в мини-корзине, как собрать всё это на штатных компонентах catalog.element и sale.basket.basket.line, как обновлять счётчик по AJAX без перезагрузки и не поймать скачков вёрстки. Это выжимка из наших проектов по оптимизации конверсии магазинов на 1С-Битрикс — с конкретикой по компонентам и без общих слов.

Что такое sticky-кнопка и мини-корзина

За обоими терминами стоят простые идеи, но их часто путают, поэтому договоримся о словах в самом начале.

Sticky-кнопка (липкая, «залипающая») — это главное целевое действие карточки товара, которое остаётся закреплённым на экране при прокрутке. Обычно это кнопка «В корзину» или «Купить в 1 клик», а рядом с ней — краткая сводка: название или цена товара, выбранный размер, иногда изображение-миниатюра. На мобильных такая панель прижата к нижнему краю экрана, на десктопе она чаще идёт сбоку от галереи или всплывает сверху, когда основная кнопка первого экрана уходит за пределы видимости.

Мини-корзина — это компактный индикатор состояния корзины. В минимальном виде это иконка со счётчиком в шапке: сколько товаров и на какую сумму. В расширенном — выпадающая сводка последних добавленных позиций с кнопкой перехода к оформлению. Мини-корзина отвечает на два вопроса покупателя: «товар точно добавился?» и «сколько уже в заказе?». Она не заменяет полноценную корзину, а даёт мгновенную обратную связь и мостик к следующему шагу.

Вместе эти два элемента образуют то, что в UX называют «постоянно доступным путём к покупке». Sticky-кнопка убирает трение на этапе «добавить», мини-корзина — на этапе «понять, что происходит, и пойти дальше». По отдельности каждый из них полезен, но максимальный эффект дают именно в связке: нажал липкую кнопку — тут же увидел, как обновился счётчик мини-корзины. Эта петля «действие → подтверждение» и удерживает покупателя в потоке.

Как теряется действие при прокрутке

Чтобы понять ценность липкой панели, полезно разобрать, где именно «утекают» покупатели. Современная карточка товара — это длинный документ: галерея, цена, выбор торговых предложений, блок доверия, характеристики, описание, отзывы, рекомендации и кросс-сейл. На мобильном экране всё это занимает пять-восемь экранов прокрутки. Кнопка «В корзину» физически видна только на первом из них.

Дальше поведение расходится по нескольким сценариям. Одни покупатели решают купить сразу, на первом экране, — им липкая кнопка не нужна, у них она и так перед глазами. Другие сначала изучают товар: читают характеристики, сравнивают, смотрят отзывы, и решение созревает где-то в середине или в конце карточки. Вот для них кнопки на экране уже нет. Им нужно совершить дополнительное усилие: вспомнить, что кнопка вверху, и прокрутить обратно. Каждое такое усилие — это точка, где часть людей отваливается.

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

Липкая панель убирает первопричину: действие перестаёт зависеть от того, в какой точке страницы созрело решение. Где бы покупатель ни находился — кнопка под рукой. Это не хитрость и не «тёмный паттерн», а устранение лишнего шага, который мы сами же и создали, сделав карточку длинной и информативной.

Анатомия липкой панели действия

Хорошая sticky-панель — это не просто «прибитая» кнопка. У неё есть внутренняя структура, и от того, что именно вы в неё положите, зависит и конверсия, и восприятие. Разберём слои панели от обязательных к необязательным.

• Основное действие. Кнопка «В корзину» / «Купить». Это ядро панели, оно должно быть крупным, контрастным и занимать большую часть ширины на мобильных.
• Цена. Актуальная цена выбранного торгового предложения. Если есть скидка — старая и новая. Цена рядом с кнопкой снимает вопрос «а сколько это стоит» в момент действия.
• Идентификация товара. Миниатюра и короткое название или выбранный вариант (размер, цвет). Помогает не потерять контекст, когда панель висит поверх отзывов или описания.
• Выбор количества. Опционально — компактный степпер «−/+». Уместен там, где часто берут несколько единиц; в остальных случаях лучше не загромождать панель.
• Вторичное действие. «В избранное», «Купить в 1 клик» или «Сравнить». Держите его визуально слабее основного, чтобы не размывать фокус.
• Мини-статус корзины. Иногда прямо в панель выносят счётчик «в корзине: N» — это стык sticky-кнопки и мини-корзины.

Ключевой принцип компоновки — одна панель, одно главное действие. Если рядом с «В корзину» поставить три равнозначные кнопки, покупатель растеряется, и конверсия просядет вместо роста. Всё, кроме основного действия, должно быть визуально тише: меньше, бледнее, в виде иконок. Панель обязана оставаться узкой по высоте, иначе на мобильном она съест слишком много и без того ограниченного экрана.

Отдельно продумайте состояния кнопки. Их как минимум четыре: «доступно к покупке», «нет в наличии» (кнопка заменяется на «Уведомить о поступлении» или блокируется), «уже в корзине» (текст меняется на «В корзине · перейти») и «идёт добавление» (короткий индикатор загрузки, чтобы человек не жал дважды). Панель, которая честно отражает эти состояния, вызывает доверие; панель, которая всегда показывает «В корзину» независимо от реальности, — раздражает и плодит ошибки.

Мини-корзина: что показывать и когда

Мини-корзина существует в нескольких форматах, и выбор зависит от типа магазина и поведения покупателей. Разберём варианты и их назначение.

Иконка со счётчиком. Самый распространённый и лёгкий вариант: значок корзины в шапке с числом позиций и, желательно, суммой. Его задача — постоянно показывать «сколько у меня в заказе» и служить входом в корзину. Счётчик обновляется в момент добавления товара — это и есть главное подтверждение действия.

Выпадающая сводка. При наведении (десктоп) или по тапу открывается небольшой список последних добавленных товаров с миниатюрами, ценами и кнопками «Оформить» и «Перейти в корзину». Полезна там, где покупатели часто набирают несколько позиций и хотят контролировать набор, не уходя с витрины.

Тост-уведомление о добавлении. Небольшое всплывающее сообщение «Товар добавлен в корзину» с миниатюрой и кнопкой перехода, которое появляется на пару секунд после действия. Это не постоянный элемент, а мгновенная обратная связь. Хорошо работает в паре со счётчиком: тост подтверждает конкретное действие, счётчик держит общий статус.

Важно не перегружать. Если у вас уже есть корзина-шторка (drawer), то мини-корзина не должна дублировать её функциональность — пусть она будет лёгким индикатором, а по клику открывает шторку. Если корзина — отдельная страница, мини-корзина может быть чуть богаче: тогда выпадающая сводка помогает не бегать туда-сюда. Решение о формате принимайте, исходя из того, сколько товаров обычно кладут в заказ и на каком устройстве.

Липкая панель против обычной кнопки

Чтобы решение о внедрении было осознанным, сведём различия обычной и липкой кнопки в таблицу. Речь не о том, что одна «лучше», а о том, какие задачи каждая закрывает.

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

Поведение на десктопе и мобильных

Одна и та же идея на десктопе и на телефоне реализуется по-разному. Копировать мобильное решение на широкий экран — ошибка, и наоборот. Разберём оба случая.

Мобильные. Здесь sticky-панель почти обязательна и живёт у нижнего края экрана. Формат — узкая полоса во всю ширину: слева цена, справа крупная кнопка «В корзину». Появляться она может либо сразу, либо после того, как основная кнопка первого экрана уходит из вида, — второй вариант мягче и не «прибивает» панель, когда она и так не нужна. Обязательно учитываются безопасные зоны и системная навигация.

Десктоп. На широком экране кнопка первого экрана видна дольше, а места по бокам больше. Классический приём — «липкий» блок покупки сбоку от галереи: пока пользователь скроллит характеристики, колонка с ценой и кнопкой остаётся на месте (position: sticky внутри контейнера). Полноэкранную нижнюю панель на десктопе обычно не делают — она смотрится тяжело и не нужна: скролл-путь короче, а мышь быстрее возвращается наверх.

Планшеты и промежуточные ширины. Здесь важно не «застрять» между двумя раскладками. Обычно ориентируются на брейкпоинт: до него — мобильная нижняя панель, после — боковая липкая колонка. Точную границу подбирают по вёрстке карточки, а не по абстрактным «768px».

Общий принцип связки с остальным магазином — единообразие. Если у вас проработана мобильная версия магазина, sticky-панель должна вписываться в её логику: те же отступы, та же типографика кнопок, то же поведение при скрытии/появлении. Разнобой между карточкой и остальными экранами читается пользователем как «недоделанность».

Мобильная панель и безопасные зоны

Нижняя липкая панель на мобильных — источник большинства технических проблем, если не учесть особенности современных экранов. Разберём, что именно нужно предусмотреть.

Безопасные зоны (safe area). У телефонов с вырезами и жестовой навигацией нижняя часть экрана частично занята системным индикатором. Если панель прижать вплотную к краю, кнопка окажется под системной полосой и в неё будет трудно попасть. Решение — добавить нижний отступ через env(safe-area-inset-bottom), чтобы панель приподнималась над системной зоной. Это одна строка в CSS, но без неё панель на части устройств будет неудобной.

Отступ под контент. Панель перекрывает нижнюю часть страницы. Чтобы последний блок карточки (например, кнопка «показать ещё отзывы» или футер) не оказался вечно под панелью, контенту задают нижний padding по высоте панели. Иначе покупатель физически не сможет нажать то, что спрятано за липкой полосой.

Поведение при появлении клавиатуры. Если на карточке есть поля ввода (например, «купить в 1 клик» с телефоном), при открытии экранной клавиатуры position: fixed может повести себя непредсказуемо и «наехать» на поле. Обычно панель на время ввода скрывают или переводят в обычный поток.

Скрытие на неподходящих экранах. Панель уместна на карточке товара, но не на странице оформления заказа, не в личном кабинете и не в самой корзине. Заложите правила, где панель показывается, а где — нет, чтобы она не мешала завершению покупки.

Настройка в 1С-Битрикс пошагово

Перейдём к реализации на платформе. Карточка товара в 1С-Битрикс собирается из штатных компонентов, и sticky-панель встраивается в её шаблон. Общий порядок такой.

1. Найдите шаблон карточки. Карточку выводит комплексный компонент bitrix:catalog или отдельный bitrix:catalog.element. Работать будем с кастомным шаблоном этого компонента (копией, а не оригиналом из bitrix/components), чтобы правки пережили обновления.
2. Выделите блок покупки. В шаблоне определите разметку кнопки «В корзину», цены и выбора торговых предложений. Именно эти данные вы будете дублировать в липкую панель, чтобы она использовала то же предложение и цену.
3. Добавьте разметку sticky-панели. В конце шаблона карточки (или отдельным блоком) сверстайте панель: контейнер с ценой, кнопкой добавления и, при необходимости, мини-статусом. На мобильных — position: fixed снизу, на десктопе — position: sticky в боковой колонке.
4. Свяжите кнопку с добавлением в корзину. Кнопка панели должна вызывать то же действие, что и основная: AJAX-добавление через add2basket компонента каталога или через sale.basket.basket. Передавайте актуальный ID выбранного торгового предложения.
5. Подключите мини-корзину. В шапке шаблона сайта разместите компонент bitrix:sale.basket.basket.line (малая корзина) — он отвечает за иконку, счётчик и выпадающую сводку.
6. Настройте обновление счётчика. После добавления обновляйте малую корзину без перезагрузки: её встроенным AJAX или собственным обработчиком, который перерисовывает счётчик по ответу сервера.
7. Заложите отступы и безопасные зоны. Добавьте контенту нижний padding под высоту панели и учтите env(safe-area-inset-bottom). Проверьте, что ничего не перекрывается.
8. Протестируйте на устройствах. Прогоните карточку на реальных телефонах и десктопе: появление панели, синхронизацию выбора размера, обновление счётчика, поведение при клавиатуре и на странице оформления.

Реализация на штатных компонентах

Разберём подробнее, какие именно компоненты и API 1С-Битрикс задействованы, чтобы не изобретать велосипед и не ломать штатную логику корзины.

Карточка и добавление — catalog.element. Стандартный шаблон карточки уже содержит кнопку «В корзину», которая через JavaScript-обёртку компонента отправляет AJAX-запрос на добавление и возвращает результат. Для липкой панели вы не пишете новую логику добавления, а вызываете тот же метод с тем же PRODUCT_ID / OFFER_ID. Это гарантирует, что скидки, наборы и правила корзины отработают одинаково для обеих кнопок.

Индикатор — sale.basket.basket.line. Малая корзина — это отдельный компонент, который выводит иконку, число товаров, сумму и (по настройке) выпадающий список. У него есть параметры: показывать ли количество, сумму, изображения, число позиций в выпадашке. Он же умеет обновляться по AJAX при изменении корзины, поэтому в большинстве случаев достаточно правильно его настроить, а не писать свой счётчик.

Корзина — sale.basket.basket. Полноценная корзина (страница или содержимое шторки). Мини-корзина ведёт к ней, но сама её не заменяет. Если вы делаете корзину-шторку, содержимое обычно тоже строится этим компонентом, подгружаемым по AJAX.

Событие изменения корзины. На фронтенде Битрикс генерирует событие обновления корзины (через ядро JS и обработчики). Подпишитесь на него, чтобы синхронно обновлять и малую корзину, и мини-статус в sticky-панели, и, при необходимости, показывать тост. Один источник правды — состояние корзины на сервере — избавляет от рассинхрона между элементами интерфейса.

Такой подход держит всю бизнес-логику (цены, скидки, наличие) на стороне штатных механизмов, а на долю кастома остаётся только вёрстка панели и «проводка» событий. Это важно для поддерживаемости: обновления платформы и правки в правилах корзины не ломают вашу sticky-панель, потому что она не дублирует расчёты, а переиспользует их.

Как это выглядит в шаблоне карточки

Настройка sticky-панели — это в основном работа в шаблоне компонента и в CSS/JS темы, а не в визуальной админке. Схематично структура блока покупки и его связь с липкой панелью выглядит так:

Из схемы видно главное правило реализации: sticky-панель — это представление того же блока покупки, а не его копия с собственной логикой. Она читает актуальный выбранный оффер и цену из состояния карточки, вызывает общее действие добавления и инициирует обновление корзины. Всё, что относится к «сколько стоит» и «что именно кладём», остаётся в одном месте.

Технически синхронизацию выбора удобно делать через общий JS-объект состояния карточки: когда пользователь меняет размер или цвет, состояние обновляется, а обе кнопки и обе цены перечитывают его. Так исключается ситуация, когда наверху выбран один вариант, а липкая кнопка добавляет другой.

AJAX-добавление и обновление мини-корзины

Ключевое требование к связке — работать без перезагрузки страницы. Покупатель должен нажать «В корзину» и остаться на карточке, увидев подтверждение. Разберём цепочку событий.

1. Клик по кнопке. Пользователь жмёт «В корзину» на первом экране или в липкой панели. Кнопка переходит в состояние загрузки, чтобы исключить повторные клики.
2. AJAX-запрос. На сервер уходит запрос на добавление выбранного оффера в корзину через штатное действие компонента. Сервер применяет скидки, проверяет наличие и возвращает актуальное состояние корзины.
3. Обновление малой корзины. По ответу перерисовывается счётчик и сумма в шапке. Меняется только текст в заранее подготовленном контейнере — размеры не «прыгают».
4. Обратная связь. Показывается тост «Товар добавлен» и/или кнопка меняет текст на «В корзине · перейти». Пользователь видит результат мгновенно.
5. Готовность к следующему действию. Кнопка возвращается в рабочее состояние, покупатель может продолжить набор или перейти к оформлению.

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

Второй нюанс — единая точка обновления. Малая корзина, мини-статус в панели и тост должны обновляться из одного обработчика ответа, а не каждый по-своему. Так все элементы всегда показывают одно и то же число, и не возникает ситуации, когда счётчик в шапке говорит «3», а панель — «2».

Доступность, CLS и производительность

Липкая панель и мини-корзина живут в самом «горячем» месте интерфейса, поэтому к ним предъявляются повышенные требования по доступности и стабильности. Разберём три плоскости.

Скачки вёрстки (CLS). Cumulative Layout Shift — метрика Core Web Vitals, которая штрафует за «прыгающий» контент. Sticky-панель провоцирует скачки в двух местах: при своём появлении (если добавляется после загрузки) и при обновлении счётчика (если контейнер меняет размер). Оба лечатся резервированием места: панель имеет заранее известную высоту, под неё сразу заложен отступ, а счётчик обновляется в контейнере фиксированной ширины. Тогда CLS остаётся near-нулевым.

Доступность (a11y). Кнопка панели должна быть настоящей кнопкой (<button>), с понятным текстом или aria-label, достаточным контрастом и размером зоны нажатия не меньше рекомендованных 44×44 px. Тост о добавлении полезно объявлять через aria-live, чтобы его услышали пользователи скринридеров. Состояние «нет в наличии» должно передаваться не только цветом, но и текстом.

Производительность. Панель не должна тянуть тяжёлые скрипты и подписываться на дорогие события прокрутки без throttling. Обновление счётчика — лёгкая операция замены текста, а не перерисовка половины страницы. Если магазин работает как быстрая карточка товара с хорошими LCP и INP, sticky-панель не должна их ухудшать — наоборот, аккуратная реализация не добавляет заметной нагрузки.

Наконец, помните про воспринимаемую скорость. Мгновенная реакция кнопки на клик (состояние загрузки сразу, а результат — через доли секунды) важнее, чем абсолютная скорость ответа сервера. Покупатель прощает небольшую задержку, если видит, что система откликнулась. И не прощает «мёртвой» кнопки, которая молчит после нажатия.

A/B-тест и метрики эффекта

Sticky-панель почти всегда воспринимается как «очевидно полезная», но воспринимаемая польза и измеренный прирост — разные вещи. Прежде чем раскатывать на 100% трафика, эффект стоит проверить экспериментом, тем более что на части ниш и аудиторий он может быть скромнее ожиданий.

Что измерять:

• Add-to-cart rate — доля сессий с карточкой, закончившихся добавлением в корзину. Это метрика, на которую sticky-панель влияет напрямую.
• Add-to-cart с глубокой прокрутки — доля добавлений, сделанных не на первом экране. Показывает, реально ли панель «ловит» решения, созревшие внизу карточки.
• Конверсия в заказ — конечная метрика. Рост add-to-cart без роста заказов означает, что узкое место дальше по воронке (в корзине или checkout).
• Средний чек и число позиций — мини-корзина может подталкивать к добору товаров, это стоит контролировать.
• Показатель отказов и CLS — чтобы убедиться, что панель не ухудшила UX и Core Web Vitals.

Классический дизайн эксперимента — сплит на две группы: контроль (обычная кнопка) и вариант (sticky-панель + мини-корзина). Тест ведут до статистической значимости, а не «пока не понравится». Если у вас в магазине уже налажено тестирование гипотез в рамках CRO, sticky-панель — отличный кандидат в бэклог: гипотеза понятная, реализация локальная, эффект измеримый.

Частые ошибки

• Липкая кнопка добавляет не тот вариант товара — выбор размера/цвета на первом экране и в панели не синхронизированы, покупатель получает не то, что выбрал.
• Панель перекрывает нижний контент — не заложен отступ под контент, и последний блок карточки или футер оказываются недоступны для нажатия.
• Игнорируют безопасные зоны — на телефонах с жестовой навигацией кнопка уходит под системную полосу и в неё трудно попасть.
• Панель появляется рывком и вызывает скачок вёрстки — место под неё не зарезервировано, CLS растёт, Core Web Vitals проседают.
• Счётчик мини-корзины не обновляется по AJAX — после добавления нужно перезагрузить страницу, чтобы увидеть изменение, и подтверждение теряется.
• Тихий сбой при добавлении — товара нет в наличии или сорвалась сеть, но пользователь не получает сообщения и думает, что товар в корзине.
• В панель напихали три равнозначные кнопки — фокус размывается, основное действие «В корзину» теряется среди «в избранное» и «сравнить».
• Панель висит везде, включая checkout и корзину — вместо помощи она мешает завершению заказа и раздражает.
• Добавление сделано в обход штатной корзины — перестают корректно применяться скидки, купоны и правила, ломается обмен заказов с 1С.

Чек-лист внедрения

Сведём всё в практический список, по которому удобно принимать готовность sticky-панели и мини-корзины перед запуском:

1. Единое действие. Липкая кнопка вызывает то же добавление, что и основная, с тем же OFFER_ID; выбор варианта синхронизирован между первым экраном и панелью.
2. Состояния кнопки. Проработаны «в наличии», «нет в наличии», «уже в корзине» и «идёт добавление»; повторные клики исключены.
3. Мини-корзина обновляется по AJAX. Счётчик и сумма в шапке перерисовываются без перезагрузки, из одного обработчика ответа.
4. Обратная связь. После добавления пользователь видит подтверждение — тост и/или смену текста кнопки; ошибки показываются понятным сообщением.
5. Место зарезервировано. Высота панели фиксирована, контенту задан нижний отступ, скачков вёрстки нет, CLS near-нулевой.
6. Безопасные зоны учтены. Панель приподнята над системной навигацией через safe-area-inset, не конфликтует с клавиатурой.
7. Раскладка по устройствам. На мобильных — нижняя панель, на десктопе — боковая липкая колонка; брейкпоинт подобран по вёрстке карточки.
8. Панель скрыта где нужно. На checkout, в корзине и в кабинете липкая панель не показывается.
9. Доступность. Кнопка — настоящий <button>, контраст и зона нажатия достаточны, тост объявляется через aria-live.
10. Эффект измерен. Запущен A/B-тест, зафиксированы add-to-cart, конверсия в заказ и Core Web Vitals.

Вывод

Sticky-кнопка и мини-корзина решают одну конкретную проблему: не дать покупателю потерять действие, пока он изучает длинную карточку товара. Основное действие всегда под рукой, а мини-корзина мгновенно подтверждает добавление и показывает прогресс к заказу. В 1С-Битрикс это собирается на штатных компонентах — catalog.element для карточки и добавления, sale.basket.basket.line для индикатора, — без обхода корзины и без риска сломать скидки и обмен с 1С. Заложите отступы и безопасные зоны, обновляйте счётчик по AJAX, следите за CLS и проверьте эффект A/B-тестом — и липкая панель станет тихим, но заметным драйвером конверсии, особенно на мобильных.