Skip to main content
<dkl-discount-badge> is otherwise standalone — it has no discount or state event of its own (it reads the product’s max-reward metafields server-side and re-renders on variant change). What it does emit are lifecycle events as its behaviour attaches and tears down.

​
Emits

Each badge instance emits mount and unmount events — handy for wiring up (and cleaning up) custom integrations per instance. Both bubble and carry a 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? } — productId is 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: 'discount-badge',
  widgetId: null,
  productId: 7820000000001
}
To react to the badge’s text changing (e.g. on a variant change), there’s no event — observe the element with a MutationObserver instead. See Reacting to changes.

​
Next steps

Web Components

Drop-in usage and the MutationObserver example.

Discount Badge overview

What the component does and how it reads the discount.