คอมโพเนนต์เว็บ

Web Components คือมาตรฐานที่ช่วยให้คุณผสานรวมฟีเจอร์ JavaScript ทั้งหมดลงในเว็บไซต์ของคุณโดยไม่ต้องรู้วิธีเขียนโค้ด ด้วยเทคโนโลยีเจ๋งๆ นี้ มันช่วยให้คุณฝังสินค้าคงคลังการเดินทางของ Wink ได้อย่างง่ายดาย บทความนี้จะแนะนำคุณผ่านคอลเลกชันของคอมโพเนนต์เว็บของเราและแสดงวิธีการใช้งาน

ฝัง Wink

มีสามสิ่งที่คุณต้องรวมไว้ในหน้าใดๆ ที่คุณต้องการแสดงหนึ่งในคอมโพเนนต์เว็บของเรา

รวมสไตล์ชีตของเรา
รวม Javascript ของเรา
รวมตัวโหลดแอปพลิเคชันของเรา

สไตล์ชีต

รวมสไตล์ CSS ของเราในส่วนหัวของเอกสารของคุณ

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

รวม Javascript ของเราที่ด้านล่างของเอกสารของคุณ (เราแนะนำให้วางไว้เหนือแท็กปิด body ทันที)

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

ตอนนี้เว็บไซต์ของคุณพร้อมและสามารถแสดงคอมโพเนนต์เว็บของเราได้แล้ว

คอมโพเนนต์

อ่านเกี่ยวกับห้องสมุดคอมโพเนนต์ของเราด้านล่าง

ตัวโหลดแอปพลิเคชัน

ตัวโหลดมีหน้าที่เก็บสถานะและจัดการการโต้ตอบระหว่างคอมโพเนนต์ของเรา (รวมไว้ใต้ Javascript ของเรา)

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

ตัวโหลดเนื้อหา

ตัวโหลดเนื้อหาเป็นหัวใจของห้องสมุดคอมโพเนนต์เว็บของเรา มีหน้าที่แสดงสินค้าคงคลังของคุณ (การ์ด, กริด, แผนที่)

แอตทริบิวต์ที่ใช้ได้:

layout
id
sort

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

ประเภท layout ที่ใช้ได้:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

ประเภท sort ที่ใช้ได้:

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

ตัวอย่างสามารถพบได้สำหรับ การ์ด, กริด และ แผนที่

การค้นหา

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Lookup web component — *คอมโพเนนต์เว็บการค้นหา*

การคลิกที่คอมโพเนนต์ด้านบนจะเปิดโมดัลที่ให้คุณพิมพ์จุดหมายปลายทางหรือโรงแรมที่คุณกำลังค้นหา

Lookup modal — *โมดัลการค้นหาพร้อมผลลัพธ์*

แผนการเดินทาง

ปุ่มแผนการเดินทางจะแสดงแผนการเดินทางปัจจุบันบนปุ่ม เมื่อคุณคลิก มันจะแสดงตัวเลือกแผนการเดินทางเต็มรูปแบบในรูปแบบโมดัล

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

คอมโพเนนต์เว็บแผนการเดินทาง

การคลิกที่ปุ่มด้านบนจะเปิดโมดัลที่ให้คุณอัปเดตแผนการเดินทางของคุณ

Search modal — *ตัวเลือกแผนการเดินทางในรูปแบบโมดัล*

การค้นหา

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Search web component — *คอมโพเนนต์เว็บการค้นหา*

การคลิกที่ปุ่มด้านบนจะเปิดโมดัลที่ให้คุณอัปเดตแผนการเดินทางของคุณ

แบบฟอร์มแผนการเดินทาง

คอมโพเนนต์แผนการเดินทางจะแสดงแบบฟอร์มแผนการเดินทางที่ผู้ใช้สามารถโต้ตอบได้

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *คอมโพเนนต์เว็บแบบฟอร์มแผนการเดินทาง*

การเปลี่ยนแปลงแผนการเดินทางในคอมโพเนนต์แผนการเดินทางใดๆ ของเรา จะกระตุ้นเหตุการณ์อัปเดตแผนการเดินทางไปยังสินค้าคงคลังที่คุณแสดงอยู่บนหน้า

บัญชีผู้ใช้

ปุ่มบัญชีผู้ใช้ช่วยให้คุณเพิ่มการยืนยันตัวตนของ Wink ลงในเว็บไซต์ของคุณ

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *คอมโพเนนต์เว็บปุ่มบัญชีผู้ใช้*

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

เมื่อคุณคลิกที่ปุ่ม จะเปิดเมนูแบบเลื่อนลงเฉพาะผู้ใช้

ฝัง TripPay

มีสองสิ่งที่คุณต้องรวมไว้ในหน้าใดๆ ที่คุณต้องการใช้คอมโพเนนต์เว็บการชำระเงิน TripPay

รวมสไตล์ชีตของเรา
รวม Javascript ของเรา

สไตล์ชีต

รวมสไตล์ CSS ของเราในส่วนหัวของเอกสารของคุณ

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

ตอนนี้เว็บไซต์ของคุณพร้อมและสามารถแสดงคอมโพเนนต์เว็บของเราได้แล้ว

คอมโพเนนต์

การชำระเงิน

คอมโพเนนต์การชำระเงินช่วยให้คุณแจ้ง TripPay ว่านักเดินทางต้องการซื้ออะไรและกฎเกณฑ์และราคาสำหรับรายการเหล่านั้น

มีแอตทริบิวต์ที่จำเป็นสำหรับวิดเจ็ต:

id ตัวระบุของสัญญาการจองที่คุณต้องการดำเนินการ

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

วิดเจ็ตจะเตรียมสัญญาสำหรับการดำเนินการและแสดงรายละเอียดการชำระเงิน (รูปที่ 1) ให้ผู้ใช้เพื่อสรุปการจอง

Payment details — *รูปที่ 1. ตัวอย่างแบบฟอร์มการชำระเงิน*

ข้อผิดพลาด

หากคุณได้รับข้อความแสดงข้อผิดพลาดเมื่อฝังคอมโพเนนต์เว็บของเรา ไม่ว่าจะบน WinkLinks หรือบนเว็บไซต์ของคุณเอง อาจมีบางสิ่งที่ผิดพลาด:

ความพร้อมใช้งาน

สินค้าคงคลังอาจไม่พร้อมใช้งานอีกต่อไป ไปที่ Wink Studio และตรวจสอบสถานะของ “การ์ด” ว่าพร้อมใช้งานหรือไม่ ถ้าไม่พร้อมใช้งาน จะปรากฏเป็นสีแดง ในกรณีนั้น คุณสามารถรอและอาจซัพพลายเออร์จะทำให้พร้อมใช้งานอีกครั้ง หรือเอาออกจากรายการของคุณ

ถูกลบ

สินค้าคงคลังอาจถูกลบไปแล้ว ไปที่ Wink Studio และตรวจสอบสถานะของ “การ์ด” ว่าพร้อมใช้งานหรือไม่ ถ้าไม่พร้อมใช้งาน จะปรากฏเป็นสีแดง ในกรณีนั้น คุณสามารถรอและอาจซัพพลายเออร์จะทำให้พร้อมใช้งานอีกครั้ง หรือเอาออกจากรายการของคุณ

การปรับแต่ง

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

แอปพลิเคชัน

สำหรับนักพัฒนาเว็บเท่านั้น หากคุณเผลอลบ แอปพลิเคชัน ทำให้ client ID ไม่พร้อมใช้งานอีกต่อไป โปรดสร้างแอปพลิเคชันใหม่และใช้ client ID ใหม่เพื่อฝังคอมโพเนนต์เว็บของเรา