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. Example: data-reflow-product="12345678" |
| data-reflow-variant | variant of the product | (optional) If the product has [variants](@site/guide/product-variants.md), you can place the variant id here. Pressing "Add to Cart" will add the specified variant to the shopping cart. You can find the variant id from the product edit page. Example: data-reflow-variant="variant1235678" |
| 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-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-show="button" |
| data-reflow-shoppingcart-url | URL | (optional) The URL of a page where a [Shopping Cart](/docs/html-toolkit/1/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. Examples:
|