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ào
Show more
cái nút (khi có nhiều mặt hàng hơn).
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
Section titled “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ý
Section titled “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
Section titled “Tạo nên”Điều hướng đếnInventory > Curated Lists
từ thanh điều hướng chính. Đối với ví dụ này, chúng tôi sẽ sử dụngFavorites
danh 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.
- Nhấp vào
Actions
nút trênFavorites
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 > Grids
từ thanh điều hướng chính và nhấp vàoCurated Grids
tab để xem lưới mới của bạn.
Tùy chỉnh
Section titled “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ẻ
Section titled “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 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.
<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
Section titled “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
Section titled “Tạo nên”Điều hướng đếnInventory > 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 đi tớiTìm kiếmđể học cách làm.
- 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ột
OK
nút để tiếp tục.
Lưới của bạn đã được tạo. Điều hướng đếnTools > Grids
từ thanh điều hướng chính và nhấp vàoSaved Search Grids
tab để xem lưới mới của bạn.
Tùy chỉnh
Section titled “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ẻ
Section titled “Chia sẻ”<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
Section titled “Lưới xếp hạng”Tạo nên
Section titled “Tạo nên”Tạo lưới xếp hạng bằng cách điều hướng đếnTools > Grids
và nhấp vàoRanked Grid
tab. Nhấp vàoCreate ranked grid
cái nút.
Tùy chỉnh
Section titled “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ẻ
Section titled “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.
<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)
Section titled “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
Section titled “Đọ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.