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.
Nhúng Wink
Section titled “Nhúng Wink”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.
- Bao gồm bảng định dạng của chúng tôi.
- Bao gồm Javascript của chúng tôi.
- Bao gồm trình tải ứng dụng của chúng tôi.
Bảng định dạng
Section titled “Bảng định dạng”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>
Javascript
Section titled “Javascript”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.
Thành phần
Section titled “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
Section titled “Trình tải ứng dụng”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
Section titled “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:
- cách trình bày
- nhận dạng
- loại
Thuộc tínhsort
chỉ có sẵn khi bố tríRANKED
và 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ưới Và bản đồ.
Tra cứu
Section titled “Tra cứu”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>
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.
Hành trình
Section titled “Hành trình”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>
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
Section titled “Tìm kiếm”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>
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.
Biểu mẫu hành trình
Section titled “Biểu mẫu hành trình”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>
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.
Tài khoản
Section titled “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>
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.
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.
Nhúng TripPay
Section titled “Nhúng TripPay”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.
- Bao gồm bảng định dạng của chúng tôi.
- Bao gồm Javascript của chúng tôi.
Bảng định dạng
Section titled “Bảng định dạng”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>
Javascript
Section titled “Javascript”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
Section titled “Thành phần”Sự chi trả
Section titled “Sự chi trả”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:
id
Mã đị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ỗ.