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

# Web Component

> Drop <dkl-volume-picker-radio-groups> into your theme markup and configure it with data-* attributes

A web component is the `<dkl-volume-picker-radio-groups>` tag written directly into your
theme's Liquid. On a **product page** it needs **zero attributes** — it clones a pre-staged
carrier and renders the picker server-side.

## Usage

On a product page, add the `<dkl-volume-picker-radio-groups>` web component — it renders the first eligible `PRODUCT_VOLUME` discount server-side:

```html theme={null}
<dkl-volume-picker-radio-groups></dkl-volume-picker-radio-groups>
```

It renders the first eligible `PRODUCT_VOLUME` discount server-side — including the
light-DOM radio cards, which join the product form. If the product has **no** eligible
volume discount, no carrier exists and the tag hides itself.

### Multiple volume discounts on one product

Each eligible discount has its own carrier, keyed by its discount id. An attribute-less tag
clones the **first** eligible discount; `data-discount-id` targets a specific one (the
`discount-` prefix is optional). Place one tag per discount to show several — they can't
collide:

```html theme={null}
<dkl-volume-picker-radio-groups data-discount-id="1478638797012"></dkl-volume-picker-radio-groups>
<dkl-volume-picker-radio-groups data-discount-id="discount-1478638797013"></dkl-volume-picker-radio-groups>
```

## Reacting to changes

`<dkl-volume-picker-radio-groups>` emits `discount-kit-live:volume-discount:tier-change`
when a tier is selected or deselected. To run your own code on a tier change, listen for
that event — it bubbles, so you can listen on `document`. See the
[Events](/components/volume-picker/events) page for the full payload shape, and
[Listen for tier changes](#examples) in the examples below for a working listener.

## Examples

For the full list of `data-*` attributes you can set, see
[Styling & Data Attributes](/components/volume-picker/styling-and-data).

```html Override attributes + tokens theme={null}
<dkl-volume-picker-radio-groups
  data-discount-id="1478638797012"
  data-style="mini-buttons"
  data-update-price-on-change="true"
  data-sync-with-quantity="true"
  style="
    --dkl-vp-selected-border-color: #2563eb;
    --dkl-vp-list-gap: 0.25rem;
    --dkl-vp-title-font-weight: 700;
    --dkl-radius: 12px;
  "
></dkl-volume-picker-radio-groups>
```

```html Pair with <dkl-price> theme={null}
<!-- Let <dkl-price> own the price; the picker only emits events -->
<dkl-volume-picker-radio-groups data-price-target="none"></dkl-volume-picker-radio-groups>
<dkl-price></dkl-price>
```

```js Listen for tier changes theme={null}
// Bubbles, so you can listen on document
document.addEventListener(
  'discount-kit-live:volume-discount:tier-change',
  (event) => {
    const { productId, currentTier, previousTier } = event.detail.resource

    if (!currentTier) {
      console.log('Tier cleared — back to base price')
      return
    }

    console.log(
      `Product ${productId}: tier ${currentTier.index} — ` +
        `buy ${currentTier.quantity} at ${currentTier.unitPriceCents}c each`
    )
  }
)
```

```js Example event payload theme={null}
// event.detail.resource on tier-change
{
  productId: 7820000000001,
  variantId: 41200000000001,
  widgetId: 'volume-picker-12345-cards',
  widgetType: 'volume-picker-radio-groups',
  previousTier: {
    index: 0,
    quantity: 2,
    discountAmount: 5,
    discountType: 'percentage',
    unitPriceCents: 1900
  },
  currentTier: {
    index: 1,
    quantity: 3,
    discountAmount: 10,
    discountType: 'percentage',
    unitPriceCents: 1800
  }
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Styling & Data Attributes" icon="palette" href="/components/volume-picker/styling-and-data">
    Every `data-*` attribute, `--dkl-*` token, CSS part, and light-DOM class.
  </Card>

  <Card title="App block" icon="puzzle-piece" href="/components/volume-picker/app-block">
    The no-code, theme-editor placement.
  </Card>
</CardGroup>