Cards

Thẻ đại diện cho một nhà cung cấp duy nhất (ví dụ: khách sạn hoặc nhà cung cấp trải nghiệm) hoặc hàng tồn kho (tức là loại phòng, phòng họp, spa, v.v.) và hiển thị thông tin chi tiết thông qua giao diện người dùng thẻ tương tác, có thể đặt trước. Người dùng có thể tương tác với thẻ theo những cách sau:

Nhấp vàoBook cái nút.
Nhấp vàoGalleryliên kết để xem tất cả hình ảnh và video về kho hàng này.
Nhấp chuộtBest dealliên kết, nếu có, để xem phòng có giá tốt nhất.
Nhấp chuộtHotel detailsliên kết, nếu có, để xem thông tin bất động sản.

Thẻ hỗ trợ nhiều mặt để giảm thiểu kích thước thẻ và phân loại dữ liệu; giúp người dùng dễ dàng sử dụng và tăng cơ hội chuyển đổi người dùng thành khách hàng đặt chỗ.

Một lá bài có hai hoặc ba mặt:

Thẻ khách sạn hiển thị dữ liệu về tài sản ở mặt trước và loại phòng tốt nhất ở mặt sau. Giá cả ở cả hai mặt đều hiển thị giá tốt nhất cho khách sạn.
Thẻ loại phòng hiển thị dữ liệu loại phòng ở mặt trước và dữ liệu bất động sản ở mặt sau. Giá hiển thị giá của loại phòng ở mặt trước và giá tốt nhất cho khách sạn ở mặt sau.
Tất cả các thẻ khác (ví dụ: nhà hàng spa, v.v.) có 3 mặt. Ví dụ: Dữ liệu Spa hiển thị trên trang đầu với giá tốt nhất của spa. Dữ liệu loại phòng cho phòng có giá tốt nhất nằm ở mặt thứ hai. Dữ liệu thuộc tính cùng với phòng có giá tốt nhất nằm ở mặt thẻ thứ ba.

Xem trước thẻ — *Thẻ loại phòng hướng ra phía trước có sẵn*

Trên đây là ví dụ về thẻ loại phòng của chúng tôi. Thẻ này chứa thông tin về tài sản, đánh giá và phòng cùng với chính sách hủy và bữa ăn.

Phần còn lại của bài viết này sẽ hướng dẫn bạn cách tạo, tùy chỉnh và hiển thị thẻ cho người dùng.

Tạo một thẻ

Phía trên là hình ảnh được chụp từTìm kiếmvà cho bạn thấy một số điều bạn có thể làm với kết quả tìm kiếm của mình. Một trong những hành động đó làMake a card. Nhấp vào nút đó và bạn sẽ được chuyển hướng đến trang mẫu thẻ của chúng tôi, nơi bạn có thể bắt đầu tùy chỉnh thẻ của mình.

Tùy chỉnh thẻ

Biểu mẫu này cho phép bạn tùy chỉnh thẻ của mình theo những cách sau:

Đặt tên cho thẻ để bạn nhớ nội dung của thẻ.
Chọn Tùy chỉnh bạn muốn đăng ký thẻ này.
Chọn mặt thẻ ban đầu mà bạn muốn người dùng nhìn thấy đầu tiên. Theo mặc định, đó là mặt gốc của kho đó.
Chọn badge bạn muốn sử dụng trên thẻ. Huy hiệu cho phép người dùng so sánh hàng tồn kho trên một số liệu tổng hợp như eco-friendly.
Thêm các từ khóa, được phân tách bằng dấu phẩy, sẽ được sử dụng bởi Trình thu thập dữ liệu web.
Thêm tiêu đề và mô tả bằng ngôn ngữ bạn muốn người dùng nhìn thấy.
Chọn một hoặc nhiều hình ảnh sẽ hiển thị khi người dùng nhấp vào Gallery liên kết.
Nhấp vào Save nút để tiếp tục.

Sau khi lưu thẻ, bạn sẽ được chuyển hướng đến trang thẻ của mình và thẻ của bạn đã sẵn sàng để chia sẻ với mọi người.

Chia sẻ thẻ

Phía trên hiển thị cho bạn hình ảnh với tất cả các hành động có sẵn cho thẻ của bạn:

Cập nhậtCập nhật cấu hình thẻ của bạn.
Thêm vào WinkLinksThêm thẻ vào tài khoản WinkLinks của bạn.
NhúngHiển thị cho bạn cách nhúng thẻ này dưới dạngThẻvào trang web của bạn.
Sử dụng với WordPressHiển thị cho bạn cách sử dụng của chúng tôiTiện ích bổ sung WordPressđể nhúng thẻ này vào trang web của bạn.

Chúng tôi sẽ trình bày chi tiết hơn về một số tùy chọn này ở phần bên dưới.

Nhúng

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>

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

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

Sau đây là cách nhúng thẻ vào trang web của bạn:

Dòng 3 cho bạn biết cách nhúng kiểu Wink vào trang web của bạn.
Dòng 6 đến 9 cho bạn thấy cách sử dụngnháy mắt-nội dung-loaderThành phần Web và yêu cầu nó lấy thẻ phòng khách cho mã của bạn.
Dòng 11 hướng dẫn bạn cách nhúng Javascript vào trang web của bạn.
Dòng 13 cho bạn thấy cách nhúngwink-app-loaderThành phần Web và yêu cầu nó lấy tùy chọn cấu hình cấp trang của bạn.

Giao diện lập trình ứng dụng (API)

Các nhà phát triển muốn quản lý thẻ có thể chuyển đếnNhà phát triển > API > Hàng tồn kho.

Đọc thêm

Tìm hiểu thêm về bộ sưu tập của chúng tôiThành phần Web.
Tìm hiểu thêm vềTiện ích mở rộng Wink WordPress.