Code

<marzipan-addtocart
  product-id="c66e6274-3a05-4b78-95ae-9451ac459f0b"
  show-quantity="true"
  redirect="true"
  availability="all"
  disabled="false"
></marzipan-addtocart>

Props

Props should be passed as attributes to the component element.
availability
string
Who the product is available to. One of all or subscribers.Defaults to all
button-text
string
The message to display on the button.Defaults to Add to cart
options
object
The options for the product.
out-of-stock
boolean
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
product-id
string
required
The UUID of the product to add to the cart.
product-type
string
required
The product type of the product being added to the cart.One of physical, bundle, event, subscription.Defaults to physical
quantity
number
The quantity of the product to add to the cart.Defaults to 1
redirect
boolean
Whether to redirect to the cart page after adding the product to the cart.Defaults to false
show-quantity
boolean
Whether to show the quantity of the product in the cart.Defaults to false
view-cart-text
string
The message to display on the “view cart” link.Defaults to View cart
cart-path
string
The path to the cart page.Defaults to /cart
login-path
string
The path to the login page.Defaults to /login
button-classes
string
CSS classes to apply to the button.Defaults to w-28
pick-and-mix-items
object
Items for pick and mix subscriptions.
billing-frequency
string|number
Billing frequency for subscription products.
disabled
boolean
Whether to disable the button without showing out of stock message.Defaults to false
Related products to add with the main product.

Styling

The following parts are available to style the add to cart component:
--add-to-cart-button
The “add to cart” button element.
--add-to-cart-button-spinner
The loading spinner displayed instead of the button text when the add to cart action is being performd.
--add-to-cart-container
The containing <div> around the add to cart button.
--add-to-cart-out-of-stock
The <div> that contains the out of stock message.
--add-to-cart-quantity
The quantity input field.
--view-cart-button
The “view cart” button element
--add-to-cart-subscription-required
The “Members only” message container when product is subscriber-only