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.
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
The path to the cart page.Defaults to /cart
The path to the login page.Defaults to /login
CSS classes to apply to the button.Defaults to w-28
Items for pick and mix subscriptions.
Billing frequency for subscription products.
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:
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.
The containing <div>
around the add to cart button.
--add-to-cart-out-of-stock
The <div>
that contains the out of stock message.
The quantity input field.
The “view cart” button element
--add-to-cart-subscription-required
The “Members only” message container when product is subscriber-only