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.
- Adding a basic Product List component to a page: Demo | Source Code
- A fully featured online store, which demonstrates how to connect a Product List with a Product and a Shopping Cart: Demo | Source Code
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:
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.
You can configure the product list and change the way it's rendered by specifying additional
|data-reflow-type||Must always be set.|
|data-reflow-layout||(optional) Choose the layout of the product list. Currently products can be displayed as either cards or list (default).|
|data-reflow-page||page number||(optional) Choose which page of results to show. If not set, displays the first page. |
|data-reflow-perpage||results per page||(optional) How many products you wish to show per page. Defaults to 20.|
|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.|
|data-reflow-order||(optional) Choose the display order of the products. Defaults to |
You can also perform multiple sorts by separating order clauses with commas:
This sorts products by using the Custom Sort number (which you enter in the [product edit](@site/site-management/products.md) 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](/docs/html-toolkit/1/product-search) to construct a simple search page. |
|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 |
Check the Examples to see how you can link a Product List to a page with a Product component, to create fully functional listings.
|data-reflow-similar-to||id of a product||(optional) Populates the product list with products similar to the given product id. |
At the moment these are products that share one or more common categories with the given one. Over time we will enhance the algorithm to give more relevant suggestions.
|data-reflow-show||(optional) Comma separated list of sections to display. The sections not in the list will be hidden. |