事件 · JavaScript 用戶端

結帳流程會向你的頁面回報其正在進行的操作。使用 on() 訂閱：

JavaScript

entase.on('checkout.ready', payload => {
  console.log('checkout open for', payload.context.eventID);
});

每個事件名稱只能有一個監聽器

on() 會為每個事件名稱儲存一個回呼函式。為同一名稱註冊第二個回呼函式時，會取代第一個 – 而不會新增至其中：

JavaScript

entase.on('checkout.closed', a);
entase.on('checkout.closed', b);   // a is gone; only b runs

off() 會移除為某個名稱註冊的任何內容。它會忽略你傳入的任何回呼函式，因此 off('checkout.closed', b) 和 off('checkout.closed') 的作用相同。

如果頁面的多個部分需要對同一事件作出反應，請註冊一個回呼函式，並從中分派處理。

一次訂閱多個事件

兩個方法都接受以空格分隔的字串或名稱陣列，並為每個名稱註冊相同的回呼函式：

JavaScript

entase.on('checkout.ready checkout.closed', payload => {
  console.log(payload.name);
});

entase.off(['checkout.ready', 'checkout.closed']);

負載資料

每個回呼函式都會接收一個物件：

欄位	類型	說明
`name`	string	事件名稱；當一個回呼函式處理多個事件時很有用。
`context`	object	包含 `eventID` – 此結帳流程所屬的活動。
`data`	object	事件專屬的詳細資料。

可用事件

名稱	觸發時機
`checkout.ready`	結帳流程已載入並可供互動。此時用戶端亦會交回你傳遞給 `book()` 的 `clientContext`。
`checkout.closed`	結帳流程已關閉。用戶端會移除面板或視窗，並清除背景遮罩。
`checkout.consent`	訪客已回覆條款通知。接受時，`data.consent` 為 `true`；用戶端會記住此選擇，以便下次略過此步驟。

JavaScript

entase.on('checkout.closed', () => {
  document.body.classList.remove('checkout-open');
});

entase.on('checkout.consent', payload => {
  if (payload.data.consent) console.log('terms accepted');
});

監聽器會跨個別預訂持續保留

監聽器屬於實例，而非某次預訂。建立用戶端後只需註冊一次，它們便會套用至每次 book() 呼叫。使用 payload.context.eventID 區分不同預訂：

JavaScript

const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });

entase.on('checkout.closed', payload => {
  refreshAvailability(payload.context.eventID);
});

呼叫 destroy() 會停止所有監聽器 – 實例會完全停止監聽來自結帳流程的訊息。

來自其他來源的訊息會被忽略

用戶端只接受來自 Entase 結帳流程來源的訊息，因此頁面上不相關的 postMessage 流量絕不會傳送到你的回呼函式。