Events

The quickview is event-driven at both ends. It listens for two command events that open and close it, and emits a notification at every step of the dialog’s life — open, load, variant change, cart add, close. Everything bubbles to document with its payload on event.detail.resource.

Listens for

`discount-kit-live:quickview:open`

CustomEvent

Opens the dialog. detail.resource accepts every option of openQuickview() — productHandle or productId, variantId, quantity bounds, products for a multi-product picker, and so on. Works on any page, with or without a <dkl-quickview> tag; fire-and-forget.

`discount-kit-live:quickview:close`

CustomEvent

Closes the dialog. No payload.

document.dispatchEvent(new CustomEvent('discount-kit-live:quickview:open', {
  detail: { resource: { productHandle: 'awesome-tee' } },
}))

Emits

`discount-kit-live:quickview:opened`

CustomEvent

The dialog has opened and is showing its loading skeleton. resource.contentElement is the dialog’s content root — the mount point if you want to inject your own content.

`discount-kit-live:quickview:loaded`

CustomEvent

The product has loaded and rendered. Also fires when a multi-product picker finishes rendering, and again each time a product screen renders after a pick.

`discount-kit-live:quickview:closed`

CustomEvent

The dialog has closed.

// event.detail.resource on opened / loaded / closed
{
  productHandle: 'awesome-tee',      // null on the multi-product picker
  productId: 7820000000001,          // set once the product has loaded
  contentElement: HTMLElement        // opened / loaded only
}

`discount-kit-live:quickview:error`

CustomEvent

The product failed to fetch or render. resource: { productHandle, message }.

`discount-kit-live:quickview:panel-change`

CustomEvent

The visible screen changed on a multi-product open — products (the picker) ↔ product (the options screen). resource: { panel, productHandle }; productHandle is null on the picker.

`discount-kit-live:quickview:variant-change`

CustomEvent

The shopper’s selection resolved to a (new) variant. Carries the full variant, so a listener can update anything on the page from it:

// event.detail.resource on variant-change
{
  productHandle: 'awesome-tee',
  productId: 7820000000001,
  variantId: 41200000000001,         // null when the combination has no variant
  available: true,                   // null when unknown
  priceCents: 3300,                  // null when unknown
  compareAtCents: 4000,              // null when not on sale
  featuredImage: 'https://cdn.shopify.com/…',
  variant: { id, title, sku, featured_image, … },   // the full `variant | json` object
  selectedOptionValues: ['Blue', 'M'],
  exact: true                        // false when only the id could be resolved
}

exact is false only on the Ajax fallback for products with more than 250 variants, where the price range is shown instead of an exact price. The Storefront API source always resolves exactly.

`discount-kit-live:quickview:add-to-cart`

CustomEvent

A cart add succeeded.

// event.detail.resource on add-to-cart
{
  productHandle: 'awesome-tee',
  productId: 7820000000001,
  variantId: 41200000000001,
  quantity: 2,
  variant: { … },                    // the full `variant | json` object
  featuredImage: 'https://cdn.shopify.com/…',
  selectedOptionValues: ['Blue', 'M'],
  properties: { '_dkl.source': 'quickview' },   // line-item properties sent, or null
  response: { cart, userErrors, warnings }      // the standard updateCart result,
                                                // or the raw /cart/add.js body on the fallback
}

Lifecycle

Each trigger also emits the shared mount and unmount events as its behaviour attaches and tears down. Both bubble and carry the same DklWidgetEventDetail resource as the other components.

`discount-kit-live:widget:mount`

CustomEvent

Fired once the trigger’s behaviour has attached. resource: { widgetType: 'quickview', widgetId, productId? } — widgetId is the trigger’s data-widget-id (null when unset), productId is included when the trigger carries a numeric data-product-id.

`discount-kit-live:widget:unmount`

CustomEvent

Fired when the trigger tears down — the element is removed, or the theme editor re-renders its section. Same resource shape.

Events from the in-dialog widgets

The Volume Picker mounted inside the dialog is the real component, so it emits its own discount-kit-live:volume-discount:tier-change as the shopper picks a tier. Both in-dialog widgets emit their mount / unmount events too.

Shopify standard events & actions

The quickview speaks Shopify’s storefront standards, so the rest of your theme can stay in sync without knowing anything about Discount Kit:

Variant changes dispatch shopify:product:select so theme code listening for selections sees the dialog’s too. The event’s promise resolves with { variant, detail }, and detail.sourceId is 'dkl-quickview'. The event is only dispatched when the theme (or Shopify’s CDN) provides the standard-events library; otherwise it’s skipped — standard events are additive.
Cart adds go through the standard Shopify.actions.updateCart action when the storefront carries it. The theme then owns the cart refresh (drawer, cart count, in-place update) and emits its own standard cart events. Any userErrors show as the dialog’s error message, and warnings as a notice.
Without the action, the dialog falls back to the Ajax /cart/add.js endpoint and dispatches shopify:cart:lines-update itself (and shopify:cart:error on failure), so the Order Goal and any other listener still update.

Next steps

JavaScript APIThe promise-based helper behind the open command.

Web ComponentA listener example and the trigger element.