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ştirebilirsiniz. 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. (Bunu </body> kapanış etiketinden hemen önce yapmanızı ö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 edinebilirsiniz.

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

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

Kullanılabilir öznitelikler:

layout
id
sort

sort özniteliği yalnızca RANKED düzeni kullanıldığında ve mevcut bir sıralı ızgara kullanılmak istenmediğinde geçerlidir. Bu durumlarda id boş bırakılmalıdır.

Kullanılabilir düzen türleri:

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

Kullanılabilir 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 (Lookup)

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

Seyahat Planı (Itinerary)

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üncellemenizi sağlayan bir modal açar.

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

Arama (Search)

Arama, seyahat planı seçicisinin sadece ikon 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üncellemenizi sağlayan 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ı için 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. (Bunu </body> kapanış etiketinden hemen önce yapmanızı ö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.

Bileşenin zorunlu bir ö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 üzerinde veya kendi web sitenizde yerleştirirken bir hata mesajı ile karşılaşırsanız, aşağıdaki birkaç şey yanlış gitmiş olabilir:

Kullanılabilirlik

Envanter artık kullanılamıyor 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österilir. 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österilir. 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.