Events reference

Events are standard bubbling CustomEvents on the element:

tg.addEventListener('togenar:configurator:selection_change', (e) => {
  console.log(e.detail);
});

Events

togenar:ready

The viewer is loaded and interactive.

togenar:configurator:selection_change

Fires on load and on every option change — including changes you drive with select(), and including a module slot changing, whether the shopper used the built-in picker or your own showPart() call. Detail:

{
  "parts": [
    { "partId": "…", "partLabel": "Body", "variantId": "…", "label": "Walnut",
      "sku": "OSLO-BODY-WALNUT", "modelName": "…" }
  ],
  "shareUrl": "https://model.togenar.com/…",  // deep link to this exact configuration
  "activeMembers": { "shelf1": "shelf1-two-doors" }  // only on products with module slots
}

activeMembers maps each module slot to the part currently shown in it. Products without slots omit the field. A panel that renders slots should redraw from this event rather than from its own click handler — the shopper can change a slot from the built-in picker too.

This event also refreshes the synchronous caches behind getSelection(), getSkus() and getShareUrl().

togenar:configurator:product_change

The product changed — from the built-in panel’s product header or your own selectProduct() call. Detail: { "product": "one-seater", "productId": "…", "label": "One Seater" }. A selection_change with the new product’s parts follows it; redraw your panel from that one.

togenar:load

The embed’s iframe finished loading its document shell. Fires before togenar:ready — for almost every purpose you want ready or selection_change instead.

togenar:controls

Fires whenever the viewer’s own control surface changes what it would offer. detail is { ar, photo, dimensions: { enabled, on }, resetView } — the shape getControls() returns. Bind your own buttons to it when you run with controls="off".

togenar:error

Load or configuration failure.

Analytics hooks

togenar:commerce:add_to_cart_success / togenar:commerce:add_to_cart_fail are conventions for your code to dispatch after your cart call resolves, keeping commerce analytics on one channel.

Pattern: gate your cart button

const btn = document.getElementById('add');
tg.addEventListener('togenar:configurator:selection_change', (e) => {
  const skus = (e.detail.parts || []).map(p => p.sku).filter(Boolean);
  btn.disabled = skus.length === 0;
});