Skip to main content
<dkl-volume-picker-radio-groups> is the source of the tier-change event in Discount Kit Live. It has no direct reference to <dkl-price> — instead it emits a tier-change event that the price (and any of your own code) can listen for, coupled by event name and product id only.

​
Emits

widgetId and variantId. widgetId is the app block’s id — it’s null on a web component which has no block. variantId is the product variant the picker is bound to.
​
discount-kit-live:volume-discount:tier-change
CustomEvent
Fired when a tier is selected or deselected. Bubbles, so you can listen on document. The detail carries resource:
{
  productId, variantId, widgetId, widgetType,
  previousTier: VolumeDiscountTier | null,
  currentTier:  VolumeDiscountTier | null,  // null = deselected
  updatesPrice: boolean                     // see below
}
// VolumeDiscountTier: { index, quantity, discountAmount, discountType, unitPriceCents }
updatesPrice: Reflects the picker’s “Update price when a tier is selected” setting (data-update-price-on-change). When it’s false, price components like <dkl-price> ignore the tier for pricing — but the event still fires, so your own integrations keep receiving it.<dkl-price> listens for this when updatesPrice is true, matched by product id — a selected tier shows the discounted price, a null tier reverts to base.
A full example payload: 
// event.detail.resource on tier-change
{
  productId: 7820000000001,
  variantId: 41200000000001,
  widgetId: 'a1b2c3d4',        // the app block's id (null on a web component)
  widgetType: 'volume-picker-radio-groups',
  previousTier: null,
  currentTier: {
    index: 1,
    quantity: 3,
    discountAmount: 10,      // percent for 'percentage', major-unit amount for 'fixedAmount'
    discountType: 'percentage',
    unitPriceCents: 1800     // the per-item discounted price
  },
  updatesPrice: true         // false → <dkl-price> ignores the tier for pricing
}

​
Lifecycle

Each Volume Picker instance also emits mount and unmount events as its behaviour attaches and tears down — handy for wiring up (and cleaning up) custom integrations per instance. Both bubble and carry the same DklWidgetEventDetail resource.
​
discount-kit-live:widget:mount
CustomEvent
Fired once the controller has attached its behaviour to the (already server-rendered) element. resource: { widgetType, widgetId, productId?, variantId? } — productId and variantId are included when known.
​
discount-kit-live:widget:unmount
CustomEvent
Fired when the instance tears down — e.g. the element is removed, or the theme editor re-renders the section. Same resource shape. Use it to detach any listeners or observers you set up on mount.
// event.detail.resource on widget:mount / widget:unmount
{
  widgetType: 'volume-picker-radio-groups',
  widgetId: 'a1b2c3d4',        // the app block's id (null on a web component)
  productId: 7820000000001,
  variantId: 41200000000001
}

​
Next steps

Web Components

A listener example and how to react to tier changes.

Discount Price

The price display that reacts to this picker’s tier-change events.