# Add to Order Button

The button that puts a product on the order. Two visual variants (compact icon-only or full with quantity controls), plus configurable handling for out-of-stock items.

For matrix parent products, this block doesn't render — use **Product Variations** instead, which has its own multi-variant Add to Cart action.

## Available in

* Catalog modules
* Public Page modules

## When to use

* Every product detail page where the user can buy.
* Inside Catalog Display product cards (compact variant) for quick-add functionality.
* B2B and B2C order flows.

For Order Form contexts where products come from other paths (search, scan, manual entry), Add to Order Button isn't needed — Order Lines handles those flows directly.

## Settings

| Setting                                                                                   | Description                                                                                                                                                      |
| ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button Variant**                                                                        | compact (small icon + text, with a checkmark badge if the item is already in the cart) or full (quantity spinner + button + checkmark badge). Default: full.     |
| **Out of Stock Behavior**                                                                 | hide (don't render), disable (greyed out), allow (always enabled), allowWithCondition (enabled only if a condition expression evaluates true). Default: disable. |
| **Condition Expression** *(only visible when Out of Stock Behavior = allowWithCondition)* | A JavaScript-style expression evaluated against the item. Example: `quantityavailable > 5`.                                                                      |
| **CSS Classes**                                                                           | Extra CSS classes for styling.                                                                                                                                   |

## How it works

1. Reads the current product. If it's a matrix parent, the block doesn't render.
2. **Compact variant** — small button + cart icon. If the item is already in the cart, a checkmark badge appears.
3. **Full variant** — quantity spinner (+ / − buttons), Add to Cart button, plus the in-cart checkmark badge.
4. Quantity is clamped to `quantityAvailable` unless **Out of Stock Behavior** is *allow* or *allowWithCondition*.
5. If **Quantity Adjusts Rate** is on in the Order Lines settings, changing the quantity may update the unit price based on the configured pricing tiers.
6. The **`catalog-beforeAddToCart`** JavaScript hook fires before adding — return `false` or set `context.cancel = true` to abort.
7. On success, the line item is created with `source: 'catalog'`, deduplicated by item ID, added to the cart store, and a success toast is shown.

The condition expression has access to: `quantityavailable`, `internalid`, `itemid`, `displayname`, `price`, and all other item properties.

{% hint style="info" %}
Use **compact** inside Catalog Display grid cards for quick-add. Use **full** on product detail pages where the user picks a quantity before adding.
{% endhint %}

## Examples

**Catalog grid compact button.** Inside Catalog Display's grid content slot, Add to Order Button with variant = compact. Users browse and one-click add from the grid.

**Detail page quantity entry.** On a product detail page, Add to Order Button with variant = full. Users adjust quantity then click Add.

**Backorder-allowed.** Out of Stock Behavior = allow on a product where backorders are accepted. Users can add even when stock is 0.

**Conditional override.** Out of Stock Behavior = allowWithCondition with expression `quantityavailable > -10`. Backorders allowed up to 10 units below stock.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Product Variations</strong></td><td>The matrix-variant alternative for parent products with attribute combinations.</td><td><a href="/pages/ITBAMKP6MPo6ZB32TbN1">/pages/ITBAMKP6MPo6ZB32TbN1</a></td></tr><tr><td><strong>Order Lines</strong></td><td>Where added items land at runtime.</td><td><a href="/pages/0XacQvdUpwJMX7gVJCf4">/pages/0XacQvdUpwJMX7gVJCf4</a></td></tr><tr><td><strong>JavaScript</strong></td><td>For pre-add hooks like validation or auto-applying discounts.</td><td><a href="/pages/DEHisLtYVyC4YEOvJrO0">/pages/DEHisLtYVyC4YEOvJrO0</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/product-components/add-to-order-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.