Add to Cart
The Add to Cart component is a call to action button that adds a product to a users cart.
Code
Props
Props should be passed as attributes to the component element.
Boolean props have a leading dot. This is to allow the boolean props to be passed as attributes to the component element.
Who the product is available to. One of all or subscribers.
Defaults to all
The message to display on the button.
Defaults to Add to cart
The options for the product.
Whether the product is out of stock. Setting this to true will disable the add to cart button and show an out of stock message.
Defaults to false
The UUID of the product to add to the cart.
The product type of the product being added to the cart.
One of physical, bundle, event, subscription.
Defaults to physical
The quantity of the product to add to the cart.
Defaults to 1
Whether to redirect to the cart page after adding the product to the cart.
Defaults to false
Whether to show the quantity of the product in the cart.
Defaults to false
The message to display on the “view cart” link.
Defaults to View cart
Styling
The following parts are available to style the add to cart component:
The “add to cart” button element.
The loading spinner displayed instead of the button text when the add to cart action is being performd.
The containing <div> around the add to cart button.
The <div> that contains the out of stock message.
The quantity input field.
The “view cart” button element