> ## Documentation Index
> Fetch the complete documentation index at: https://docs.marzipan.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Add to Cart

> The Add to Cart component is a call to action button that adds a product to a users cart.

### Code

```javascript theme={null}
<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.

<ResponseField name="availability" type="string">
  Who the product is available to. One of `all` or `subscribers`.

  Defaults to `all`
</ResponseField>

<ResponseField name="button-text" type="string">
  The message to display on the button.

  Defaults to `Add to cart`
</ResponseField>

<ResponseField name="options" type="object">
  The options for the product.
</ResponseField>

<ResponseField name="out-of-stock" type="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`
</ResponseField>

<ResponseField name="product-id" type="string" required>
  The UUID of the product to add to the cart.
</ResponseField>

<ResponseField name="product-type" type="string" required>
  The product type of the product being added to the cart.

  One of `physical`, `bundle`, `event`, `subscription`.

  Defaults to `physical`
</ResponseField>

<ResponseField name="quantity" type="number">
  The quantity of the product to add to the cart.

  Defaults to `1`
</ResponseField>

<ResponseField name="redirect" type="boolean">
  Whether to redirect to the cart page after adding the product to the cart.

  Defaults to `false`
</ResponseField>

<ResponseField name="show-quantity" type="boolean">
  Whether to show the quantity of the product in the cart.

  Defaults to `false`
</ResponseField>

<ResponseField name="view-cart-text" type="string">
  The message to display on the "view cart" link.

  Defaults to `View cart`
</ResponseField>

<ResponseField name="cart-path" type="string">
  The path to the cart page.

  Defaults to `/cart`
</ResponseField>

<ResponseField name="login-path" type="string">
  The path to the login page.

  Defaults to `/login`
</ResponseField>

<ResponseField name="button-classes" type="string">
  CSS classes to apply to the button.

  Defaults to `w-28`
</ResponseField>

<ResponseField name="pick-and-mix-items" type="object">
  Items for pick and mix subscriptions.
</ResponseField>

<ResponseField name="billing-frequency" type="string|number">
  Billing frequency for subscription products.
</ResponseField>

<ResponseField name="disabled" type="boolean">
  Whether to disable the button without showing out of stock message.

  Defaults to `false`
</ResponseField>

<ResponseField name="related-products" type="object">
  Related products to add with the main product.
</ResponseField>

### Styling

The following parts are available to style the add to cart component:

<ResponseField name="--add-to-cart-button">
  The "add to cart" button element.
</ResponseField>

<ResponseField name="--add-to-cart-button-spinner">
  The loading spinner displayed instead of the button text when the add to cart action is being performd.
</ResponseField>

<ResponseField name="--add-to-cart-container">
  The containing `<div>` around the add to cart button.
</ResponseField>

<ResponseField name="--add-to-cart-out-of-stock">
  The `<div>` that contains the out of stock message.
</ResponseField>

<ResponseField name="--add-to-cart-quantity">
  The quantity input field.
</ResponseField>

<ResponseField name="--view-cart-button">
  The "view cart" button element
</ResponseField>

<ResponseField name="--add-to-cart-subscription-required">
  The "Members only" message container when product is subscriber-only
</ResponseField>