Squarespace

Squarespace, özel HTML ve JavaScript’i destekler; bu da herhangi bir Wink web bileşenini eklenti olmadan doğrudan sitenize gömebileceğiniz anlamına gelir. Bu rehber, Wink scriptlerini site genelinde nasıl yükleyeceğinizi ve ardından bileşenleri tek tek sayfalara nasıl yerleştireceğinizi gösterir.

Wink scriptlerini site genelinde yükleyin

Scriptleri sitenizin global footer ve header alanlarına eklemek, Wink’in her sayfada kurulumu tekrarlamadan kullanılmasını sağlar.

Squarespace editöründe Settings → Advanced → Code Injection bölümüne gidin.

Header alanına stil dosyasını ekleyin:

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

Footer alanına script ve uygulama yükleyicisini ekleyin (YOUR_CLIENT_ID yerine kendi Wink Client ID’nizi yazın):

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

Save butonuna tıklayın.

Bir sayfaya bileşen ekleyin

Scriptler global olarak yüklendikten sonra, herhangi bir Wink bileşenini istediğiniz sayfaya Code Block kullanarak ekleyebilirsiniz.

Düzenlemek istediğiniz sayfayı açın.
Edite tıklayın ve bileşenin görünmesini istediğiniz yere yeni bir Code bloğu ekleyin.

Örneğin bir içerik yükleyici HTML’sini yapıştırın:

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

Apply ardından Save butonlarına tıklayın.

Mevcut bileşenler

Bileşen	HTML etiketi	Amaç
İçerik yükleyici	`<wink-content-loader>`	Otel kartları, ızgaralar, haritalar gösterir
Arama	`<wink-lookup>`	Destinasyonlar için arama çubuğu
Arama butonu	`<wink-search-button>`	Seyahat planlayıcıyı açar
Hesap butonu	`<wink-account-button>`	Giriş / kullanıcı menüsü
Seyahat butonu	`<wink-itinerary-button>`	Mevcut seyahati gösterir
Seyahat seçici	`<wink-itinerary-picker>`	Tam seyahat formu
Alışveriş sepeti	`<wink-shopping-cart-button>`	Sepet özeti butonu

Her bileşenin tam özellik referansı için Web Components sayfasına bakabilirsiniz.