Bỏ qua nội dung

Thành phần Web

Thành phần Weblà một tiêu chuẩn cho phép bạn tích hợp toàn bộ các tính năng Javascript vào trang web của mình mà không cần biết cách viết mã. Nhờ công nghệ tuyệt vời này, bạn có thể nhúng Wink travel inventory mà không cần phải lo lắng nhiều. Bài viết này hướng dẫn bạn qua bộ sưu tập các thành phần web của chúng tôi và chỉ cho bạn cách sử dụng chúng.

Có ba thứ bạn phải đưa vào bất kỳ trang nào mà bạn muốn hiển thị một trong các thành phần web của chúng tôi.

  1. Bao gồm bảng định dạng của chúng tôi.
  2. Bao gồm Javascript của chúng tôi.
  3. Bao gồm trình tải ứng dụng của chúng tôi.

Thêm các kiểu CSS của chúng tôi vào phần đầu tài liệu của bạn.

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

Thêm Javascript của chúng tôi vào cuối tài liệu của bạn. (Chúng tôi khuyên bạn nên đặt ngay phía trên thẻ body cuối).

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

Trang web của bạn hiện đã sẵn sàng và có thể hiển thị các thành phần web của chúng tôi.

Đọc về thư viện thành phần của chúng tôi bên dưới.

Bộ tải có trách nhiệm duy trì trạng thái và quản lý tương tác giữa các thành phần của chúng ta. (Bao gồm nó bên dưới Javascript của chúng tôi).

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

Trình tải nội dung là trung tâm của thư viện thành phần web của chúng tôi. Nó chịu trách nhiệm hiển thị kho của bạn (thẻ, lưới, bản đồ).

Các thuộc tính có sẵn:

  • cách trình bày
  • nhận dạng
  • loại

Thuộc tínhsortchỉ có sẵn khi bố tríRANKEDvà bạn không muốn sử dụng lưới xếp hạng hiện có. Đối với những trường hợp này, hãy đểid trống.

Các kiểu bố cục có sẵn:

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

Các loại sắp xếp có sẵn:

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

Các mẫu có thể được tìm thấy chothẻ,lướibản đồ.

Lookup hoạt động tốt cùng với một trong các lưới được xếp hạng của bạn. Nó cho phép người dùng của bạn tìm kiếm khách sạn và điểm đến và lưới cập nhật theo kết quả tìm kiếm của họ.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Tra cứu thành phần web
Tra cứu thành phần web

Nhấp vào thành phần ở trên sẽ mở ra hộp thoại cho phép bạn nhập điểm đến hoặc khách sạn mà bạn đang tìm kiếm.

Tra cứu mô hình
Tra cứu modal với kết quả

Nút hành trình hiển thị hành trình hiện tại trên nút. Khi bạn nhấp vào nút đó, trình chọn hành trình đầy đủ sẽ hiển thị dưới dạng hộp thoại.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Thành phần web hành trình
Thành phần web hành trình

Nhấp vào nút bên trên sẽ mở ra hộp thoại cho phép bạn cập nhật hành trình của mình.

Tìm kiếm theo phương thức
Bộ chọn hành trình như modal

Tìm kiếm là nút chỉ có biểu tượng của trình chọn hành trình. Khi bạn nhấp vào nút này, trình chọn hành trình đầy đủ sẽ hiển thị dưới dạng hộp thoại.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Tìm kiếm thành phần web
Tìm kiếm thành phần web

Nhấp vào nút bên trên sẽ mở ra hộp thoại cho phép bạn cập nhật hành trình của mình.

Tìm kiếm theo phương thức
Bộ chọn hành trình như modal

Thành phần hành trình hiển thị biểu mẫu hành trình mà người dùng có thể tương tác.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
Thành phần formweb hành trình
Thành phần web biểu mẫu hành trình

Bằng cách thay đổi hành trình trong bất kỳ thành phần hành trình nào, sự kiện cập nhật hành trình sẽ được kích hoạt cho bất kỳ hàng tồn kho nào hiện đang hiển thị trên trang.

Nút tài khoản cho phép bạn thêm xác thực Wink vào trang web của mình.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Thành phần web tài khoản
Thành phần web nút tài khoản

Nhấp vào nút, khi người dùng chưa được xác thực, sẽ chuyển tiếp người dùng để được xác thực. Khi người dùng được xác thực, nó sẽ hiển thị biểu tượng hồ sơ của người dùng.

Nút tài khoản khi đã xác thực
Nút tài khoản (đã xác thực) thành phần web

Khi bạn nhấp vào nút, nó sẽ mở ra danh sách thả xuống dành riêng cho người dùng.

Nút tài khoản khi đã xác thực
Nút tài khoản (mở) thành phần web

Có hai điều bạn phải đưa vào bất kỳ trang nào mà bạn muốn sử dụng thành phần thanh toán TripPay.

  1. Bao gồm bảng định dạng của chúng tôi.
  2. Bao gồm Javascript của chúng tôi.

Thêm các kiểu CSS của chúng tôi vào phần đầu tài liệu của bạn.

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

Thêm Javascript của chúng tôi vào cuối tài liệu của bạn. (Chúng tôi khuyên bạn nên đặt ngay phía trên thẻ body cuối).

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

Trang web của bạn hiện đã sẵn sàng và có thể hiển thị các thành phần web của chúng tôi.

Thành phần thanh toán cho phép bạn thông báo cho TripPay rằng du khách muốn mua thứ gì đó cũng như các quy tắc và giá cả cho những mặt hàng đó.

Có một thuộc tính bắt buộc đối với tiện ích:

  • idMã định danh của hợp đồng đặt phòng mà bạn muốn thực hiện.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

:::lưu ý Để tìm hiểu cách tạo hợp đồng đặt phòngid, đọc hướng dẫn:Tích hợp với TripPay. :::

Tiện ích chuẩn bị hợp đồng để thực hiện và hiển thị thông tin chi tiết về thanh toán(Hình 1)cho người dùng để hoàn tất việc đặt chỗ.

Chi tiết thanh toán
Hình 1. Mẫu biểu thanh toán