Grids

Lưới biểu thị danh sách các nhà cung cấp và hàng tồn kho và hiển thị thông tin chi tiết thông qua giao diện người dùng dạng lưới có thể đặt trước, tương tác. Lưới hỗ trợ hiển thị bất kỳ hàng tồn kho nào từ danh sách được quản lý hoặc tìm kiếm đã lưu của bạn. Người dùng tương tác với lưới theo cùng cách tương tác với một cá nhânthẻvới một tính năng bổ sung:

Phân trang qua lưới bằng cách nhấp vàoShow more cái nút (khi có nhiều mặt hàng hơn).

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

Phía trên là ví dụ về lưới hiển thị danh sách các loại thẻ 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ác loại lưới

Có ba loại lưới:

Lưới dựa trên mộtdanh sách được tuyển chọn.
Lưới dựa trên mộttìm kiếm đã lưu.
Lưới 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 quản lý

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

Tạo nên

Điều hướng đếnInventory > Curated Liststừ thanh điều hướng chính. Đối với ví dụ này, chúng tôi sẽ sử dụngFavoritesdanh sách. Nếu bạn chưa thêm bất cứ thứ gì vàoFavorites, đi đếnTìm kiếmđể học cách làm.

Tạo lưới danh sách quản lý — *Tạo biểu mẫu lưới danh sách được quản lý*

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

Lưới của bạn đã được tạo. Điều hướng đếnTools > Gridstừ thanh điều hướng chính và nhấp vàoCurated Gridstab để xem lưới mới của bạn.

Tùy chỉnh

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

Đặt tên cho lưới để bạn nhớ mục đích của lưới.
Chọn Tùy chỉnh bạn muốn áp dụng vào lưới 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 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 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.
Nhấp vào Save nút để tiếp tục.

Chia sẻ

Lưới danh sách được quản lý — *Mục nhập lưới danh sách được quản lý với menu hành động thu gọn*

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 lưới của bạn:

Cập nhậtCập nhật cấu hình lưới của bạn.
Thêm vào WinkLinksThêm lưới vào tài khoản WinkLinks của bạn.
NhúngHiển thị cho bạn cách nhúng lưới này như mộtLướivà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 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 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="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>

Sau đây là cách nhúng lưới 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 lưới 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.

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

Đây là lưới sử dụng kho lưu trữ 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 lưu trữ du lịch có thể đặt trước mà bạn có thể hiển thị cho người dùng.

Tạo nên

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

Tạo lưới tìm kiếm đã lưu — *Tạo biểu mẫu lưới tìm kiếm đã lưu*

Nhấp vào Actions trên tìm kiếm đã lưu của bạn.
Nhấp vào Create a grid cái nút.
Một cửa sổ mới sẽ hiển thị, cho phép bạn đặt tên cho lưới của mình. Xem bên dưới.

Nhấp chuộtOKnút để tiếp tục.

Lưới của bạn đã được tạo. Điều hướng đếnTools > Gridstừ thanh điều hướng chính và nhấp vàoSaved Search Gridstab để xem lưới mới của bạn.

Tùy chỉnh

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

Đặt tên cho lưới để bạn nhớ mục đích của lưới.
Chọn Tùy chỉnh bạn muốn áp dụng vào lưới 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 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 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.
Nhấp vào Save nút để tiếp tục.

Chia sẻ

Lưới tìm kiếm đã lưu — *Đã lưu mục nhập lưới tìm kiếm 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>

Sau đây là cách nhúng lưới 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 lưới 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.

Lưới xếp hạng

Tạo nên

Tạo lưới xếp hạng bằng cách điều hướng đếnTools > Gridsvà nhấp vàoRanked Gridtab. Nhấp vàoCreate ranked grid cái nút.

Tùy chỉnh

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

Chọn điểm đến. Ví dụ: Tokyo.
Đặt tên cho lưới để bạn nhớ mục đích của lưới. 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 vào lưới 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 đặc điểm để sắp xếp thuộc tính. Ví dụ: Thân thiện với môi trường.
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.
Nhấp vào Save nút để 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 và lưới của bạn đã sẵn sàng để chia sẻ với mọi người.

Chia sẻ

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 lưới rankd của bạn:

Cập nhậtCập nhật cấu hình lưới của bạn.
Thêm vào WinkLinksThêm lưới xếp hạng vào tài khoản WinkLinks của bạn.
NhúngHiển thị cho bạn cách nhúng lưới này như mộtLướivà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="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>

Sau đây là cách nhúng lưới 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 lưới xếp hạng 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ý lưới 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.