> For the complete documentation index, see [llms.txt](https://orbit-b2b.gitbook.io/orbit-b2b-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://orbit-b2b.gitbook.io/orbit-b2b-docs/b2b-prices-app-embed/variant-qty-reactivity.md).

# Variant & qty reactivity

The embed re-runs whenever the price needs to update — when the customer picks a different variant, when they change the quantity input, or when the theme re-renders the price block via its Section Rendering API.

## Variant change

When a customer picks a new variant (color, size, style):

1. The embed listens for the `variant:changed` event that most themes fire
2. As a fallback, it watches `?variant=` URL changes via MutationObserver
3. The new variant's price is read from the embed's payload (which carries every variant's `priceCents`)
4. The resolver re-runs with the new variant's retail price → new B2B price computed
5. Overlay replaces the old one in place — the old B2B price doesn't flash retail in between

### How we avoid the flash of retail

Theme's Section Rendering API replaces the entire price element asynchronously (fetches HTML, swaps innerHTML). The cart **Add to cart** button gets disabled while the fetch is in flight and re-enabled the moment the new HTML is ready.

The embed uses that button's `disabled` attribute as a precise lifecycle signal:

* **Enabled → disabled** (theme just kicked off a re-render) → re-engage the pre-hide CSS gate, hiding the price element so the retail price doesn't peek through
* **Disabled → enabled** (theme finished re-rendering) → apply the new B2B overlay onto the freshly-rendered price element, release the pre-hide gate

This is more reliable than waiting a fixed number of milliseconds — slow networks render slower, fast networks render faster, and the cart button transition catches both.

## Quantity change

Volume Pricing tiers depend on the quantity the customer plans to buy. The embed listens to:

* `change` events on the qty input (when the customer types and blurs / hits Enter)
* `input` events on the qty input (when the customer clicks + / - stepper buttons)

And re-ticks the resolver with the new qty:

| Qty | Tier matched                       | Price shown                     |
| --- | ---------------------------------- | ------------------------------- |
| 1   | Tier 1 (`1-9`) — no extra discount | $21.25 (wholesale only)         |
| 10  | Tier 2 (`10-49` = 10% off)         | $19.13 (wholesale + 10% volume) |
| 50  | Tier 3 (`50+` = 15% off)           | $18.06 (wholesale + 15% volume) |

The qty input is found via `form[action*="/cart/add"] input[name="quantity"]` (the cross-theme convention). If your theme uses a custom selector, the embed falls back to `input[name="quantity"]` and `[data-quantity-input]` on the page.

## Listing card prices

Collection / search / homepage product cards always render at **qty=1**. That's because the card doesn't know how many the customer will eventually buy. Once the customer clicks through to PDP and picks a qty, the volume tiers come alive.

If you have a Volume Pricing rule that gives a discount starting at qty 1 (i.e. tier 1 already has a discount), cards reflect that discount. Otherwise cards show the wholesale-only price.

## When no rule applies

If no rule matches the current variant + customer + qty combination:

* Resolver returns null
* Embed leaves the theme's native price untouched
* Pre-hide gate releases immediately

So a guest viewing a B2B product on a public store sees the retail price unchanged, with no detectable delay or flicker.

## Next

* [Troubleshoot the embed](https://gitlab.com/thoaingo.vnkingnet/wholesale/-/tree/docs/docs/gitbook/troubleshooting/b2b-prices-embed.md)
* [Discount combination (Wholesale + Volume stacking)](/orbit-b2b-docs/settings/discount-strategy.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://orbit-b2b.gitbook.io/orbit-b2b-docs/b2b-prices-app-embed/variant-qty-reactivity.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.