Events

<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
}

Tip

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 ComponentsDrop-in usage and the MutationObserver example.

Discount Badge overviewWhat the component does and how it reads the discount.