Lưới

Lưới đại diện cho một danh sách nhà cung cấp và tồn kho, đồ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ỳ tồn kho 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ấp vào nút Hiển thị thêm (khi có 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 tồn kho 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 tồn 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 Inventory > Curated Lists từ thanh điều hướng chính. Trong ví dụ này, chúng ta sẽ sử dụng danh sách Favorites của bạn. Nếu bạn chưa thêm gì vào Favorites, hãy đến Tìm kiếm để tìm hiểu cách làm.

Nhấp vào nút Actions trên danh sách Favorites.
Nhấp vào nút Create a grid.
Một cửa sổ mới sẽ hiển thị, cho phép bạn đặt tên cho lưới. Xem bên dưới.
Nhấp nút OK để tiếp tục.

Lưới của bạn đã được tạo. Điều hướng đến Tools > Grids từ thanh điều hướng chính và nhấp vào tab Curated Grids để 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 tồn kho đó.
Chọn huy hiệu bạn muốn sử dụng trên thẻ. Huy hiệu cho phép người dùng so sánh tồn kho theo một chỉ số tổng hợp như thân thiện với môi trường.
Thêm 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ấp nút Save để 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 đây 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 một 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 tồn kho 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 tồn 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 Inventory > Saved searches 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ấp vào nút Actions trên tìm kiếm đã lưu của bạn.
Nhấp vào nút Create a grid.
Một cửa sổ mới sẽ hiển thị, cho phép bạn đặt tên cho lưới. Xem bên dưới.

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

Lưới của bạn đã được tạo. Điều hướng đến Tools > Grids từ thanh điều hướng chính và nhấp vào tab Saved Search Grids để 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 tồn kho đó.
Chọn huy hiệu bạn muốn sử dụng trên thẻ. Huy hiệu cho phép người dùng so sánh tồn kho theo một chỉ số tổng hợp như thân thiện với môi trường.
Thêm 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ấp nút Save để 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 một 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ều hướng đến Tools > Grids và nhấp vào tab Ranked Grid. Nhấp vào nút Create ranked grid.

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 với 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 tồn kho đó.
Chọn đặc điểm để sắp xếp các bất động sản. Ví dụ: Thân thiện với môi trường.
Thêm 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ấp nút Save để 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 đây 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 một 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.