Squarespace
Squarespace suportă HTML și JavaScript personalizat, ceea ce înseamnă că poți încorpora orice componentă web Wink direct în site-ul tău fără un plugin. Acest ghid îți arată cum să încarci scripturile Wink la nivel de site și apoi să plasezi componente pe pagini individuale.
Încarcă scripturile Wink la nivel de site
Section titled “Încarcă scripturile Wink la nivel de site”Adăugarea scripturilor în footer-ul și header-ul global al site-ului înseamnă că Wink este disponibil pe fiecare pagină fără a repeta configurarea.
- În editorul Squarespace, mergi la Settings → Advanced → Code Injection.
- În câmpul Header, adaugă stylesheet-ul:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- În câmpul Footer, adaugă scriptul și loader-ul aplicației (înlocuiește
YOUR_CLIENT_IDcu Client ID-ul tău Wink):<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ă o componentă pe o pagină
Section titled “Adaugă o componentă pe o pagină”Odată ce scripturile sunt încărcate global, poți plasa orice componentă Wink pe orice pagină folosind un Code Block.
- Deschide pagina pe care vrei să o editezi.
- Apasă Edit și adaugă un nou bloc Code acolo unde vrei să apară componenta.
- Lipește HTML-ul componentei, de exemplu un content loader:
<wink-content-loaderlayout="HOTEL"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Apasă Apply apoi Save.
Componente disponibile
Section titled “Componente disponibile”| Componentă | Tag HTML | Scop |
|---|---|---|
| Content loader | <wink-content-loader> | Afișează carduri, grile, hărți de hoteluri |
| Lookup | <wink-lookup> | Bară de căutare pentru destinații |
| Search button | <wink-search-button> | Deschide selectorul de itinerariu |
| Account button | <wink-account-button> | Autentificare / meniu utilizator |
| Itinerary button | <wink-itinerary-button> | Afișează itinerariul curent |
| Itinerary picker | <wink-itinerary-picker> | Formular complet pentru itinerariu |
| Shopping cart | <wink-shopping-cart-button> | Buton sumar coș de cumpărături |
Vezi Web Components pentru referința completă a atributelor fiecărei componente.