Add to Cart
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.
- 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>
You can configure the
Add to Cart and change the way it's rendered by specifying additional
|data-reflow-type||Must always be set.|
|data-reflow-product||id or handle of the product to show||Must always be set. You can obtain the product id and handle 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](@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.
|data-reflow-addtocart-text||string||(optional) Redefines the "Add to Cart" button text, if set. |
|data-reflow-show||(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](/docs/html-toolkit/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.