Add to Cart
The Add to Cart component renders a button which lets users add a specific product to their shopping cart.
Use it in place of the full Product component if you wish to have an entirely custom page with the ability to add a specific product to the user's cart.
Examples
- Demo showing the various Add to Cart attributes: Demo | Source Code
- Using Add to Cart buttons to communicate with a Shopping Cart component on the same page: 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:
<div data-reflow-type="add-to-cart" data-reflow-product="1234567890"></div>
Supported Attributes
You can configure the Add to Cart and change the way it's rendered by specifying additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | add-to-cart | Must always be set. |
| data-reflow-product | id of product to show | Must always be set. You can obtain the product id from the Reflow website.
Click to edit the product and you can see the id in the URL. |
| data-reflow-variant | variant of the product | (optional) If the product has
variants, you can place the variant id
here. Pressing "Add to Cart" will add the specified variant to the
shopping cart. Example: |
| data-reflow-addtocart-text | string | (optional) Redefines the "Add to Cart"
button text, if set. Example: |
| data-reflow-show | button, variants, quantity | (optional) Comma separated list of sections
to display. The sections not in the list will be hidden. Example. Skip the quantity and variant selectors, leaving only the
button: |
| data-reflow-shoppingcart-url | URL | (optional) The URL of a page where a
Shopping Cart components is located. Examples:
|