Ghost

Funcția încorporată Code Injection din Ghost îți permite să adaugi scripturi în <head> și </body> globale ale publicației tale. Toate planurile Ghost suportă code injection, facilitând încorporarea componentelor Wink pe orice pagină sau articol.

Încarcă scripturile Wink pe tot site-ul

În panoul Ghost Admin, accesează Settings → Code Injection.

În caseta Site Header, adaugă foaia de stil:

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

În caseta Site Footer, adaugă scriptul și încărcătorul aplicației (înlocuieș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>

Apasă Save.

Adaugă un component într-un articol sau pagină

Editorul Ghost suportă un card HTML care îți permite să inserezi HTML brut oriunde în conținutul tău.

Deschide articolul sau pagina în editorul Ghost.
Tastează / pentru a deschide selectorul de carduri și selectează HTML.

Lipește HTML-ul componentului, de exemplu:

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

Apasă în afara cardului pentru previzualizare, apoi publică.

Code injection pe pagină

Pentru un component care trebuie să apară doar pe o singură pagină, Ghost suportă și code injection pe pagină:

Deschide setările articolului sau paginii (pictograma roată din editor).
Derulează la Code Injection.
Adaugă tag-ul componentului în câmpul Footer (încărcătorul global al aplicației trebuie să fie doar în footer-ul site-ului).
Salvează.

Componente disponibile

Component	HTML tag	Scop
Content loader	`<wink-content-loader>`	Afișează carduri hotel, grile, hărți
Lookup	`<wink-lookup>`	Bară de căutare pentru destinații
Search button	`<wink-search-button>`	Deschide selectorul de itinerarii
Account button	`<wink-account-button>`	Autentificare / meniu utilizator
Itinerary button	`<wink-itinerary-button>`	Afișează itinerariul curent
Itinerary picker	`<wink-itinerary-picker>`	Formular complet de itinerariu
Shopping cart	`<wink-shopping-cart-button>`	Buton sumar coș de cumpărături

Vezi Web Components pentru referința completă a atributelor.