Skip to content
Academy

ส่วนประกอบของเว็บไซต์

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

ฝัง Wink

Section titled “ฝัง Wink”

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

  1. รวมสไตล์ชีทของเรา
  2. รวมถึง Javascript ของเรา
  3. รวมตัวโหลดแอปพลิเคชันของเรา

สไตล์ชีท

Section titled “สไตล์ชีท”

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

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

จาวาสคริปต์

Section titled “จาวาสคริปต์”

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

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

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

ส่วนประกอบ

Section titled “ส่วนประกอบ”

อ่านเกี่ยวกับไลบรารีส่วนประกอบของเราด้านล่าง

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

Section titled “ตัวโหลดแอพพลิเคชั่น”

โหลดเดอร์มีหน้าที่รับผิดชอบในการรักษาสถานะและจัดการการโต้ตอบระหว่างส่วนประกอบต่างๆ ของเรารวมไว้ด้านล่าง 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>

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

Section titled “ตัวโหลดเนื้อหา”

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

คุณสมบัติที่มี:

  • เค้าโครง
  • รหัส
  • เรียงลำดับ

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

ประเภทเค้าโครงที่มีให้เลือก:

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

ประเภทการเรียงลำดับที่มีให้เลือก:

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

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

ค้นหา

Section titled “ค้นหา”

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
ค้นหาส่วนประกอบเว็บไซต์
ค้นหาส่วนประกอบเว็บไซต์

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

ค้นหาโมดอล
โหมดค้นหาพร้อมผลลัพธ์

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

Section titled “แผนการเดินทาง”

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
ส่วนประกอบเว็บแผนการเดินทาง
ส่วนประกอบเว็บแผนการเดินทาง

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

ค้นหาโหมด
ตัวเลือกการเดินทางในรูปแบบโมดอล

ค้นหา

Section titled “ค้นหา”

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
ค้นหาส่วนประกอบเว็บไซต์
ค้นหาส่วนประกอบเว็บไซต์

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

ค้นหาโหมด
ตัวเลือกการเดินทางในรูปแบบโมดอล

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

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

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
ส่วนประกอบแบบฟอร์มแผนการเดินทาง
ส่วนประกอบเว็บแบบฟอร์มแผนการเดินทาง

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

บัญชี

Section titled “บัญชี”

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
ส่วนประกอบเว็บบัญชี
ส่วนประกอบเว็บปุ่มบัญชี

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

ปุ่มบัญชีเมื่อผ่านการตรวจสอบแล้ว
ปุ่มบัญชี (ผ่านการตรวจสอบยืนยัน) ส่วนประกอบเว็บ

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

ปุ่มบัญชีเมื่อผ่านการตรวจสอบแล้ว
ปุ่มบัญชี (เปิด) ส่วนประกอบเว็บ

ฝัง TripPay

Section titled “ฝัง TripPay”

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

  1. รวมสไตล์ชีทของเรา
  2. รวมถึง Javascript ของเรา

สไตล์ชีท

Section titled “สไตล์ชีท”

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

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

จาวาสคริปต์

Section titled “จาวาสคริปต์”

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

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

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

ส่วนประกอบ

Section titled “ส่วนประกอบ”

การชำระเงิน

Section titled “การชำระเงิน”

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

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

  • idตัวระบุของสัญญาการจองที่คุณต้องการให้ดำเนินการ
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

:::หมายเหตุ เพื่อเรียนรู้วิธีการสร้างสัญญาการจองidอ่านคำแนะนำ:การบูรณาการกับ TripPay-

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

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