Перейти до вмісту
Academy

Grids

Сітка представляє список постачальників та товарів, а деталі відображаються через інтерактивний інтерфейс із можливістю бронювання. Сітка підтримує відображення будь-якого товару з вашого кураторського списку або збереженого пошуку. Користувач взаємодіє з сіткою так само, як і з окремою людиною.картказ однією додатковою особливістю:

  1. Перегортайте сітку на сторінки, натискаючи наShow moreкнопка (коли буде доступно більше товарів).
Попередній перегляд сітки
Сітка, що показує кілька типів кімнат

Вище наведено приклад нашої сітки, що показує список карток типів кімнат.

У решті цієї статті ви дізнаєтесь, як створювати, налаштовувати та показувати сітку користувачам.

Типи сіток

Section titled “Типи сіток”

Існує три типи сіток:

  1. Сітка на основікураторський список.
  2. Сітка на основізбережений пошук.
  3. Сітка сітки на основі розташування та критеріїв сортування (тобто ранжована сітка).

Сітка кураторського списку

Section titled “Сітка кураторського списку”

Це сітка, яка використовує інвентар, зібраний вами в одному з ваших кураторських списків, і перетворює список на інвентар для бронювання подорожей, який ви можете показувати своїм користувачам.

Створити

Section titled “Створити”

Перейти доInventory > Curated Listsз головної панелі навігації. У цьому прикладі ми використовуватимемо вашFavoritesсписок. Якщо ви ще нічого не додали до свогоFavorites, перейдіть доПошукщоб навчитися як.

Створити сітку списку кураторів
Створити форму сітки кураторського списку
  1. Натисніть на Actions кнопка на Favorites список.
  2. Натисніть на Create a grid кнопка.
  3. З’явиться нове вікно, де ви зможете назвати свою сітку. Див. нижче.
  4. Натисніть OK кнопку, щоб продовжити.

Вашу сітку створено. Перейдіть доTools > Gridsна головній панелі навігації та натиснітьCurated Gridsвкладку, щоб побачити вашу нову сітку.

Налаштувати

Section titled “Налаштувати”

Форма дозволяє налаштувати сітку такими способами:

  1. Дайте їй назву, щоб ви запам’ятали, про що ця сітка.
  2. Виберіть Налаштування ви хочете застосувати до цієї сітки.
  3. Виберіть початкову сторону картки, яку користувачі мають бачити першою. За замовчуванням це власна сторона цього інвентарю.
  4. Виберіть значок, який ви хочете використовувати на картці. Значок дозволяє користувачам порівнювати інвентар за сукупним показником, таким як eco-friendly.
  5. Додайте ключові слова, розділені комами, які будуть використані Веб-сканери.
  6. Додайте заголовки та описи мовами, які має бачити користувач.
  7. Натисніть на 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з головної панелі навігації. Якщо ви ще не створили збережений пошук, перейдіть доПошукщоб навчитися як.

Створити сітку збереженого пошуку
Створити збережену форму сітки пошуку
  1. Натисніть на Actions у збереженому пошуку.
  2. Натисніть на Create a grid кнопка.
  3. З’явиться нове вікно, де ви зможете назвати свою сітку. Див. нижче.
  1. НатиснітьOKкнопку, щоб продовжити.

Вашу сітку створено. Перейдіть доTools > Gridsна головній панелі навігації та натиснітьSaved Search Gridsвкладку, щоб побачити вашу нову сітку.

Налаштувати

Section titled “Налаштувати”

Форма дозволяє налаштувати сітку такими способами:

  1. Дайте їй назву, щоб ви запам’ятали, про що ця сітка.
  2. Виберіть Налаштування ви хочете застосувати до цієї сітки.
  3. Виберіть початкову сторону картки, яку користувачі мають бачити першою. За замовчуванням це власна сторона цього інвентарю.
  4. Виберіть значок, який ви хочете використовувати на картці. Значок дозволяє користувачам порівнювати інвентар за сукупним показником, таким як eco-friendly.
  5. Додайте ключові слова, розділені комами, які будуть використані Веб-сканери.
  6. Додайте заголовки та описи мовами, які має бачити користувач.
  7. Натисніть на 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 “Налаштувати”

Форма дозволяє налаштувати ранжовану сітку такими способами:

  1. Виберіть пункт призначення. Наприклад, Токіо.
  2. Дайте їй назву, щоб ви запам’ятали, про що ця сітка. Наприклад, екологічно чисті готелі в Токіо
  3. Виберіть Налаштування ви хочете застосувати до цієї сітки.
  4. Виберіть початкову сторону картки, яку користувачі мають бачити першою. За замовчуванням це власна сторона цього інвентарю.
  5. Виберіть, за якою характеристикою сортувати властивості. Наприклад, екологічність.
  6. Додайте ключові слова, розділені комами, які будуть використані Веб-сканери.
  7. Додайте заголовки та описи мовами, які має бачити користувач.
  8. Натисніть на 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 “API”

Розробники, які хочуть керувати сітками, можуть перейти доРозробники > API > Інвентаризація.

Додаткова інформація

Section titled “Додаткова інформація”