Buchungsmaschine Plus Ereignis-Emitter-System

Einführung

Das Event-System ermöglicht es der Buchungsmaschine, mit benutzerdefinierten Skripten und externen Programmen zu kommunizieren, indem unterstützte Ereignisse mit Payload-Daten ausgelöst werden. Verwenden Sie es, um Updates der Buchungsmaschine zu empfangen und benutzerdefinierte Aktionen aus JavaScript auszulösen, das in den Einstellungen der Buchungsmaschine hinzugefügt wurde.

Dieser Artikel erklärt, wie Sie das eventSystem initialisieren, unterstützte Ereignisse referenzieren und die für diese Ereignisse verfügbaren Payload-Daten verwenden.

Inhaltsverzeichnis

• So verwenden Sie das Event-Emitter-System
• Vom Buchungsmaschine ausgelöste Ereignisse
• Ereignisse, auf die die Buchungsmaschine reagiert

So verwenden Sie das Event-Emitter-System

1. Gehen Sie zur Seite Einstellungen im Menü Konto und klicken Sie auf den Abschnitt Buchungsmaschine
2. Klicken Sie auf Anpassen

3. Fügen Sie den folgenden Code in das Feld JavaScript ein
   Um das Event-System zu verwenden, müssen Sie einen Event-Listener für das Ereignis on-booking-engine-ready hinzufügen, das das eventSystem wie folgt bereitstellt:

   <script>
    window.addEventListener('on-booking-engine-ready', (e) => {
      const { eventSystem } = e.detail;
    });
   </script>

4. Klicken Sie auf Speichern

   

5. Das eventSystem implementiert die IExternalEventSystem-Schnittstelle:

   interface IExternalEventSystem {
    addEventListener: (
      event: EventType,
      listener: (payload: PayloadOf<EventType>) => void
    ) => void;
    dispatchEvent: (event: EventType, payload: PayloadOf<EventType>) => void;
    removeEventListener: (
      event: EventType,
      listener: (payload: PayloadOf<EventType>) => void
    ) => void;
   }

   Wobei EventType den Typ der Ereignisse bezeichnet, die wir auslösen oder abhören können, und PayloadOf<EventType> bezeichnet die Nutzlast, die mit dem Ereignis gesendet wird.

Vom Buchungsmaschine ausgelöste Ereignisse

1.  currency-change Ereignis:

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Währung der Buchungsmaschine über den Währungsauswahl im Kopfzeile geändert hat. Der currency-Wert im payload ist die Abkürzung der ausgewählten Währung, wie sie auch im currency-Abfrageparameter der URL erscheint.

export type CurrencyChangeEvent = {
 event: 'currency-change';
 payload: { currency: Currency };
};

2. language-change Ereignis:

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Sprache der Buchungsmaschine über den Sprachauswahl im Kopfzeile geändert hat. Der language-Wert im Payload ist die Abkürzung der ausgewählten Sprache, wie sie auch in der URL erscheint.

type LanguageChangeEvent = {
 event: 'language-change';
 payload: { language: Language };
};

3. reservation-created Ereignis:

Dieses Ereignis wird ausgelöst, wenn eine Reservierung in der Buchungsmaschine erstellt wurde.

type ReservationCreatedEvent = {
  event: 'reservation-created';
  payload: CreatedReservation;
};

Wenn CreatedReservation ist:

interface CreatedReservation {
  booking_id?: `${number}`;
  booking_total?: number;
  checkin_date?: string;
  checkout_date?: string;
  city?: string;
  currency_code?: string;
  custom_payment_method?: string;
  hotel_name?: string;
  nights?: number;
  payment_method?: PAYMENT_METHOD;
  real_booking_total?: number;
  resRooms?: {
    adults: `${number}`;
    id: `${number}`;
    kids: `${number}`;
    package: `${number}`;
    package_name: string | null;
    rate_id: `${number}`;
    room_total: `${number}`;
    room_type_id: `${number}`;
    room_type_name: string;
    room_type_photos: ({
      TYPE?: string;
      alt: string;
      cropParam: string | null;
      croppedImage: string;
      fullPath: string;
      galleryPath?: string | null;
      id: string;
      imageHeight: string;
      imageWidth: string;
      mime?: string;
      originalName: string;
      ownerId?: string;
      ownerType?: string;
      parentId: string;
      path: string;
      section?: string;
      size?: string;
      thumbPath: string;
      uploadedAt?: string;
      utype?: string;
    } & {
      featured: number;
      featuredPath: string | null;
    })[];
  }[];
  rooms?: Record<string, {
    adults: number;
    amount: number;
    bookedId: string[];
    kids: number;
    name: string;
    packageId?: string;
    packageName?: string;
    picture?: string;
    price?: number;
    rateId: string;
    roomId: string;
    unit?: string;
  }>;
  state?: string;
  total_tax?: number;
  widget_property?: number;
}

Ereignisse, auf die die Buchungsmaschine reagiert

•  custom-payment-option-change 

Dieses Ereignis wird für Unterkünfte verwendet, die eine benutzerdefinierte Zahlungsoption anbieten möchten.

type CustomPaymentOptionChangeEvent = {
 event: 'custom-payment-option-change';
 payload: {
   id: string;
   instructions?: string;
   name: string;
 };
};

Nächster operativer Schritt

Nachdem Sie nun verstanden haben, wie das Ereignissystem konfiguriert und referenziert wird, fahren Sie fort mit Hinzufügen von Drittanbieter-Zahlungsgateways und Geschenkkarten zur Buchungsmaschine für ein praktisches Beispiel mit benutzerdefinierten Zahlungsoptionen.