Callbacks

Questa pagina descrive come può utilizzare i callback in BookingJs per reagire a eventi di prenotazione come prenotazioni riuscite o cancellazioni.

Panoramica

Con i callback può eseguire codice personalizzato quando si verificano determinati eventi nel widget. Ciò è utile per l'analytics, i redirect o l'integrazione con altri sistemi.

Callback relativi alle prenotazioni

Callback	Descrizione
`openedBookingPage`	La pagina di prenotazione è stata aperta
`closedBookingPage`	La pagina di prenotazione è stata chiusa
`createBookingStarted`	Il processo di prenotazione è stato avviato
`createBookingSuccessful`	La prenotazione è andata a buon fine
`createBookingFailed`	La prenotazione non è riuscita

Parametri

Tutti i callback relativi alle prenotazioni ricevono un oggetto con:

Parametri del callback

{
  timeslot: {
    start: DateTime,           // Luxon DateTime
    end: DateTime,
    timeslot_uuid: string,     // UUID dell'appuntamento
    product_uuid: string,      // UUID del prodotto
    product_name: string,
    resource_name: string,
    capacity: number,
    capacity_left: number,
    kind: 'models.Bookable' | 'models.LotAppointment',
    untouchedStart: string,    // Stringa ISO
    untouchedEnd: string
  },
  data: {
    firstName: string,
    lastName: string,
    email: string,
    agbs: boolean,
    // + campi personalizzati
  },
  response?: RTKQResponse       // Solo per Successful/Failed
}

Esempio

Callback di prenotazione

timum.init({
  ref: 'ihre-ressourcen-referenz',
  callbacks: {
    createBookingSuccessful: ({ timeslot, data, response }) => {
      // Evento analytics
      gtag('event', 'booking_complete', {
        resource: timeslot.resource_name,
        product: timeslot.product_name,
        customer_email: data.email
      });

      // Opzionale: redirect
      // window.location.href = '/danke?booking=' + timeslot.timeslot_uuid;
    },
    createBookingFailed: ({ timeslot, data, response }) => {
      console.error('Buchung fehlgeschlagen:', response);
    }
  }
});

Callback relativi alle cancellazioni

Callback	Descrizione
`openedCancelPage`	La pagina di cancellazione è stata aperta
`closedCancelPage`	La pagina di cancellazione è stata chiusa
`cancelationStarted`	Il processo di cancellazione è stato avviato
`cancelationSuccessful`	La cancellazione è andata a buon fine
`cancelationFailed`	La cancellazione non è riuscita

Callback relativi alle finestre di dialogo

Callback	Descrizione
`openedProductSelection`	Selezione del prodotto aperta
`closedProductSelection`	Selezione del prodotto chiusa
`openedResourceSelection`	Selezione della risorsa aperta
`closedResourceSelection`	Selezione della risorsa chiusa
`openedConfirmationPage`	Pagina di conferma aperta
`closedConfirmationPage`	Pagina di conferma chiusa

Nota:

I callback relativi alle finestre di dialogo non ricevono alcun parametro.

Callback relativi ai dati

Callback	Parametri
`fetchingPublicDataSucceeded`	contact, resource, provider, channel
`fetchingPublicDataFailed`	error
`fetchingProductsSucceeded`	products[]
`fetchingProductsFailed`	error
`fetchingBookablesSucceeded`	bookables (raggruppati per data)
`fetchingBookablesFailed`	error

Esempio: Nessun appuntamento disponibile

Gestione degli appuntamenti vuoti

timum.init({
  ref: 'ihre-ressourcen-referenz',
  callbacks: {
    fetchingBookablesSucceeded: ({ bookables }) => {
      const hasAppointments = Object.keys(bookables).length > 0;

      if (!hasAppointments) {
        // Nascondere il widget
        document.getElementById('bookingjs').style.display = 'none';
        // Mostrare l'alternativa
        document.getElementById('no-appointments').style.display = 'block';
      }
    }
  }
});

postMessage per iframe

Per l'integrazione tramite iframe, può utilizzare postMessageTarget per inviare eventi alla pagina padre:

iframe postMessage

// Nell'iframe
timum.init({
  ref: 'ihre-ressourcen-referenz',
  postMessageTarget: 'https://ihre-website.de'
});

// Nella pagina padre
window.addEventListener('message', (event) => {
  if (event.data.origin === 'bookingjs') {
    console.log('Event:', event.data.type);
    // event.data.type corrisponde al nome del callback
    // ad es. 'createBookingSuccessful'
  }
});

Importante:

postMessageTarget sovrascrive i callback normali. Tutti gli eventi vengono invece inviati tramite postMessage.