Callbacks and events

The widget tells your page what happens through callbacks, which you pass to configure, and DOM events on the widget element. Both carry the same information, so use whichever fits your code.

Callback	DOM event	Arguments	Called when
`loadedCb`	`teak:loaded`	`(context)`	The widget has loaded and shown the offer.
`optInCb`	`teak:opt-in`	`(context)`	The customer adds protection.
`optOutCb`	`teak:opt-out`	`(context)`, or none after an error	The customer declines protection. Also called when the widget fails.
`updatedCb`	`teak:updated`	`(context)`	The widget re-priced after you called `configure` again.
`onErrorCb`	`teak:error`	`(sessionId)`	The widget failed and removed itself. See Errors.

loadedCb, optInCb, optOutCb, and updatedCb receive a context object, except when optOutCb is called because of an error. onErrorCb receives the session ID. DOM events carry the context object in event.detail.

Context

loadedCb, optInCb, optOutCb, and updatedCb receive a context object. DOM events carry the same object in event.detail.

Field	Type	Description
`isProtected`	boolean or `null`	`true` if the customer has opted in for this widget, `false` if they opted out, `null` before they choose.
`isFormComplete`	boolean	`true` once the customer has opted in or out.
`tagName`	string	The widget element's tag name, in upper case: `TEAK-WIDGET`.
`itemIndex`	string	The widget's `item-index`, when you set one, as a string, for example `"0"`.
`itemIds`	string[]	Teak's IDs for the quoted items this widget covers.
`id`	string	Teak's ID for the one quoted item this widget covers, when it has an `item-index`.
`key`	string	The widget element's `id` attribute, if it has one.

onErrorCb receives the session ID instead of a context object. The onErrorCb you pass to preload is different: it receives { message }.

Listening to DOM events

Events bubble, so you can listen on the widget element or on document:

document.addEventListener('teak:opt-in', (event) => {
  console.log('Opted in', event.detail.isProtected);
});

Order of callbacks

loadedCb fires once per widget, when it first shows the offer.
If the widget starts with a choice already made, for example restored with persist, optInCb or optOutCb fires right after loadedCb.
optInCb and optOutCb fire as soon as the customer chooses, while the widget saves the choice to Teak. If saving fails, the widget removes itself and calls onErrorCb and optOutCb.
After a configure call that keeps the same offer, the customer's choice is kept, and only updatedCb fires.
onErrorCb fires at most once until the widget loads successfully again.

Callbacks on an error

When the widget fails, it calls optOutCb with no context object. Write optOutCb so it works without one:

optOutCb: (context) => {
  orderSummary.setProtection(null);   // don't rely on context here
},

Next steps

To handle failures, or put the callbacks to work:

Learn what happens when the widget fails and what to do about it.
Handle the customer's choice to keep your order total right, keep the widget in step with the cart, and handle errors.