product-list — eshop product grid wrapper
Skinny wrapper for outputting a product grid: a Bootstrap-style .row with optional "Zobrazeno X z Y produktů" caption above. Doesn't render the product itself — you pass itemTemplate, the wrapper iterates and includes it for each item.
Use it on category listings, search results, related products sections. Pure SCSS.
Install
npx czg-ui add product-list@import 'components/eshop/product-list'; to app.scss. No JS.
Requires base.
Parameters
| Param | Type | Default | Notes | |
|---|---|---|---|---|
items | array | [] | Items passed one-by-one as $item to the template | |
itemTemplate | string | — | Path to a Latte template that renders one item | |
visibleCount | string\ | null | — | Caption like "Zobrazeno 12 z 48 produktů" |
rowClass | string | 'row' | Extra class on .product-list__row (default = Bootstrap row) |
Usage
{include /app/components/Eshop/product-list.latte,
items => $products,
itemTemplate => '/app/components/Eshop/product-card.latte',
visibleCount => 'Zobrazeno ' . count($products) . ' z ' . $total . ' produktů'
}product-card.latte then receives $item:
{* /app/components/Eshop/product-card.latte *}
<div class="col-xs-12 col-md-4">
<h3>{$item->title}</h3>
{* ... *}
</div>Without itemTemplate
If you skip itemTemplate, the wrapper expects the children to be defined inline via {include #items}. Less common — typically you'll have a card template.
When NOT to use
- Heterogeneous lists (mix of categories + products + banners) —
build a custom layout, the grid abstraction adds noise
- Non-product grids — generic
preview-card+ a CSS grid is enough