Ghost

Vstavaná funkcia Code Injection v Ghost vám umožňuje pridávať skripty do globálneho <head> a </body> vašej publikácie. Všetky plány Ghost podporujú code injection, čo uľahčuje vloženie komponentov Wink na akúkoľvek stránku alebo príspevok.

Načítanie skriptov Wink na celej stránke

V administrácii Ghost prejdite do Settings → Code Injection.

Do poľa Site Header pridajte štýly:

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

Do poľa Site Footer pridajte skript a loader aplikácie (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>

Kliknite na Save.

Pridanie komponentu do príspevku alebo stránky

Editor Ghost podporuje HTML kartu, ktorá vám umožní vložiť surový HTML kdekoľvek do obsahu.

Otvorte príspevok alebo stránku v editore Ghost.
Napíšte / pre otvorenie výberu kariet a vyberte HTML.

Vložte HTML komponentu, napríklad:

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

Kliknite mimo karty pre náhľad a potom publikujte.

Code injection pre jednotlivé stránky

Pre komponent, ktorý má byť zobrazený iba na jednej stránke, Ghost podporuje aj code injection pre konkrétnu stránku:

Otvorte nastavenia príspevku alebo stránky (ikona ozubeného kolieska v editore).
Prejdite na Code Injection.
Pridajte tag komponentu do poľa Footer (globálny app-loader musí byť len v celostránkovom footeri).
Uložte.

Dostupné komponenty

Komponent	HTML tag	Účel
Content loader	`<wink-content-loader>`	Zobrazenie hotelových kariet, mriežok, máp
Lookup	`<wink-lookup>`	Vyhľadávací panel pre destinácie
Search button	`<wink-search-button>`	Otvorenie výberu itinerára
Account button	`<wink-account-button>`	Prihlásenie / používateľské menu
Itinerary button	`<wink-itinerary-button>`	Zobrazenie aktuálneho itinerára
Itinerary picker	`<wink-itinerary-picker>`	Kompletný formulár itinerára
Shopping cart	`<wink-shopping-cart-button>`	Tlačidlo so súhrnom košíka

Pozrite si Web Components pre kompletný zoznam atribútov.