Events

<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 ComponentsA listener example and how to react to tier changes.

Discount PriceThe price display that reacts to this picker's tier-change events.