Skip to main content

​
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
object
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