Webflow

A Webflow három helyen támogatja az egyedi HTML és JavaScript használatát: az egész oldalra vonatkozó <head>, az egész oldalra vonatkozó </body>, valamint egyes elemekhez tartozó kódbeágyazások. Ez megkönnyíti a Wink webkomponensek integrálását.

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

A Webflow Designerben nyissa meg a Project Settings → Custom Code menüpontot.

A Head Code szekcióban adja hozzá a stíluslapot:

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

A Footer Code szekcióban adja hozzá a szkriptet és az alkalmazás betöltőt (cserélje ki a YOUR_CLIENT_ID értéket):

<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 Save Changes gombra.

Komponens hozzáadása egy adott elemhez

A Designerben válassza ki azt a Div vagy Section elemet, ahová a komponenst szeretné elhelyezni.
A jobb oldali panelen kattintson a </> Embed ikonra (vagy adjon hozzá egy HTML Embed elemet az Add panelből).

Illessze be a komponens HTML kódját, például:

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

Kattintson a Save & Close gombra.

Oldalankénti egyedi kód

Ha csak bizonyos oldalakon szeretné használni a Wink-et, használja az oldalankénti kódbeágyazást az egész oldalra vonatkozó helyett:

Nyissa meg a céloldal Page Settings menüjét (fogaskerék ikon a Pages panelen).
Görgessen a Custom Code → Before </body> tag szekcióhoz.
Illessze be ugyanazt a szkriptet és alkalmazás betöltőt, mint fent.
Mentse el az oldal beállításait.

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>`	Úti cél keresőmező
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 lásd a Web Components oldalt.