Web Bileşenleri

Web Bileşenlerikodlamayı bilmeden tüm Javascript özelliklerini web sitenize entegre etmenizi sağlayan bir standarttır. Bu harika teknoloji sayesinde, Wink seyahat envanterini çok az uğraşla yerleştirmenizi sağlar. Bu makale sizi web bileşenleri koleksiyonumuzda gezdirir ve bunları nasıl kullanacağınızı gösterir.

Göz kırpmayı yerleştir

Web bileşenlerimizden birini görüntülemek istediğiniz herhangi bir sayfaya eklemeniz gereken üç şey vardır.

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

Stil sayfası

Belgenizin başlığına CSS stillerimizi ekleyin.

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

Javascript

Belgenizin en altına Javascript’imizi ekleyin.Son gövde etiketinin hemen üstüne koymanızı ö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örüntüleyebilir.

Bileşenler

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

Uygulama yükleyici

Yükleyici, bileşenlerimiz arasındaki durumu korumaktan ve etkileşimi yönetmekten sorumludur.Bunu Javascript’imizin altına ekleyin).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

İçerik yükleyici

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

Mevcut nitelikler:

düzen
İD
düzenlemek

Özniteliksortyalnızca düzen mevcut olduğunda kullanılabilirRANKEDve mevcut bir sıralı ızgarayı kullanmak istemezsiniz. Bu durumlar için, bırakınid boş.

Mevcut düzen 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 şunlar bulunabilir:kartlar,ızgaralar Ve haritalar.

Bakmak

Lookup, sıralanmış ızgaralarınızdan biriyle birlikte harika çalışır. Kullanıcılarınızın otel ve varış noktası aramasına ve ızgaranın arama sonuçlarına yanıt olarak güncellenmesine olanak tanır.

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

Yukarıdaki bileşene tıkladığınızda aradığınız varış noktasını veya oteli yazmanıza olanak tanıyan bir modal açılır.

Arama modali — *Sonuçları olan arama modali*

Gezi Planı

Seyahat planı düğmesi, düğmedeki geçerli seyahat planını gösterir. Tıkladığınızda, tam seyahat planı seçici bir modal olarak görüntülenir.

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

Seyahat planı web bileşeni

Yukarıdaki butona tıkladığınızda seyahat planınızı güncellemenize olanak tanıyan bir pencere açılacaktır.

Arama modalı — *Modal olarak güzergah seçici*

Aramak

Arama, güzergah seçicinin yalnızca simgesel bir düğmesidir. Tıkladığınızda, tam güzergah seçici bir modal olarak görüntülenir.

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

Yukarıdaki butona tıkladığınızda seyahat planınızı güncellemenize olanak tanıyan bir pencere açılacaktır.

Gezi planı formu

Seyahat planı bileşeni, kullanıcıların etkileşime girebileceği bir seyahat planı formu görüntüler.

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

Seyahat formu web bileşeni — *Seyahat planı formu web bileşeni*

Seyahat planımızı herhangi bir seyahat planı bileşenimizde değiştirdiğinizde, sayfada şu anda görüntülediğiniz herhangi bir envanter için seyahat planı güncelleme olayı tetiklenir.

Hesap

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

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

Hesap web bileşeni — *Hesap düğmesi web bileşeni*

Kullanıcının kimliği doğrulanmamışken butona tıklandığında, kullanıcı doğrulanmaya yönlendirilir. Kullanıcı doğrulandığında, kullanıcının profil simgesi görüntülenir.

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

TripPay’i yerleştir

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

Stil sayfamızı ekleyin.
Javascript’imizi ekleyin.

Stil sayfası

Belgenizin başlığına CSS stillerimizi ekleyin.

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

Javascript

Belgenizin en altına Javascript’imizi ekleyin.Son gövde etiketinin hemen üstüne koymanızı ö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örüntüleyebilir.

Bileşenler

Ödeme

Ödeme bileşeni, bir gezginin bir şey satın almak istediğini ve bu öğelere ilişkin kuralları ve fiyatları TripPay’e bildirmenizi sağlar.

Widget’a eklenmesi gereken bir özellik var:

idGerç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>

Rezervasyon sözleşmesinin nasıl oluşturulacağını öğrenmek içinid, kılavuzu okuyun:TripPay ile entegrasyon.

Widget, sözleşmeyi yürürlüğe koymaya hazırlar ve ödeme ayrıntılarını görüntüler(Şekil 1)Rezervasyonu tamamlamak için kullanıcıya.

Ödeme detayları — *Şekil 1. Örnek ödeme formu*