Ghost

Vestavěná funkce Code Injection v Ghostu vám umožňuje přidávat skripty do globálního <head> a </body> vaší publikace. Všechny plány Ghost podporují code injection, což usnadňuje vložení komponent Wink na jakoukoli stránku nebo příspěvek.

Načtení skriptů Wink na celém webu

V administračním panelu Ghost přejděte do Settings → Code Injection.

Do pole Site Header přidejte stylopis:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Do pole Site Footer přidejte skript a načítač aplikace (nahraďte YOUR_CLIENT_ID):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Klikněte na Save.

Přidání komponenty do příspěvku nebo stránky

Editor Ghost podporuje HTML kartu, která vám umožní vložit surový HTML kód kamkoli do obsahu.

Otevřete příspěvek nebo stránku v editoru Ghost.
Napište / pro otevření výběru karet a vyberte HTML.

Vložte HTML komponenty, například:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Klikněte mimo kartu pro náhled a poté publikujte.

Code injection na jednotlivých stránkách

Pro komponentu, která má být zobrazena pouze na jedné stránce, Ghost podporuje také code injection na úrovni jednotlivých stránek:

Otevřete nastavení příspěvku nebo stránky (ikona ozubeného kola v editoru).
Přejděte na Code Injection.
Přidejte tag komponenty do pole Footer (globální app-loader musí být pouze v celostránkovém footeru).
Uložte.

Dostupné komponenty

Komponenta	HTML tag	Účel
Content loader	`<wink-content-loader>`	Zobrazení hotelových karet, mřížek, map
Lookup	`<wink-lookup>`	Vyhledávací lišta pro destinace
Search button	`<wink-search-button>`	Otevření výběru itineráře
Account button	`<wink-account-button>`	Přihlášení / uživatelské menu
Itinerary button	`<wink-itinerary-button>`	Zobrazení aktuálního itineráře
Itinerary picker	`<wink-itinerary-picker>`	Kompletní formulář itineráře
Shopping cart	`<wink-shopping-cart-button>`	Tlačítko souhrnu košíku

Podívejte se na Web Components pro kompletní referenci atributů.