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

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

ฝัง Wink

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

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

Stylesheet

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

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

ตัวอย่างสามารถดูได้ที่ cards, grids และ maps

Lookup

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

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

Lookup web component — *คอมโพเนนต์เว็บ Lookup*

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

Lookup modal — *โมดัล Lookup พร้อมผลลัพธ์*

Itinerary

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

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

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

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

Search

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

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

Search web component — *คอมโพเนนต์เว็บ Search*

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

Itinerary form

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

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

Itinerary formweb component — *คอมโพเนนต์เว็บแบบฟอร์ม Itinerary*

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

Account

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

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

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

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

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

ฝัง TripPay

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

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

Stylesheet

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

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

Javascript

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

<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 และตรวจสอบสถานะของ “การ์ด” ว่าพร้อมใช้งานหรือไม่ ถ้าไม่พร้อมใช้งาน จะปรากฏเป็นสีแดง ในกรณีนั้น คุณสามารถรอและอาจซัพพลายเออร์จะทำให้พร้อมใช้งานอีกครั้ง หรือเอาออกจากรายการของคุณ

การปรับแต่ง

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

แอปพลิเคชัน

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