Grids
Сітка представляє список постачальників та товарів, а деталі відображаються через інтерактивний інтерфейс із можливістю бронювання. Сітка підтримує відображення будь-якого товару з вашого кураторського списку або збереженого пошуку. Користувач взаємодіє з сіткою так само, як і з окремою людиною.картказ однією додатковою особливістю:
- Перегортайте сітку на сторінки, натискаючи на
Show more
кнопка (коли буде доступно більше товарів).
Вище наведено приклад нашої сітки, що показує список карток типів кімнат.
У решті цієї статті ви дізнаєтесь, як створювати, налаштовувати та показувати сітку користувачам.
Типи сіток
Section titled “Типи сіток”Існує три типи сіток:
- Сітка на основікураторський список.
- Сітка на основізбережений пошук.
- Сітка сітки на основі розташування та критеріїв сортування (тобто ранжована сітка).
Сітка кураторського списку
Section titled “Сітка кураторського списку”Це сітка, яка використовує інвентар, зібраний вами в одному з ваших кураторських списків, і перетворює список на інвентар для бронювання подорожей, який ви можете показувати своїм користувачам.
Створити
Section titled “Створити”Перейти доInventory > Curated Lists
з головної панелі навігації. У цьому прикладі ми використовуватимемо вашFavorites
список.
Якщо ви ще нічого не додали до свогоFavorites
, перейдіть доПошукщоб навчитися як.
- Натисніть на
Actions
кнопка наFavorites
список. - Натисніть на
Create a grid
кнопка. - З’явиться нове вікно, де ви зможете назвати свою сітку. Див. нижче.
- Натисніть
OK
кнопку, щоб продовжити.
Вашу сітку створено. Перейдіть доTools > Grids
на головній панелі навігації та натиснітьCurated Grids
вкладку, щоб побачити вашу нову сітку.
Налаштувати
Section titled “Налаштувати”Форма дозволяє налаштувати сітку такими способами:
- Дайте їй назву, щоб ви запам’ятали, про що ця сітка.
- Виберіть Налаштування ви хочете застосувати до цієї сітки.
- Виберіть початкову сторону картки, яку користувачі мають бачити першою. За замовчуванням це власна сторона цього інвентарю.
- Виберіть значок, який ви хочете використовувати на картці. Значок дозволяє користувачам порівнювати інвентар за сукупним показником, таким як
eco-friendly
. - Додайте ключові слова, розділені комами, які будуть використані Веб-сканери.
- Додайте заголовки та описи мовами, які має бачити користувач.
- Натисніть на
Save
кнопку, щоб продовжити.
Поділитися
Section titled “Поділитися”Вище показано зображення з усіма доступними діями для вашої сітки:
- ОновленняОновлює конфігурацію вашої сітки.
- Додати до WinkLinksДодає сітку до вашого облікового запису WinkLinks.
- ВбудуватиПоказує, як вбудувати цю сітку якСіткана ваш веб-сайт.
- Використовуйте з WordPressПоказує, як користуватися нашимиПлагін WordPressщоб вбудувати цю сітку на свій вебсайт.
Деякі з цих варіантів ми розглянемо детальніше нижче.
Вбудувати
Section titled “Вбудувати”<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>
Ось як вбудувати сітку на свій сайт:
- У рядку 3 показано, як вбудувати стилі Wink на ваш сайт.
- У рядках з 6 по 9 показано, як використовуватизавантажувач контенту winkВеб-компонент і накажіть йому отримати сітку для вашого коду.
- У рядку 11 показано, як вбудувати наш Javascript на ваш сайт.
- У рядку 13 показано, як вбудуватизавантажувач програм winkВеб-компонент і накажіть йому отримати налаштування конфігурації на рівні сторінки.
Збережена сітка пошуку
Section titled “Збережена сітка пошуку”Це сітка, яка використовує інформацію про інвентар у вашому збереженому пошуковому запиті та перетворює результати пошуку на інформацію про туристичні пропозиції, які можна забронювати, і яку ви можете показати своїм користувачам.
Створити
Section titled “Створити”Перейти доInventory > Saved searches
з головної панелі навігації.
Якщо ви ще не створили збережений пошук, перейдіть доПошукщоб навчитися як.
- Натисніть на
Actions
у збереженому пошуку. - Натисніть на
Create a grid
кнопка. - З’явиться нове вікно, де ви зможете назвати свою сітку. Див. нижче.
- Натисніть
OK
кнопку, щоб продовжити.
Вашу сітку створено. Перейдіть доTools > Grids
на головній панелі навігації та натиснітьSaved Search Grids
вкладку, щоб побачити вашу нову сітку.
Налаштувати
Section titled “Налаштувати”Форма дозволяє налаштувати сітку такими способами:
- Дайте їй назву, щоб ви запам’ятали, про що ця сітка.
- Виберіть Налаштування ви хочете застосувати до цієї сітки.
- Виберіть початкову сторону картки, яку користувачі мають бачити першою. За замовчуванням це власна сторона цього інвентарю.
- Виберіть значок, який ви хочете використовувати на картці. Значок дозволяє користувачам порівнювати інвентар за сукупним показником, таким як
eco-friendly
. - Додайте ключові слова, розділені комами, які будуть використані Веб-сканери.
- Додайте заголовки та описи мовами, які має бачити користувач.
- Натисніть на
Save
кнопку, щоб продовжити.
Поділитися
Section titled “Поділитися”Вбудувати
Section titled “Вбудувати”<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>
Ось як вбудувати сітку на свій сайт:
- У рядку 3 показано, як вбудувати стилі Wink на ваш сайт.
- У рядках з 6 по 9 показано, як використовуватизавантажувач контенту winkВеб-компонент і накажіть йому отримати сітку для вашого коду.
- У рядку 11 показано, як вбудувати наш Javascript на ваш сайт.
- У рядку 13 показано, як вбудуватизавантажувач програм winkВеб-компонент і накажіть йому отримати налаштування конфігурації на рівні сторінки.
Рейтингова сітка
Section titled “Рейтингова сітка”Створити
Section titled “Створити”Створіть ранжовану сітку, перейшовши доTools > Grids
і натисніть наRanked Grid
вкладка. Натисніть наCreate ranked grid
кнопка.
Налаштувати
Section titled “Налаштувати”Форма дозволяє налаштувати ранжовану сітку такими способами:
- Виберіть пункт призначення. Наприклад, Токіо.
- Дайте їй назву, щоб ви запам’ятали, про що ця сітка. Наприклад, екологічно чисті готелі в Токіо
- Виберіть Налаштування ви хочете застосувати до цієї сітки.
- Виберіть початкову сторону картки, яку користувачі мають бачити першою. За замовчуванням це власна сторона цього інвентарю.
- Виберіть, за якою характеристикою сортувати властивості. Наприклад, екологічність.
- Додайте ключові слова, розділені комами, які будуть використані Веб-сканери.
- Додайте заголовки та описи мовами, які має бачити користувач.
- Натисніть на
Save
кнопку, щоб продовжити.
Після збереження ранжованої сітки вас буде перенаправлено на сторінку ранжованих сіток, і ваша сітка тепер готова до публікації у світі.
Поділитися
Section titled “Поділитися”Вище показано зображення з усіма доступними діями для вашої сітки rankd:
- ОновленняОновлює конфігурацію вашої сітки.
- Додати до WinkLinksДодає ранжовану сітку до вашого облікового запису WinkLinks.
- ВбудуватиПоказує, як вбудувати цю сітку якСіткана ваш веб-сайт.
- Використовуйте з WordPressПоказує, як користуватися нашимиПлагін WordPressвбудувати цю картку на свій вебсайт.
Деякі з цих варіантів ми розглянемо детальніше нижче.
Вбудувати
Section titled “Вбудувати”<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>
Ось як вбудувати сітку на свій сайт:
- У рядку 3 показано, як вбудувати стилі Wink на ваш сайт.
- У рядках з 6 по 9 показано, як використовуватизавантажувач контенту winkВеб-компонент і накажіть йому отримати ранжовану сітку для вашого коду.
- У рядку 11 показано, як вбудувати наш Javascript на ваш сайт.
- У рядку 13 показано, як вбудуватизавантажувач програм winkВеб-компонент і накажіть йому отримати налаштування конфігурації на рівні сторінки.
Розробники, які хочуть керувати сітками, можуть перейти доРозробники > API > Інвентаризація.
Додаткова інформація
Section titled “Додаткова інформація”- Дізнайтеся більше про нашу колекціюВеб-компоненти.
- Дізнайтеся більше проПлагін Wink для WordPress.