Web Bileşenleri

Web Bileşenleri, kodlama bilmeden tüm Javascript özelliklerini web sitenize entegre etmenizi sağlayan bir standarttır. Bu harika teknoloji sayesinde, Wink seyahat envanterini çok az zahmetle sitenize yerleştirmenize olanak tanır. Bu makale, web bileşenleri koleksiyonumuzu adım adım anlatır ve nasıl kullanılacağını gösterir.

Wink’i Yerleştirme

Web bileşenlerimizden birini göstermek istediğiniz herhangi bir sayfaya dahil etmeniz gereken üç şey vardır.

Stil sayfamızı dahil edin.
Javascript’imizi dahil edin.
Uygulama yükleyicimizi dahil edin.

Stil Sayfası

CSS stillerimizi belgenizin head bölümüne ekleyin.

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

Javascript

Javascript’imizi belgenizin en altına ekleyin. (</body> kapanış etiketinden hemen önce eklemenizi öneririz).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Artık siteniz web bileşenlerimizi göstermek için hazırdır.

Bileşenler

Aşağıda bileşen kütüphanemiz hakkında bilgi edinin.

Uygulama Yükleyici

Yükleyici, durumun korunmasından ve bileşenlerimiz arasındaki etkileşimin yönetilmesinden sorumludur. (Javascript’imizin altına ekleyin).

<html>
  <body>
    <wink-app-loader
      client-id="BURAYA MÜŞTERİ KİMLİĞİNİZİ GİRİN"
      configuration-id="BURAYA ÖZELLEŞTİRME KİMLİĞİNİZİ GİRİN"
    ></wink-app-loader>
  </body>
</html>

İçerik Yükleyici

İçerik yükleyici, web bileşeni kütüphanemizin kalbidir. Envanterinizi (kartlar, ızgaralar, haritalar) görüntülemekten sorumludur.

Mevcut öznitelikler:

layout
id
sort

sort özniteliği yalnızca layout RANKED olduğunda ve mevcut bir sıralı ızgara kullanmak istemediğinizde geçerlidir. Bu durumlarda id boş bırakılmalıdır.

Mevcut layout türleri:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Mevcut sort türleri:

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

Örnekler için kartlar, ızgaralar ve haritalar sayfalarına bakabilirsiniz.

Arama

Arama, sıralı ızgaralarınızdan biriyle birlikte çok iyi çalışır. Kullanıcıların otel ve destinasyon araması yapmasına olanak tanır ve ızgara arama sonuçlarına göre güncellenir.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Lookup web component — *Lookup web bileşeni*

Yukarıdaki bileşene tıklamak, aradığınız destinasyon veya oteli yazabileceğiniz bir modal açar.

Seyahat Planı

Seyahat planı butonu, buton üzerinde mevcut seyahat planını gösterir. Tıkladığınızda, tam seyahat planı seçici bir modal olarak açılır.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Seyahat planı web bileşeni

Yukarıdaki butona tıklamak, seyahat planınızı güncellemenize olanak tanıyan bir modal açar.

Search modal — *Modal olarak seyahat planı seçici*

Arama Butonu

Arama, seyahat planı seçicisinin sadece ikonlu bir butonudur. Tıkladığınızda, tam seyahat planı seçici modal olarak açılır.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Search web component — *Arama web bileşeni*

Yukarıdaki butona tıklamak, seyahat planınızı güncellemenize olanak tanıyan bir modal açar.

Seyahat Planı Formu

Seyahat planı bileşeni, kullanıcıların etkileşimde bulunabileceği bir seyahat planı formu gösterir.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *Seyahat planı formu web bileşeni*

Seyahat planını, herhangi bir seyahat planı bileşenimizde değiştirmek, sayfada görüntülenen envanterin güncellenmesi için seyahat planı güncelleme olayını tetikler.

Hesap

Hesap butonu, sitenize Wink kimlik doğrulamasını eklemenizi sağlar.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *Hesap butonu web bileşeni*

Butona tıklamak, kullanıcı kimlik doğrulaması yapılmamışsa kullanıcıyı kimlik doğrulaması yapmaya yönlendirir. Kullanıcı kimlik doğrulaması yaptıysa, kullanıcının profil simgesini gösterir.

Butona tıkladığınızda, kullanıcıya özel açılır menü açılır.

TripPay’i Yerleştirme

TripPay ödeme web bileşenini kullanmak istediğiniz herhangi bir sayfaya dahil etmeniz gereken iki şey vardır.

Stil sayfamızı dahil edin.
Javascript’imizi dahil edin.

Stil Sayfası

CSS stillerimizi belgenizin head bölümüne ekleyin.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Javascript’imizi belgenizin en altına ekleyin. (<body> kapanış etiketinden hemen önce eklemenizi öneririz).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Artık siteniz web bileşenlerimizi göstermek için hazırdır.

Bileşenler

Ödeme

Ödeme bileşeni, TripPay’e bir yolcunun bir şey satın almak istediğini ve bu öğeler için kurallar ile fiyatları bildirmenizi sağlar.

Widget için bir zorunlu öznitelik vardır:

id Gerçekleştirmek istediğiniz rezervasyon sözleşmesinin tanımlayıcısı.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Widget, sözleşmeyi yürütmek için hazırlar ve kullanıcıya rezervasyonu tamamlaması için ödeme detaylarını (Şekil 1) gösterir.

Payment details — *Şekil 1. Örnek ödeme formu*

Hatalar

WinkLinks’te veya kendi web sitenizde web bileşenlerimizden birini yerleştirirken bir hata mesajı alırsanız, birkaç olası sorun olabilir:

Kullanılabilirlik

Envanter artık mevcut olmayabilir. Wink Studio sayfasına gidin ve “kart” durumunun kullanılabilir olup olmadığını kontrol edin. Eğer değilse, kırmızı olarak görünecektir. Bu durumda, tedarikçi tekrar kullanılabilir hale getirebilir veya listenizden kaldırabilirsiniz.

Kaldırılmış

Envanter kaldırılmış olabilir. Wink Studio sayfasına gidin ve “kart” durumunun kullanılabilir olup olmadığını kontrol edin. Eğer değilse, kırmızı olarak görünecektir. Bu durumda, tedarikçi tekrar kullanılabilir hale getirebilir veya listenizden kaldırabilirsiniz.

Özelleştirme

Envanterinizle birlikte tanımladığınız özelleştirmeyi yanlışlıkla kaldırmış olabilirsiniz. Özelleştirmenin hala mevcut olduğundan emin olun ve eksikse yeni bir tane ayarlayın.

Uygulama

Bu sadece web geliştiricileri içindir. Eğer yanlışlıkla Uygulama kaldırıldıysa ve müşteri kimliği artık mevcut değilse, lütfen yeni bir uygulama oluşturun ve yeni müşteri kimliğini Web Bileşenlerimizi yerleştirmek için kullanın.