Lưới

Một lưới đại diện cho một danh sách nhà cung cấp và kho hàng, đồng thời hiển thị chi tiết qua giao diện lưới tương tác có thể đặt chỗ. Lưới hỗ trợ hiển thị bất kỳ kho hàng nào từ danh sách được tuyển chọn hoặc tìm kiếm đã lưu của bạn. Người dùng tương tác với lưới giống như cách họ tương tác với một thẻ riêng lẻ với một tính năng bổ sung:

Phân trang qua lưới bằng cách nhấn nút Hiển thị thêm (khi còn nhiều mục hơn).

Xem trước lưới — *Lưới hiển thị nhiều loại phòng*

Trên là ví dụ về lưới của chúng tôi hiển thị danh sách các thẻ loại phòng.

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ị lưới cho người dùng của bạn.

Các loại lưới

Có ba loại lưới:

Lưới dựa trên danh sách được tuyển chọn.
Lưới dựa trên tìm kiếm đã lưu.
Lưới dựa trên vị trí và tiêu chí sắp xếp (tức là Lưới xếp hạng).

Lưới danh sách được tuyển chọn

Đây là lưới sử dụng kho hàng bạn đã thu thập trong một trong các danh sách được tuyển chọn của bạn và chuyển đổi danh sách đó thành kho du lịch có thể đặt chỗ mà bạn có thể hiển thị cho người dùng.

Tạo

Đi đến Kho hàng > Danh sách được tuyển chọn từ thanh điều hướng chính. Trong ví dụ này, chúng ta sẽ dùng danh sách Yêu thích của bạn. Nếu bạn chưa thêm gì vào Yêu thích, hãy đến Tìm kiếm để tìm hiểu cách làm.

Nhấn nút Hành động trên danh sách Yêu thích.
Nhấn nút Tạo lưới.
Một cửa sổ mới sẽ hiện ra, cho phép bạn đặt tên cho lưới. Xem bên dưới.
Nhấn nút OK để tiếp tục.

Lưới của bạn đã được tạo. Đi đến Công cụ > Lưới từ thanh điều hướng chính và nhấn tab Lưới được tuyển chọn để xem lưới mới của bạn.

Tùy chỉnh

Biểu mẫu cho phép bạn tùy chỉnh lưới theo các cách sau:

Đặt tên để bạn nhớ lưới này nói về điều gì.
Chọn Tùy chỉnh bạn muốn áp dụng cho lưới này.
Chọn mặt thẻ ban đầu bạn muốn người dùng thấy trước. Mặc định là mặt gốc của kho hàng đó.
Chọn huy hiệu bạn muốn dùng trên thẻ. Huy hiệu giúp người dùng so sánh kho hàng theo một chỉ số tổng hợp như thân thiện môi trường.
Thêm các từ khóa, cách nhau 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 các ngôn ngữ bạn muốn người dùng thấy.
Nhấn nút Lưu để tiếp tục.

Chia sẻ

Lưới danh sách được tuyển chọn — *Mục lưới danh sách được tuyển chọn với menu hành động thu gọn*

Trên là hình ảnh với tất cả các hành động có sẵn cho lưới của bạn:

Cập nhật Cập nhật cấu hình lưới của bạn.
Thêm vào WinkLinks Thêm lưới vào tài khoản WinkLinks của bạn.
Nhúng Hiển thị cách nhúng lưới này như một Grid vào trang web của bạn.
Sử dụng với WordPress Hiển thị cách sử dụng plugin WordPress của chúng tôi để nhúng lưới này vào trang web của bạn.

Chúng tôi sẽ trình bày chi tiết hơn một số tùy chọn này 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="LIST"
       id="9a212b5e-62a7-11ef-ac3f-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>

Dưới đây là cách nhúng lưới của bạn vào trang web:

Dòng 3 cho bạn thấy cách nhúng các kiểu của Wink vào trang web.
Các dòng 6 đến 9 cho bạn thấy cách sử dụng wink-content-loader Web Component và yêu cầu nó lấy lưới cho mã của bạn.
Dòng 11 cho bạn thấy cách nhúng Javascript của chúng tôi vào trang web.
Dòng 13 cho bạn thấy cách nhúng wink-app-loader Web Component và yêu cầu nó lấy các tùy chọn cấu hình cấp trang của bạn.

Lưới tìm kiếm đã lưu

Đây là lưới sử dụng kho hàng trong truy vấn tìm kiếm đã lưu của bạn và chuyển đổi kết quả tìm kiếm thành kho du lịch có thể đặt chỗ mà bạn có thể hiển thị cho người dùng.

Tạo

Đi đến Kho hàng > Tìm kiếm đã lưu từ thanh điều hướng chính. Nếu bạn chưa tạo tìm kiếm đã lưu, hãy đến Tìm kiếm để tìm hiểu cách làm.

Nhấn nút Hành động trên tìm kiếm đã lưu của bạn.
Nhấn nút Tạo lưới.
Một cửa sổ mới sẽ hiện ra, cho phép bạn đặt tên cho lưới. Xem bên dưới.

Nhấn nút OK để tiếp tục.

Lưới của bạn đã được tạo. Đi đến Công cụ > Lưới từ thanh điều hướng chính và nhấn tab Lưới tìm kiếm đã lưu để xem lưới mới của bạn.

Tùy chỉnh

Biểu mẫu cho phép bạn tùy chỉnh lưới theo các cách sau:

Đặt tên để bạn nhớ lưới này nói về điều gì.
Chọn Tùy chỉnh bạn muốn áp dụng cho lưới này.
Chọn mặt thẻ ban đầu bạn muốn người dùng thấy trước. Mặc định là mặt gốc của kho hàng đó.
Chọn huy hiệu bạn muốn dùng trên thẻ. Huy hiệu giúp người dùng so sánh kho hàng theo một chỉ số tổng hợp như thân thiện môi trường.
Thêm các từ khóa, cách nhau 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 các ngôn ngữ bạn muốn người dùng thấy.
Nhấn nút Lưu để tiếp tục.

Chia sẻ

Lưới tìm kiếm đã lưu — *Mục lưới tìm kiếm đã lưu với menu hành động thu gọn*

Nhúng

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-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>

Dưới đây là cách nhúng lưới của bạn vào trang web:

Dòng 3 cho bạn thấy cách nhúng các kiểu của Wink vào trang web.
Các dòng 6 đến 9 cho bạn thấy cách sử dụng wink-content-loader Web Component và yêu cầu nó lấy lưới cho mã của bạn.
Dòng 11 cho bạn thấy cách nhúng Javascript của chúng tôi vào trang web.
Dòng 13 cho bạn thấy cách nhúng wink-app-loader Web Component và yêu cầu nó lấy các tùy chọn cấu hình cấp trang của bạn.

Lưới xếp hạng

Tạo

Tạo lưới xếp hạng bằng cách đi đến Công cụ > Lưới và nhấn tab Lưới xếp hạng. Nhấn nút Tạo lưới xếp hạng.

Tùy chỉnh

Biểu mẫu cho phép bạn tùy chỉnh lưới xếp hạng theo các cách sau:

Chọn điểm đến. Ví dụ: Tokyo.
Đặt tên để bạn nhớ lưới này nói về điều gì. Ví dụ: Khách sạn thân thiện môi trường ở Tokyo
Chọn Tùy chỉnh bạn muốn áp dụng cho lưới này.
Chọn mặt thẻ ban đầu bạn muốn người dùng thấy trước. Mặc định là mặt gốc của kho hàng đó.
Chọn đặc điểm để sắp xếp các bất động sản. Ví dụ: Thân thiện môi trường.
Thêm các từ khóa, cách nhau 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 các ngôn ngữ bạn muốn người dùng thấy.
Nhấn nút Lưu để tiếp tục.

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

Chia sẻ

Trên là hình ảnh với tất cả các hành động có sẵn cho lưới xếp hạng của bạn:

Cập nhật Cập nhật cấu hình lưới của bạn.
Thêm vào WinkLinks Thêm lưới xếp hạng vào tài khoản WinkLinks của bạn.
Nhúng Hiển thị cách nhúng lưới này như một Grid vào trang web của bạn.
Sử dụng với WordPress Hiển thị cách sử dụng plugin WordPress của chúng tôi để 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 một số tùy chọn này 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="RANKED"
       id="2483d55e-62a5-11ef-ac3f-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>

Dưới đây là cách nhúng lưới của bạn vào trang web:

Dòng 3 cho bạn thấy cách nhúng các kiểu của Wink vào trang web.
Các dòng 6 đến 9 cho bạn thấy cách sử dụng wink-content-loader Web Component và yêu cầu nó lấy lưới xếp hạng cho mã của bạn.
Dòng 11 cho bạn thấy cách nhúng Javascript của chúng tôi vào trang web.
Dòng 13 cho bạn thấy cách nhúng wink-app-loader Web Component và yêu cầu nó lấy các tùy chọn cấu hình cấp trang của bạn.

API

Các nhà phát triển muốn quản lý lưới có thể truy cập Developers > API > Inventory.

Đọc thêm

Tìm hiểu thêm về bộ sưu tập Web Components.
Tìm hiểu thêm về plugin WordPress của Wink.