Přeskočit na obsah

Grids

Mřížka představuje seznam dodavatelů a zásob a zobrazuje podrobnosti prostřednictvím interaktivního uživatelského rozhraní mřížky s možností rezervace. Mřížka podporuje zobrazení libovolné zásoby z vašeho seznamu nebo uloženého vyhledávání. Uživatel interaguje s mřížkou stejným způsobem, jako interaguje s jednotlivcem.kartas jednou další funkcí:

  1. Pro stránkování mřížky klikněte naShow moretlačítko (až bude k dispozici více položek).
Náhled mřížky
Mřížka zobrazující více typů pokojů

Výše je uveden příklad naší mřížky zobrazující seznam karet typů pokojů.

Zbytek tohoto článku vás provede tím, jak vytvořit, přizpůsobit a zpřístupnit mřížku vašim uživatelům.

Existují tři typy mřížek:

  1. Mřížka založená naseznam s kurátorem.
  2. Mřížka založená nauložené vyhledávání.
  3. Mřížka založená na umístění a kritériích řazení (tj. hodnocená mřížka).

Toto je mřížka, která využívá inventář, který jste shromáždili v jednom z vašich seznamů, a převádí jej na rezervovatelný cestovní inventář, který můžete zobrazit svým uživatelům.

Přejít naInventory > Curated Listsz hlavního navigačního panelu. V tomto příkladu použijeme vášFavoritesseznam. Pokud jste do svého seznamu ještě nic nepřidaliFavorites, jít naVyhledávánínaučit se jak.

Vytvořit mřížku seznamu kurátorů
Vytvořit formulář mřížky s upraveným seznamem
  1. Klikněte na Actions tlačítko na Favorites seznam.
  2. Klikněte na Create a grid tlačítko.
  3. Zobrazí se nové okno, kde můžete pojmenovat svou mřížku. Viz níže.
  4. Klikněte OK tlačítko pro pokračování.

Vaše mřížka byla vytvořena. Přejděte naTools > Gridsz hlavního navigačního panelu a klikněte naCurated Gridspro zobrazení vaší nové mřížky.

Formulář umožňuje přizpůsobit mřížku následujícími způsoby:

  1. Dejte tomu název, abyste si pamatovali, o čem mřížka je.
  2. Vyberte Přizpůsobení chcete na tuto mřížku použít.
  3. Vyberte počáteční stranu karty, kterou chcete uživatelům zobrazit jako první. Ve výchozím nastavení se jedná o nativní stranu daného inventáře.
  4. Vyberte odznak, který chcete na kartě použít. Odznak umožňuje uživatelům porovnávat inventář na základě souhrnné metriky, jako je například eco-friendly.
  5. Přidejte klíčová slova oddělená čárkou, která budou použita Webové prohledávače.
  6. Přidejte názvy a popisy v jazycích, které chcete, aby uživatel viděl.
  7. Klikněte na Save tlačítko pro pokračování.
Mřížka s kurátorským seznamem
Položka mřížky s kurátorským seznamem se sbalenou nabídkou akcí

Výše uvedený obrázek ukazuje všechny dostupné akce pro vaši mřížku:

  • AktualizovatAktualizuje konfiguraci mřížky.
  • Přidat do WinkLinksPřidá mřížku k vašemu účtu WinkLinks.
  • VložitUkazuje, jak vložit tuto mřížku jakoMřížkana váš web.
  • Použití s ​​WordPressemUkáže vám, jak používat našePlugin pro WordPressvložit tuto mřížku do svého webu.

Některé z těchto možností si podrobněji rozebereme níže.

<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>

Zde je návod, jak vložit mřížku do svého webu:

  • Řádek 3 ukazuje, jak vložit styly Wink do vašeho webu.
  • Řádky 6 až 9 ukazují, jak používatwink-content-loaderWebovou komponentu a řekněte jí, aby pro váš kód načetla mřížku.
  • Řádek 11 ukazuje, jak vložit náš Javascript do vašeho webu.
  • Řádek 13 ukazuje, jak vložitzavaděč aplikací winkWebovou komponentu a řekněte jí, aby načetla vaše konfigurační předvolby na úrovni stránky.

Toto je mřížka, která používá inventář z vašeho uloženého vyhledávacího dotazu a převádí výsledky vyhledávání na rezervovatelný cestovní inventář, který můžete zobrazit svým uživatelům.

Přejít naInventory > Saved searchesz hlavního navigačního panelu. Pokud jste si ještě nevytvořili uložené vyhledávání, přejděte naVyhledávánínaučit se jak.

Vytvořit mřížku uloženého vyhledávání
Vytvořit formulář mřížky uloženého vyhledávání
  1. Klikněte na Actions tlačítko u uloženého vyhledávání.
  2. Klikněte na Create a grid tlačítko.
  3. Zobrazí se nové okno, kde můžete pojmenovat svou mřížku. Viz níže.
  1. KlikněteOKtlačítko pro pokračování.

Vaše mřížka byla vytvořena. Přejděte naTools > Gridsz hlavního navigačního panelu a klikněte naSaved Search Gridspro zobrazení vaší nové mřížky.

Formulář umožňuje přizpůsobit mřížku následujícími způsoby:

  1. Dejte tomu název, abyste si pamatovali, o čem mřížka je.
  2. Vyberte Přizpůsobení chcete na tuto mřížku použít.
  3. Vyberte počáteční stranu karty, kterou chcete uživatelům zobrazit jako první. Ve výchozím nastavení se jedná o nativní stranu daného inventáře.
  4. Vyberte odznak, který chcete na kartě použít. Odznak umožňuje uživatelům porovnávat inventář na základě souhrnné metriky, jako je například eco-friendly.
  5. Přidejte klíčová slova oddělená čárkou, která budou použita Webové prohledávače.
  6. Přidejte názvy a popisy v jazycích, které chcete, aby uživatel viděl.
  7. Klikněte na Save tlačítko pro pokračování.
Uložená vyhledávací mřížka
Uložená položka v mřížce vyhledávání se sbalenou nabídkou akcí
<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>

Zde je návod, jak vložit mřížku do svého webu:

  • Řádek 3 ukazuje, jak vložit styly Wink do vašeho webu.
  • Řádky 6 až 9 ukazují, jak používatwink-content-loaderWebovou komponentu a řekněte jí, aby pro váš kód načetla mřížku.
  • Řádek 11 ukazuje, jak vložit náš Javascript do vašeho webu.
  • Řádek 13 ukazuje, jak vložitzavaděč aplikací winkWebovou komponentu a řekněte jí, aby načetla vaše konfigurační předvolby na úrovni stránky.

Vytvořte řazenou mřížku přechodem naTools > Gridsa klikněte naRanked Gridzáložka. Klikněte naCreate ranked gridtlačítko.

Formulář umožňuje přizpůsobit mřížku s hodnocením následujícími způsoby:

  1. Vyberte si destinaci. Např. Tokio.
  2. Dejte tomu název, abyste si pamatovali, o čem mřížka je. Např. ekologické hotely v Tokiu
  3. Vyberte Přizpůsobení chcete na tuto mřížku použít.
  4. Vyberte počáteční stranu karty, kterou chcete uživatelům zobrazit jako první. Ve výchozím nastavení se jedná o nativní stranu daného inventáře.
  5. Vyberte, podle jaké charakteristiky chcete vlastnosti seřadit. Např. šetrnost k životnímu prostředí.
  6. Přidejte klíčová slova oddělená čárkou, která budou použita Webové prohledávače.
  7. Přidejte názvy a popisy v jazycích, které chcete, aby uživatel viděl.
  8. Klikněte na Save tlačítko pro pokračování.

Po uložení hodnocené mřížky budete přesměrováni na stránku s hodnocenými mřížkami a vaše mřížka je nyní připravena ke sdílení se světem.

Hodnocená mřížka
Seřazená mřížka se sbalenou nabídkou akcí

Výše uvedený obrázek ukazuje všechny dostupné akce pro vaši mřížku rankd:

  • AktualizovatAktualizuje konfiguraci mřížky.
  • Přidat do WinkLinksPřidá řazenou mřížku do vašeho účtu WinkLinks.
  • VložitUkazuje, jak vložit tuto mřížku jakoMřížkana váš web.
  • Použití s ​​WordPressemUkáže vám, jak používat našePlugin pro WordPressvložit tuto kartu na váš web.

Některé z těchto možností si podrobněji rozebereme níže.

<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>

Zde je návod, jak vložit mřížku do svého webu:

  • Řádek 3 ukazuje, jak vložit styly Wink do vašeho webu.
  • Řádky 6 až 9 ukazují, jak používatwink-content-loaderWebovou komponentu a řekněte jí, aby pro váš kód načetla řazenou mřížku.
  • Řádek 11 ukazuje, jak vložit náš Javascript do vašeho webu.
  • Řádek 13 ukazuje, jak vložitzavaděč aplikací winkWebovou komponentu a řekněte jí, aby načetla vaše konfigurační předvolby na úrovni stránky.

Vývojáři, kteří chtějí spravovat gridy, se mohou obrátit naVývojáři > API > Inventář.