Squarespace

Squarespace tukee mukautettua HTML:ää ja JavaScriptiä, mikä tarkoittaa, että voit upottaa minkä tahansa Wink-verkkokomponentin suoraan sivustollesi ilman lisäosaa. Tämä opas näyttää, miten Wink-skriptit ladataan koko sivustolle ja miten komponentit sijoitetaan yksittäisille sivuille.

Lataa Wink-skriptit koko sivustolle

Skriptien lisääminen sivustosi globaalin alatunnisteen ja ylätunnisteen osioon tarkoittaa, että Wink on käytettävissä jokaisella sivulla ilman toistuvaa asennusta.

Squarespace-editorissa siirry kohtaan Settings → Advanced → Code Injection.

Lisää Header-kenttään tyylitiedosto:

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

Lisää Footer-kenttään skripti ja sovelluksen lataaja (korvaa YOUR_CLIENT_ID omalla Wink Client ID:lläsi):

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

Klikkaa Save.

Lisää komponentti sivulle

Kun skriptit on ladattu globaalisti, voit lisätä minkä tahansa Wink-komponentin mille tahansa sivulle käyttämällä Code Block -lohkoa.

Avaa muokattava sivu.
Klikkaa Edit ja lisää uusi Code-lohko siihen kohtaan, johon haluat komponentin.

Liitä komponentin HTML, esimerkiksi sisältölataaja:

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

Klikkaa Apply ja sitten Save.

Saatavilla olevat komponentit

Komponentti	HTML-tunniste	Tarkoitus
Sisältölataaja	`<wink-content-loader>`	Näyttää hotellikortit, ruudukot, kartat
Haku	`<wink-lookup>`	Hakupalkki kohteille
Hakupainike	`<wink-search-button>`	Avaa matkasuunnitelman valitsimen
Tilipainike	`<wink-account-button>`	Kirjautuminen / käyttäjävalikko
Matkasuunnitelmapainike	`<wink-itinerary-button>`	Näyttää nykyisen matkasuunnitelman
Matkasuunnitelman valitsin	`<wink-itinerary-picker>`	Koko matkasuunnitelman lomake
Ostoskori	`<wink-shopping-cart-button>`	Ostoskorin yhteenvetopainike

Katso Web Components saadaksesi täydellisen attribuuttiviitteen jokaiselle komponentille.