# 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

# 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.

  • data-reflow-product-link="https://example.com/products?show={id}"
  • data-reflow-product-link="/product.html?id={id}"
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.

Example: data-reflow-similar-to="123456789"
data-reflow-addtocart-text string (optional) Redefines the "Add to Cart" button text, if set.

Example: data-reflow-addtocart-text="Add to Basket"
data-reflow-shoppingcart-url URL (optional) The URL of a page where a Shopping Cart components is located.

If this is set, when customers add the product to their cart, they will see a button that brings them to their shopping cart so they can complete the checkout.

  • data-reflow-shoppingcart-url="https://example.com/cart"
  • data-reflow-shoppingcart-url="/somepage.html"
data-reflow-show image, name, excerpt, price,
add-to-cart, 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"