İçeriğe geç
Academy

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 kullanacağınızı gösterir.

Wink’i Yerleştirme

Section titled “Wink’i Yerleştirme”

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

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

Stil Sayfası

Section titled “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

Section titled “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österebilecek durumda.

Bileşenler

Section titled “Bileşenler”

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

Uygulama Yükleyicisi

Section titled “Uygulama Yükleyicisi”

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ükleyicisi

Section titled “İçerik Yükleyicisi”

İçerik yükleyici, web bileşenleri 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 kullanılabilir. 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 sıralama 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

Section titled “Arama”

Arama, sıralı ızgaralarınızdan biriyle birlikte çok iyi çalışır. Kullanıcılarınızı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.

Lookup modal
Sonuçlarla Lookup modalı

Seyahat Planı

Section titled “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>
Itinerary web component
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

Section titled “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.

Search modal
Modal olarak seyahat planı seçici

Seyahat Planı Formu

Section titled “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 şu anda görüntülenen envantere seyahat planı güncelleme etkinliği tetikler.

Hesap

Section titled “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.

Account button when authenticated
Hesap butonu (kimlik doğrulanmış) web bileşeni

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

Account button when authenticated
Hesap butonu (açık) web bileşeni

TripPay’i Yerleştirme

Section titled “TripPay’i Yerleştirme”

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

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

Stil Sayfası

Section titled “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

Section titled “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österebilecek durumda.

Bileşenler

Section titled “Bileşenler”

Ödeme

Section titled “Ödeme”

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

Bileşenin bir zorunlu özniteliği vardır:

  • id Gerçekleştirilmesini istediğiniz rezervasyon sözleşmesinin tanımlayıcısı.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Bileşen, sözleşmeyi yürütmeye 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

Section titled “Hatalar”

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

Kullanılabilirlik

Section titled “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ış

Section titled “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

Section titled “Ö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

Section titled “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 kullanarak Web Bileşenlerimizi yerleştirin.