Карточка в листинге: какие данные показать сразу

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

Разберём, какие данные показать в карточке товара сразу, а какие оставить детальной странице; как расставить приоритеты для розницы и B2B и как собрать всё это на компоненте catalog.section в 1С-Битрикс без потери скорости. Если проектируете каталог с нуля или переделываете витрину, отправная точка — грамотный учёт цен и остатков в 1С, потому что именно эти данные карточка и показывает.

Зачем карточка в листинге решает исход

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

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

Две задачи одной карточки

• Отсев. Помочь быстро отбросить неподходящее по цене, наличию или ключевому параметру.
• Приглашение. Дать достаточно, чтобы захотелось открыть карточку или сразу добавить в корзину.

Минимальный набор: что нужно всегда

Есть данные, без которых карточка не работает ни в рознице, ни в опте. Это фундамент, и его нельзя урезать ради «красоты» сетки.

• Фото. Первое, за что цепляется взгляд; для большинства категорий — решающий фактор клика.
• Название. Чёткое, с ключевым признаком модели, без обрезки на середине слова.
• Цена. Видимая сразу; её отсутствие — частая причина ухода из категории.
• Наличие. Статус «в наличии / под заказ / нет», влияющий на решение не меньше цены.

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

Фото: главный элемент плитки

Фотография занимает большую часть карточки и первой формирует впечатление. Здесь важны три вещи: единый формат, качество и скорость. Разнобой в кадрировании (один товар крупно, другой мелко, третий на цветном фоне) разрушает аккуратность сетки и подсознательно снижает доверие. В 1С-Битрикс единый размер обеспечивается resize-кэшем: оригиналы приводятся к нужным габаритам и кэшируются, а не масштабируются браузером.

По скорости фото — самая тяжёлая часть листинга. Приёмы, которые держат категорию быстрой:

• Ленивая загрузка. Атрибут loading="lazy" для карточек ниже первого экрана.
• Правильные размеры. Отдавать изображение под фактический размер плитки, а не полноразмерный оригинал.
• Современные форматы. WebP там, где это поддерживается, заметно снижает вес.
• Заданные размеры. Атрибуты width/height, чтобы избежать сдвигов вёрстки при загрузке.

Цена, скидка и цена по группе клиента

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

В B2B цена сложнее: она зависит от группы клиента. Дилер видит одну цену, оптовик первого уровня — другую, розничный гость — третью или приглашение авторизоваться. В 1С-Битрикс это реализуется через типы цен и группы пользователей, и в карточке листинга выводится цена, соответствующая текущему покупателю. Как выстроить закрытые цены и группы, мы закрываем услугой автоматизации продаж и склада на 1С.

Наличие и склад в карточке

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

Остатки в 1С-Битрикс живут в торговом каталоге и обычно обновляются обменом с 1С. Для магазинов с несколькими складами абстрактное «есть на остатках» вводит в заблуждение: товар может быть на одном складе и отсутствовать на том, откуда отгружают клиента. В таких проектах наличие показывают в разрезе склада или региона покупателя. Товары не в наличии обычно не прячут, а опускают в конец сортировки — они всё ещё нужны для оценки ассортимента. Тема остатков тесно связана с обменом: если данные плавают, страдает и карточка — подробнее об инфраструктуре обмена в статье про хостинг и BitrixVM.

Характеристики: одна-три, а не все

Соблазн показать в карточке весь список свойств велик, но он вредит. Полный набор характеристик раздувает плитку, ломает высоту карточек в сетке и мешает сравнивать. В листинге нужны только те свойства, которые различают модели внутри категории и помогают выбрать.

1. Определите различающий признак. Для смартфонов — память и диагональ, для крепежа — размер и материал, для шин — типоразмер.
2. Ограничьте количество. Одна-три характеристики; всё остальное — в детальной карточке.
3. Настройте вывод под категорию. Разным разделам — разный набор свойств, а не единый шаблон на весь каталог.

В 1С-Битрикс набор выводимых свойств задаётся в настройках компонента catalog.section. Выбирайте свойства осознанно под конкретный раздел: то, что критично для одной категории, для другой — лишний шум.

Кнопка покупки и торговые предложения

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

В 1С-Битрикс это управляется логикой offer-ов и настройкой действий компонента. Разумная схема такая:

• Товар без вариантов. Кнопка «В корзину» добавляет товар сразу.
• Товар с обязательным SKU. Кнопка открывает выбор варианта (быстрый просмотр или карточка).
• B2B-режим. Поле ввода количества с учётом кратности и упаковки прямо в плитке.

Значки, бейджи и социальные сигналы

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

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

Приоритет данных: таблица

Чтобы не спорить о каждом элементе, полезно один раз зафиксировать приоритет данных карточки по важности и по аудитории.

Реализация на компоненте catalog.section

Технически карточка листинга в 1С-Битрикс — это шаблон компонента bitrix:catalog.section (или комплексного catalog). Именно он отвечает за вывод плитки: фото, цену, свойства, кнопку. Собирают карточку по такой логике:

1. Выберите выводимые поля и свойства. В параметрах компонента укажите артикул, нужные свойства и типы цен, соответствующие группам клиентов.
2. Настройте resize фото. Приведите изображения к единому размеру плитки через resize-кэш, включите ленивую загрузку.
3. Опишите действия кнопки. Для товаров с обязательными SKU — переход/быстрый просмотр вместо прямого добавления.
4. Подключите наличие и цену группы. Свяжите вывод с данными торгового каталога, приходящими обменом из 1С.
5. Кастомизируйте шаблон в отдельной копии. Не правьте системный шаблон компонента — работайте в своей копии, чтобы обновления не затирали доработки.

Если карточке нужна нестандартная логика — сложные бейджи, персональные цены, вывод из внешних источников — её выносят в кастомный код или API поверх компонента. Такую интеграционную разработку мы делаем в рамках автоматизации на 1С, чтобы карточка оставалась быстрой и не ломалась при обновлениях платформы. О том, как безопасно строить обмен данными с внешними системами, — в статье про REST, вебхуки и безопасность в Битрикс.

Скорость: карточка и производительность

Карточка выглядит невинно, но на странице их десятки, и каждая тянет данные. Без оптимизации категория с богатыми карточками грузится медленно и теряет посетителей ещё до того, как они что-то выбрали. Ключевые рычаги скорости:

• Кэширование компонента. Включённый кэш catalog.section избавляет от повторных запросов к базе на каждый заход.
• Оптимизация фото. Resize-кэш, WebP, ленивая загрузка ниже первого экрана.
• Композитный сайт. Статическая часть категории отдаётся мгновенно, а цена группы и наличие догружаются отдельным запросом.
• Разумный набор данных. Меньше лишних свойств в карточке — меньше запросов и легче отрисовка.

Динамические данные (персональная цена, наличие по складу) выносят из кэша, чтобы не плодить его версии под каждого пользователя. Скорость каталога — тема на стыке фронтенда и инфраструктуры; системно её решает аудит и оптимизация 1С вместе с настройкой кэша и хостинга.

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

• Нет цены в листинге. Посетитель уходит, не желая открывать карточки ради числа.
• Нет наличия. Непонятно, можно ли купить сейчас, — товар воспринимается как риск.
• Слишком много характеристик. Плитка раздута, сетка «прыгает», сравнивать неудобно.
• Кнопка «В корзину» на товаре с обязательным SKU. В корзину попадает «родитель» без варианта — битые заказы.
• Разнобой фото. Разное кадрирование и фон разрушают аккуратность сетки и доверие.
• Одна цена всем в B2B. Гость видит закрытую оптовую цену или все видят розничную вместо цены группы.
• Бейджи на всём подряд. «Хит» и «Новинка» на каждой карточке перестают работать.
• Тяжёлые фото без оптимизации. Категория грузится медленно, посетитель уходит до выбора.

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

1. Базовый минимум на месте. Фото, название, цена и наличие видны в каждой плитке.
2. Цена соответствует покупателю. Розничная — гостю, цена группы — авторизованному B2B-клиенту.
3. Наличие корректно. Статус выводится, для мультисклада — в разрезе склада или региона.
4. Характеристики отобраны. Одна-три различающих свойства под каждую категорию, не весь список.
5. Кнопка покупки логична. Прямое добавление для простых товаров, выбор SKU — для вариативных.
6. Фото унифицированы и оптимизированы. Единый формат, resize-кэш, ленивая загрузка, современные форматы.
7. Кэш и композит включены. Компонент кэшируется, динамика догружается отдельно.
8. Проверено на реальном каталоге. Прогнаны разные категории, группы клиентов и состояния наличия.

Вывод

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

В 1С-Битрикс всё это собирается на компоненте catalog.section поверх данных торгового каталога, которые приходят из 1С. Держите карточку лаконичной, согласованной по цене и быстрой — и страница категории начнёт конвертировать вместо того, чтобы отпугивать. Хорошая карточка листинга не кричит, а спокойно отвечает на главные вопросы покупателя за одну секунду.