Squarespace

A Squarespace támogatja az egyedi HTML-t és JavaScriptet, ami azt jelenti, hogy bármely Wink webkomponenst közvetlenül beágyazhat a webhelyére plugin nélkül. Ez az útmutató megmutatja, hogyan töltheti be a Wink szkripteket az egész webhelyen, majd hogyan helyezheti el a komponenseket az egyes oldalakon.

Wink szkriptek betöltése az egész webhelyen

Ha a szkripteket a webhely globális láblécébe és fejlécébe helyezi, a Wink minden oldalon elérhető lesz anélkül, hogy ismételni kellene a beállítást.

A Squarespace szerkesztőben lépjen a Beállítások → Haladó → Kódbeillesztés menüpontra.

A Fejléc mezőbe illessze be a stíluslapot:

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

A Lábléc mezőbe illessze be a szkriptet és az alkalmazás betöltőt (cserélje ki a YOUR_CLIENT_ID értéket a saját Wink kliensazonosítójára):

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

Kattintson a Mentés gombra.

Komponens hozzáadása egy oldalhoz

Miután a szkriptek globálisan betöltődtek, bármely Wink komponenst elhelyezhet az oldalon egy Kód blokk segítségével.

Nyissa meg a szerkeszteni kívánt oldalt.
Kattintson a Szerkesztés gombra, majd adjon hozzá egy új Kód blokkot oda, ahol a komponenst meg szeretné jeleníteni.

Illessze be a komponens HTML kódját, például egy tartalom betöltőt:

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

Kattintson az Alkalmaz majd a Mentés gombra.

Elérhető komponensek

Komponens	HTML címke	Cél
Tartalom betöltő	`<wink-content-loader>`	Szállodakártyák, rácsok, térképek megjelenítése
Kereső	`<wink-lookup>`	Úticél kereső sáv
Kereső gomb	`<wink-search-button>`	Útvonalválasztó megnyitása
Fiók gomb	`<wink-account-button>`	Bejelentkezés / felhasználói menü
Útvonal gomb	`<wink-itinerary-button>`	Aktuális útvonal megjelenítése
Útvonalválasztó	`<wink-itinerary-picker>`	Teljes útvonal űrlap
Bevásárlókosár	`<wink-shopping-cart-button>`	Kosár összefoglaló gomb

A teljes attribútumreferenciáért minden komponenshez lásd a Web Components oldalt.