JavaScript API

Unwan’s picker is a small, standard-DOM controller shared by Checkout Blocks and classic checkout — there’s exactly one implementation to reason about, not two.

`window.unwanAddressPicker`

const picker = window.unwanAddressPicker.mount( element, data );
picker.update( nextData );
window.unwanAddressPicker.destroy( element );

Method	Description
`mount( element, data )`	Mounts (or retrieves the existing instance for) a controller on `element`, an `HTMLElement`. Returns the controller, or `null` if `element` isn’t a real `HTMLElement`. Calling `mount` again on an already-mounted element updates it rather than creating a second instance.
`instance.update( data )`	Re-renders with new data — a fresh checkout option list, a changed selection, and so on.
`destroy( element )`	Removes listeners and generated markup, and clears the internal instance registry for that element.

Instances are tracked in a WeakMap keyed by their mount element, so there’s no manual bookkeeping and no risk of leaking a detached controller.

Data shape

The controller expects roughly this shape (matching what unwan_checkout_address_options produces server-side):

{
  addresses: [
    {
      id: 'unwan_a_1a2b3c4d5e6f7890',
      name: 'Jordan Rivera',
      street: '123 Main St',
      details: 'Austin, TX 78701, United States',
      description: '123 Main St, Austin, TX 78701, United States',
      isDefault: true,
      fields: { /* full address field set */ },
    },
    // …
  ],
  selection: 'unwan_a_1a2b3c4d5e6f7890', // a saved ID, or "new"
  summary: { /* the currently selected option, for the collapsed view */ },
  labels: { /* unwan_checkout_picker_labels keys */ },
  searchThreshold: 4,
  disabled: false,
}

The selection event

Selecting an option — by click or keyboard — dispatches a bubbling custom event on the mount element:

element.addEventListener( 'unwan-selection-change', ( event ) => {
  console.log( event.detail.value ); // a saved address ID, or "new"
} );

Both checkout adapters listen for this to sync their hidden field (classic checkout) or Store API extension data (Blocks) and to show/hide the native address fields underneath.

Standard-DOM guarantees

The picker deliberately avoids anything that would make it hard to inspect, override, or extend:

No custom element (customElements.define) and no Shadow DOM — everything renders as plain <div>/<span>/<button> markup you can select and style with ordinary CSS.
No style mutation from JavaScript — all presentation lives in assets/css/unwan.css, documented on the CSS Variables & Markup page.
Full keyboard support out of the box: Arrow Up/Down/Left/Right, Home, and End move and select within the role="radio" group, matching standard radio-group behavior.

`window.unwanClassicCheckout`

On classic checkout only, Unwan localizes a private, per-request configuration object consumed by unwan-classic-checkout.js to mount the shared picker into each .unwan-checkout__selector placeholder: checkout options for each enabled type, field keys, the store’s base country, the search threshold, and picker labels. This object is checkout-request-specific and isn’t intended as a public integration point — filter the data going into it server-side instead, via unwan_classic_checkout_picker_data (see the Hooks Reference).

Checkout

Concepts

Customization

Developers

`window.unwanAddressPicker`

Data shape

The selection event

Standard-DOM guarantees

`window.unwanClassicCheckout`

​window.unwanAddressPicker

​Data shape

​The selection event

​Standard-DOM guarantees

​window.unwanClassicCheckout

`window.unwanAddressPicker`

Data shape

The selection event

Standard-DOM guarantees

`window.unwanClassicCheckout`