Спор «сетка или список» выглядит как вопрос вкуса дизайнера, но на деле это вопрос конверсии и скорости каталога. Один и тот же раздел, показанный плиткой красивых картинок или плотной таблицей характеристик, продаёт по-разному — и по-разному грузится. А неверно выбранное число карточек на странице либо заставляет пользователя бесконечно листать, либо превращает первый экран в тяжёлый, медленный блок.
В этой статье разберём, когда каталогу на 1С-Битрикс нужна сетка, а когда список, сколько товаров показывать за раз, чем пагинация отличается от бесконечной подгрузки и как всё это реализовать на компоненте catalog.section, не убив скорость. Заодно затронем данные каталога: если номенклатура приходит из 1С с пробелами и разнобоем, никакой вид листинга её не спасёт — тут поможет аудит и оптимизация 1С.
Коротко
- Сетка — для визуального товара, список — для технической номенклатуры и B2B; лучший вариант — переключатель с запоминанием выбора.
- Оптимум — 20–40 карточек в сетке и 30–50 строк в списке; точное число подбирают по аналитике и скорости.
- Для SEO надёжнее пагинация или кнопка «Показать ещё» с изменением URL, чем чистая бесконечная лента.
- Число карточек напрямую бьёт по скорости: спасают кэш catalog.section, композит и ленивая загрузка.
Почему вид листинга — это про деньги
Листинг — это страница, где посетитель принимает решение: кликнуть в карточку или уйти. От того, как показаны товары, зависит, сколько позиций человек рассмотрит, насколько быстро найдёт нужное и не устанет ли раньше времени. Слишком разреженная сетка заставляет много прокручивать; слишком плотный список пугает технической аудиторией, но помогает профессионалу.
Важно понимать: вид листинга обслуживает сценарий покупки, а не эстетику. Если аудитория выбирает глазами — оптимизируем под просмотр изображений. Если решает по цифрам — под сравнение характеристик. Ошибка в этом выборе стоит конверсии, потому что интерфейс работает против того, как человек на самом деле принимает решение.
Когда выигрывает сетка
Сетка (плитка) показывает товары карточками в несколько колонок, где главную роль играет изображение. Это сильный формат, когда решение о покупке эмоциональное или визуальное.
- Товар выбирают глазами. Одежда, обувь, мебель, декор, посуда, подарки — покупатель сравнивает внешний вид.
- Важна атмосфера бренда. Крупные качественные фото формируют восприятие и доверие.
- Характеристик немного. Достаточно названия, цены и пары бейджей («хит», «новинка», «скидка»).
- Мобильный трафик преобладает. Плитка в 1–2 колонки естественно ложится на телефон.
В сетке критично качество изображений и единый формат кадра: если у товаров фото разного размера и фона, плитка выглядит неряшливо. Поэтому под сетку почти всегда нужна дисциплина по картинкам и ресайзу.
Когда выигрывает список
Список показывает товары строками: маленькое изображение слева, а дальше — название, ключевые характеристики, цена, наличие и кнопка заказа. Это формат для рационального выбора.
- Решают характеристики. Крепёж, кабель, электрокомпоненты, запчасти — важны параметры и артикул, а не картинка.
- B2B и опт. Закупщик сравнивает цену за единицу, кратность упаковки и наличие по складу, а не любуется фото.
- Длинные названия и коды. В строку помещается полное наименование и артикул без обрезки.
- Быстрый заказ. Из строки удобно сразу указать количество и добавить в корзину.
Список беспощаден к неполным данным: пустая характеристика или «нет цены» сразу видны. Поэтому переход на список часто вскрывает проблемы номенклатуры, которые тянутся из учётной системы — и до перехода их стоит закрыть на стороне 1С и обмена.
Сетка против списка: сравнение
| Критерий | Сетка (плитка) | Список (строки) |
|---|---|---|
| Главный акцент | Изображение товара | Характеристики и цена |
| Аудитория | Розница, визуальный выбор | B2B, профессионалы |
| Плотность на экране | Ниже, больше прокрутки | Выше, много позиций сразу |
| Сравнение параметров | Неудобно | Удобно |
| Требования к фото | Высокие | Низкие |
| Требования к данным | Средние | Высокие |
Вывод из таблицы простой: не выбирайте раз и навсегда. Дайте переключатель вида, запоминайте выбор пользователя в куке или localStorage и задавайте вид по умолчанию в зависимости от типа раздела. Технической номенклатуре — список, визуальному товару — сетка.
Сколько карточек на странице
Число товаров на странице — компромисс между удобством просмотра и скоростью. Слишком мало — пользователь постоянно перелистывает и теряет контекст. Слишком много — страница тяжелеет, растёт время до отрисовки, а на мобильном это особенно больно.
| Вид | Разумный диапазон | На что смотреть |
|---|---|---|
| Сетка, десктоп | 24–40 карточек | Глубина прокрутки, вес страницы |
| Сетка, мобайл | Та же выборка, подгрузка порциями | Вес первой порции |
| Список | 30–50 строк | Скорость выборки цен и остатков |
Точное число подбирают по данным: смотрите в аналитике долю переходов на вторую страницу, среднюю глубину прокрутки и время загрузки при разной выборке. Если почти никто не доходит до низа страницы — карточек слишком много; если все массово листают дальше — слишком мало.
Пагинация, «Показать ещё» и бесконечная лента
Способ добраться до следующих товаров — отдельное решение, влияющее на SEO и удобство.
- Классическая пагинация. У каждой страницы свой URL с параметром PAGEN. Лучше всего для индексации и возврата назад, но требует лишнего клика.
- Кнопка «Показать ещё». Догружает следующую порцию по AJAX и при этом меняет URL через History API. Оптимальный компромисс: удобно и индексируемо.
- Бесконечная лента. Порции подгружаются при прокрутке. Удобно на мобильном, но ломает возврат к товару и мешает добраться до футера.
Для каталога на 1С-Битрикс рекомендуемый вариант — «Показать ещё» с обновлением адреса и корректными тегами rel="prev/next" либо каноническими ссылками. Так поисковик видит все страницы, а пользователь не устаёт кликать. Чистую бесконечную ленту оставьте для лент новостей, а не для товарного каталога, который должен индексироваться.
Что показывать в карточке листинга
Карточка в листинге — не место для всей информации о товаре, но набор полей влияет на клик и заказ.
- Изображение (в сетке крупнее, в списке миниатюра) единого формата.
- Название и, для B2B, артикул — чтобы можно было опознать позицию.
- Цена — с учётом группы клиента, если цены разные; для опта иногда «цена по запросу».
- Наличие — «в наличии», «под заказ», остаток по складу.
- Кнопка заказа и, в списке, поле количества с учётом кратности.
- Бейджи — «хит», «новинка», «акция», но без визуального шума.
Цена и наличие часто приходят из 1С и меняются часто. Их выносят в отложенную подгрузку, чтобы основной HTML каталога кэшировался, а актуальные числа догружались отдельно. Как настроить корректный поток остатков и цен из учётной системы — тема автоматизации продаж и склада на 1С.
Реализация в 1С-Битрикс: catalog.section
За вывод листинга в 1С-Битрикс отвечает комплексный компонент catalog и его часть catalog.section. Оба вида — сетка и список — обычно рисует один компонент с разными шаблонами или CSS-модификатором.
- Единый компонент. Сетку и список делают одним
catalog.section, переключая вёрстку CSS-классом, а не двумя разными выборками. - Вид на фронтенде. Выбранный вид хранится в куке/localStorage и применяется классом на контейнере, чтобы не плодить копии кэша.
- Число элементов. Параметр постраничной навигации задаёт размер выборки; для «Показать ещё» используется AJAX-подгрузка следующего блока.
- Свойство раздела. Вид по умолчанию берётся из свойства раздела инфоблока — так технические разделы открываются списком, а витринные сеткой.
- Отложенные цена и наличие. Динамика выносится в отдельный запрос, а статический HTML кэшируется.
Если каталог большой и логики много (разные виды, кратность, цены по группам), часть выводят кастомной доработкой шаблона. Здесь важно не сломать кэш и не превратить каждую страницу в десятки запросов к базе.
Скорость и кэширование больших выборок
Чем больше карточек, тем больше запросов за ценой, наличием и свойствами. Несколько приёмов держат листинг быстрым:
- Кэш компонента.
catalog.sectionкэшируется с тегированным сбросом при изменении товаров раздела. - Композитный сайт. Статическая часть каталога отдаётся мгновенно, динамика догружается — подробнее в статье о хостинге и инфраструктуре ниже.
- Ленивая загрузка изображений. Картинки вне первого экрана грузятся по мере прокрутки через
loading="lazy". - Ресайз на стороне сервера. Отдавайте миниатюры нужного размера, а не полноразмерные фото.
- Отложенные цена и остаток. Один запрос на всю страницу вместо запроса на каждую карточку.
Скорость упирается и в инфраструктуру: на слабом хостинге тяжёлая выборка тормозит даже с кэшем. Как подобрать окружение под нагрузку каталога, мы разбираем в материале про хостинг и инфраструктуру на BitrixVM. Если же тормозит именно связка с учётной системой, помогает переход на D7 и ORM в кастомных выборках.
Мобильный листинг
Больше половины трафика каталога — мобильный, поэтому листинг проектируют «от телефона».
- Адаптивные колонки. CSS Grid перестраивает сетку: 4 колонки на десктопе, 2 на планшете, 1–2 на телефоне.
- Лёгкая первая порция. На мобильном первый экран должен грузиться быстро, остальное — по прокрутке.
- Крупные зоны нажатия. Кнопки заказа и переключатель вида удобны для пальца.
- Список тоже адаптируется. На узком экране строка перестраивается: характеристики переносятся под название.
Важно проверять реальную скорость на мобильном по Core Web Vitals, а не только «на глаз» на десктопе разработчика.
Частые ошибки
- Один вид навсегда. Технической номенклатуре навязали сетку — покупатель не может сравнить параметры.
- Выбор вида не запоминается. При переходе между разделами вид сбрасывается и бесит пользователя.
- Слишком много карточек без кэша. Страница грузится секундами, потому что цена и наличие тянутся на каждую карточку отдельно.
- Чистая бесконечная лента в каталоге. Товары не индексируются, к футеру не добраться, возврат к позиции теряется.
- Разнокалиберные фото в сетке. Плитка выглядит неаккуратно из-за разных размеров и фонов.
- Список на неполных данных. Пустые характеристики и «нет цены» видны сразу — сначала наведите порядок в номенклатуре.
- Нет ленивой загрузки. Все изображения грузятся сразу, первый экран тяжёлый.
Чек-лист внедрения
- Определён вид по умолчанию для каждого типа раздела (сетка/список) через свойство раздела.
- Есть переключатель вида с запоминанием выбора в куке или localStorage.
- Подобрано число карточек по аналитике: глубина прокрутки, переходы на вторую страницу, скорость.
- Выбран способ навигации — пагинация или «Показать ещё» с изменением URL, а не чистая лента.
- Настроен кэш catalog.section с тегированным сбросом.
- Цена и наличие вынесены в отложенную подгрузку.
- Включена ленивая загрузка изображений и серверный ресайз.
- Проверена мобильная скорость по Core Web Vitals на реальных устройствах.
Вывод
Сетка или список — это не выбор дизайнера, а решение под сценарий покупки. Визуальному товару нужна плитка, технической номенклатуре и опту — строки, а лучшая стратегия почти всегда — дать переключатель, запомнить выбор и задать вид по умолчанию по типу раздела. Число карточек подбирайте по данным, а не по интуиции, и следите, чтобы большие выборки не убивали скорость.
И помните: любой вид листинга хорош ровно настолько, насколько чисты данные каталога. Полные характеристики, единые единицы измерения, актуальные цены и остатки приходят из учётной системы — наведите там порядок, и листинг заиграет. С витриной поможем мы, с потоком данных — автоматизация на 1С.
