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

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> etiketinin hemen üstüne eklemenizi öneririz).

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

Siteniz artık hazır ve web bileşenlerimizi gösterebilir.

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ş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 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 (Lookup)

Arama, sıralı ızgaralarınızdan biriyle harika ç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 — *Arama 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 arama modalı*

Seyahat Planı (Itinerary)

Seyahat planı butonu, buton üzerinde mevcut seyahat planını gösterir. Tıkladığınızda, tam seyahat planı seçici 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 (Search)

Arama, seyahat planı seçicinin sadece ikonlu 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 şu anda görüntülenen envanter 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ı almaya 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> etiketinin hemen üstüne eklemenizi öneririz).

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

Siteniz artık hazır ve web bileşenlerimizi gösterebilir.

Bileşenler

Ö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ştirmek 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

Web bileşenlerimizden birini WinkLinks’te veya kendi web sitenizde yerleştirirken bir hata mesajı ile karşılaşı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 kullanarak Web Bileşenlerimizi yerleştirin.