ระบบการปล่อยเหตุการณ์ของเครื่องมือการจอง Plus

ภาพรวม

ระบบอีเวนต์เป็นฟีเจอร์ของเครื่องมือการจองที่ช่วยให้การสื่อสารกับบุคคลอื่นและโปรแกรมภายนอกเป็นไปได้ ซึ่งช่วยให้ผู้ใช้ได้รับการอัปเดตหรือทำงานบางอย่างโดยอัตโนมัติเมื่อใช้เครื่องมือการจอง โดยการเพิ่มคำสั่งเฉพาะในการตั้งค่า ระบบจะจัดการที่เหลือให้

บทความนี้เป็นแหล่งอ้างอิงสำหรับการเชื่อมต่อกับบุคคลที่สาม ช่วยให้คุณเชื่อมต่อและใช้ระบบอีเวนต์ได้อย่างมีประสิทธิภาพ

วิธีการใช้ระบบอีเวนต์อีมิตเตอร์

1. ไปที่หน้า การตั้งค่า ในเมนู บัญชี และคลิกที่ส่วน เครื่องมือการจอง
2. คลิกที่ ปรับแต่ง

3. เพิ่มโค้ดด้านล่างลงในฟิลด์ JavaScript
   ในการใช้ระบบอีเวนต์ คุณต้องเพิ่มตัวฟังอีเวนต์สำหรับอีเวนต์ on-booking-engine-ready ซึ่งจะเปิดเผย eventSystem ดังนี้:

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

4. คลิก บันทึก
   

5. ระบบ eventSystem ใช้งานฟังก์ชัน IExternalEventSystem:

   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;
   }

   โดยที่ EventType หมายถึงประเภทของอีเวนต์ที่เราสามารถกระตุ้นหรือฟังได้ และ PayloadOf<EventType> หมายถึงเพย์โหลดที่ถูกส่งมาพร้อมกับอีเวนต์

อีเวนต์ที่ถูกส่งโดยเครื่องมือการจอง

1.  currency-change อีเวนต์:

อีเวนต์นี้จะถูกกระตุ้นเมื่อผู้ใช้เปลี่ยนสกุลเงินของเครื่องมือการจองจากตัวเลือกสกุลเงินในส่วนหัว ค่า currency ใน payload คือคำย่อของสกุลเงินที่เลือก ซึ่งเหมือนกับที่ปรากฏในพารามิเตอร์ currency ของ URL

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

2. language-change อีเวนต์:

อีเวนต์นี้จะถูกกระตุ้นเมื่อผู้ใช้เปลี่ยนภาษาในเครื่องมือการจองจากตัวเลือกภาษาในส่วนหัว ค่า languageในเพย์โหลดคือคำย่อของภาษาที่เลือก ซึ่งเหมือนกับที่ปรากฏใน URL

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

3. reservation-created อีเวนต์:

อีเวนต์นี้จะถูกกระตุ้นเมื่อมีการสร้างการจองในเครื่องมือการจอง

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

เมื่อ CreatedReservation คือ:

interface CreatedReservation {
 booking_id?: `${number}`;
 booking_total?: number;
 checkin_date?: string;
 checkout_date?: string;
 city?: string;
 currency_code?: string;
 hotel_name?: string;
 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;
};

อีเวนต์ที่เครื่องมือการจองสมัครสมาชิก

•  custom-payment-option-change 

อีเวนต์นี้ใช้สำหรับที่พักที่ต้องการใช้ตัวเลือกการชำระเงินแบบกำหนดเองเพื่อเสนอให้กับลูกค้า

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