Плагин Products List — это основной инструмент Gridbox для динамического вывода товаров на страницах категорий или главной витрине магазина. Он позволяет гибко управлять сеткой (Grid) или списком (List), настраивать количество колонок под разные устройства, а также выводить важные коммерческие метки (скидки, «хиты продаж») и кнопки быстрого добавления в корзину.
1. Основные настройки сетки (Layout)
В настройках плагина вы определяете геометрию вашего каталога:
- ■ Layout Type: Выбор режима отображения — Grid (плитка с карточками) или List (горизонтальные строки).
- ■ Columns: Настройка количества элементов в ряду. Gridbox поддерживает адаптивное изменение: например, 4 колонки на десктопе, 2 на планшете и 1 в ряд на смартфоне.
- ■ Gutter: Внутренние отступы между карточками товаров, обеспечивающие «воздух» в сетке.
2. Выбор контента для отображения (Content)
Вы можете детально настроить состав элементов внутри каждой карточки:
- ■ Image: Вывод основного изображения товара с настройкой пропорций (Aspect Ratio).
- ■ Title & Price: Обязательные элементы, отображающие заголовок и актуальную цену.
- ■ Badges: Активация автоматических меток «Sale» (скидка) или «New» (новинка).
- ■ Add to Cart: Вывод кнопки «В корзину», скрытие которой превращает карточку в информационную (режим каталога).
Для магазинов с большим ассортиментом плагин поддерживает несколько видов пагинации: классический «постраничный» (Pagination), кнопку «Загрузить еще» (Load More) и современный «бесконечный скролл» (Infinite Scroll). Также в настройках можно активировать кнопку сортировки (Sort by), которая позволит пользователям самим выбирать порядок отображения: по цене, дате поступления или алфавиту.
Если вы верстаете каталог для сайта типа «Велес» или «Биомолодость», всегда задавайте для всех изображений товаров одинаковый Aspect Ratio (например, 1:1 или 4:3) в настройках плагина. Без этого, если клиент загрузит в систему фотографии разного формата (одна горизонтальная, другая вертикальная), сетка плагина Products List «поедет», а высота карточек станет рваной. Единый формат — залог визуальной чистоты и профессионального вида магазина.