Ghost

La funció integrada de Code Injection de Ghost et permet afegir scripts al <head> global i al </body> de la teva publicació. Tots els plans de Ghost suporten la injecció de codi, facilitant la incrustació de components Wink a qualsevol pàgina o publicació.

Carrega els scripts de Wink a tot el lloc

Al panell d’administració de Ghost, ves a Settings → Code Injection.

A la caixa Site Header, afegeix la fulla d’estils:

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

A la caixa Site Footer, afegeix l’script i el carregador de l’aplicació (substitueix 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>

Fes clic a Save.

Afegeix un component a una publicació o pàgina

L’editor de Ghost suporta una targeta HTML que et permet inserir HTML en brut a qualsevol lloc del teu contingut.

Obre la publicació o pàgina a l’editor de Ghost.
Escriu / per obrir el selector de targetes i selecciona HTML.

Enganxa l’HTML del component, per exemple:

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

Fes clic fora de la targeta per previsualitzar, després publica.

Injecció de codi per pàgina

Per a un component que només ha d’aparèixer en una pàgina, Ghost també suporta la injecció de codi per pàgina:

Obre la configuració de la publicació o pàgina (icona d’engranatge a l’editor).
Desplaça’t fins a Code Injection.
Afegeix l’etiqueta del component al camp Footer (el carregador global de l’aplicació només cal que estigui al footer global del lloc).
Desa.

Components disponibles

Component	Etiqueta HTML	Propòsit
Content loader	`<wink-content-loader>`	Mostra targetes d’hotels, graelles, mapes
Lookup	`<wink-lookup>`	Barra de cerca per a destinacions
Search button	`<wink-search-button>`	Obre el selector d’itineraris
Account button	`<wink-account-button>`	Inici de sessió / menú d’usuari
Itinerary button	`<wink-itinerary-button>`	Mostra l’itinerari actual
Itinerary picker	`<wink-itinerary-picker>`	Formulari complet d’itinerari
Shopping cart	`<wink-shopping-cart-button>`	Botó resum del carretó

Consulta Web Components per a la referència completa d’atributs.