Product
The Product component renders a product from your store in any web page. You can use it to display an entire product page with an image gallery and a buy button, or a minimal product listing with only the info that you need.
If you need to display multiple products, use the Product List component, instead of placing individual product components on your page.
Examples
- Adding a Product 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 product, include the reflow library, and add the following tag somewhere in the <body> of your page:
<div data-reflow-type="product" data-reflow-product="1234567890"></div>
The id of the product to show can be set either via the data-reflow-product attribute or by appending a product query parameter to the page URL (example.com?product=123456789).
Check out the examples above to see how we use the query parameter to connect a product list with a product page.
Supported Attributes
You can configure the product and change the way it's rendered by specifying additional data-reflow-xxx attributes.
You can configure the product and change the way it's rendered by specifying
additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | product | Must always be set. |
| data-reflow-product | id of product to show | (optional) If not set, the product component
will look for the product id in the page URL. |
| data-reflow-show |
| (optional) Comma separated list of sections
to display. The sections not in the list will be hidden. |
| data-reflow-shoppingcart-url | URL | (optional) The URL of a page where a
Shopping Cart components is located. Examples:
|