# Product List
The Product List component renders a collection of products in a list with optional pagination. You can filter the list to show only products from a specific category, change the ordering and select different layouts.
# Examples
- Adding a basic Product List component to a page: Demo (opens new window) | Source Code (opens new window)
- A fully featured online store, which demonstrates how to connect a Product List with a Product and a Shopping Cart: Demo (opens new window) | Source Code (opens new window)
# How to Embed
To embed this component on your website and display a list of products, include the reflow library, and add the following tag somewhere in the <body> of your page:
<div data-reflow-type="product-list"></div>
This will display all products in your store in a paginated list. To change how many products to show, the display order and which category to limit the results to, use the attributes from the next section.
# Supported Attributes
You can configure the product list and change the way it's rendered by specifying additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | product-list | Must always be set. |
| data-reflow-layout | list, cards | (optional) Choose the layout of the product list. Currently products can be displayed as either cards or list (default). Example: data-reflow-layout="cards" |
| data-reflow-page | page number | (optional) Choose which page of results to show. If not set, displays the first page. Example: data-reflow-page="2" |
| data-reflow-perpage | results per page | (optional) How many products you wish to show per page. Defaults to 20. Example: data-reflow-perpage="15" |
| data-reflow-category | id of category to show | (optional) Set this parameter if you wish to show products only from a specific category and its subcategories. You can obtain the category id from the Reflow website. Example: data-reflow-category="12345678" |
| data-reflow-order | name_asc, name_desc, price_asc, price_desc, date_asc, date_desc, custom_asc, custom_desc | (optional) Choose the display order of the products. Defaults to date_desc - products will be shown newest to oldest. Example: data-reflow-order="price_desc" You can also perform multiple sorts by separating order clauses with commas: Example: data-reflow-order="custom_desc,name_asc"This sorts products by using the Custom Sort number (which you enter in the product edit page), and then by name from A to Z. The result is that products with Custom Sort > 0 show before the rest. |
| data-reflow-search | string | (optional) If set, the product list will display only products that contain the search string in their titles. This enables the product list to be combined with Product Search to construct a simple search page. Example: data-reflow-search="curtains" |
| data-reflow-product-link | URL | (optional) If set, this attribute wraps the product cards into links that point to the URL you've set. A special {id} placeholder can be used, which will be replaced with the product id.Check the Examples to see how you can link a Product List to a page with a Product component, to create fully functional listings. Examples:
|
| data-reflow-show | image, name, excerpt, price, pagination | (optional) Comma separated list of sections to display. The sections not in the list will be hidden. Example: data-reflow-show="image,name,price" |