Bỏ qua để đến nội dung
Academy

Thành phần Web

Thành phần Web là 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 lập trình. Nhờ công nghệ tuyệt vời này, bạn có thể nhúng kho du lịch Wink một cách rất dễ dàng. Bài viết này sẽ 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à cách sử dụng chúng.

Nhúng Wink

Phần tiêu đề “Nhúng Wink”

Có ba thứ bạn phải bao gồm vào bất kỳ trang nào 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 stylesheet 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.

Stylesheet

Phần tiêu đề “Stylesheet”

Bao gồm các kiểu CSS của chúng tôi trong phần head của tài liệu.

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

Javascript

Phần tiêu đề “Javascript”

Bao gồm Javascript của chúng tôi ở cuối tài liệu. (Chúng tôi khuyên bạn nên đặt ngay trên thẻ kết thúc </body>).

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

Trang web của bạn bây giờ đã 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

Phần tiêu đề “Thành phần”

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

Trình tải ứng dụng

Phần tiêu đề “Trình tải ứng dụng”

Trình tải chịu trách nhiệm giữ trạng thái và quản lý tương tác giữa các thành phần của chúng tôi. (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

Phần tiêu đề “Trình tải nội dung”

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:

  • layout
  • id
  • sort

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

Các loại layout 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 sort 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>

Bạn có thể tìm thấy các mẫu cho thẻ, lưới và bản đồ.

Tra cứu

Phần tiêu đề “Tra cứu”

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
Thành phần web Lookup

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

Lookup modal
Modal Lookup với kết quả

Lịch trình

Phần tiêu đề “Lịch trình”

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Thành phần web Lịch trình

Nhấp vào nút trên sẽ mở một modal cho phép bạn cập nhật lịch trình của mình.

Search modal
Bộ chọn lịch trình dưới dạng modal

Tìm kiếm

Phần tiêu đề “Tìm kiếm”

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

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

Nhấp vào nút trên sẽ mở một modal cho phép bạn cập nhật lịch trình của mình.

Search modal
Bộ chọn lịch trình dưới dạng modal

Biểu mẫu lịch trình

Phần tiêu đề “Biểu mẫu lịch trình”

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

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

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

Tài khoản

Phần tiêu đề “Tài khoản”

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>
Account web component
Thành phần web nút Tài khoản

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

Account button when authenticated
Thành phần web nút Tài khoản (đã xác thực)

Khi bạn nhấp vào nút, nó sẽ mở dropdown dành riêng cho người dùng.

Account button when authenticated
Thành phần web nút Tài khoản (mở)

Nhúng TripPay

Phần tiêu đề “Nhúng TripPay”

Có hai thứ bạn phải bao gồm vào bất kỳ trang nào bạn muốn sử dụng thành phần web thanh toán TripPay.

  1. Bao gồm stylesheet của chúng tôi.
  2. Bao gồm Javascript của chúng tôi.

Stylesheet

Phần tiêu đề “Stylesheet”

Bao gồm các kiểu CSS của chúng tôi trong phần head của tài liệu.

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

Javascript

Phần tiêu đề “Javascript”

Bao gồm Javascript của chúng tôi ở cuối tài liệu. (Chúng tôi khuyên bạn nên đặt ngay trên thẻ kết thúc <body>).

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

Trang web của bạn bây giờ đã 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

Phần tiêu đề “Thành phần”

Thanh toán

Phần tiêu đề “Thanh toán”

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

Có một thuộc tính bắt buộc cho widget:

  • id Mã định danh của hợp đồng đặt chỗ bạn muốn thực thi.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

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

Payment details
Hình 1. Mẫu biểu mẫu thanh toán

Lỗi

Phần tiêu đề “Lỗi”

Nếu bạn nhận được thông báo lỗi khi nhúng một trong các thành phần web của chúng tôi, dù trên WinkLinks hay trên trang web của riêng bạn, có một vài điều có thể đã xảy ra sai:

Tình trạng sẵn có

Phần tiêu đề “Tình trạng sẵn có”

Kho có thể không còn sẵn có nữa. Hãy vào Wink Studio và kiểm tra xem trạng thái của “thẻ” có còn sẵn không. Nếu không, nó sẽ hiển thị màu đỏ. Trong trường hợp đó, bạn có thể chờ đợi và có thể nhà cung cấp sẽ làm cho nó sẵn có trở lại hoặc loại bỏ nó khỏi danh sách của bạn.

Đã bị xóa

Phần tiêu đề “Đã bị xóa”

Kho có thể đã bị xóa. Hãy vào Wink Studio và kiểm tra xem trạng thái của “thẻ” có còn sẵn không. Nếu không, nó sẽ hiển thị màu đỏ. Trong trường hợp đó, bạn có thể chờ đợi và có thể nhà cung cấp sẽ làm cho nó sẵn có trở lại hoặc loại bỏ nó khỏi danh sách của bạn.

Tùy chỉnh

Phần tiêu đề “Tùy chỉnh”

Bạn có thể đã vô tình xóa tùy chỉnh mà bạn đã định nghĩa để đi kèm với kho của mình. Hãy đảm bảo tùy chỉnh vẫn còn sẵn và đặt một tùy chỉnh mới nếu thiếu.

Ứng dụng

Phần tiêu đề “Ứng dụng”

Phần này dành cho các nhà phát triển web. Nếu bạn vô tình xóa Ứng dụng; khiến client ID không còn sẵn, vui lòng tạo một ứng dụng mới và sử dụng client ID mới để nhúng các Thành phần Web của chúng tôi.