İçeriğe geç

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.

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

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

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

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

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.

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

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, 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.

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>
Arama web bileşeni
Arama web bileşeni

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

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

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>
Web bileşenini ara
Web bileşenini ara

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

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 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.

Kimlik doğrulaması yapıldığında Hesap düğmesi
Hesap düğmesi (kimliği doğrulanmış) web bileşeni

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

Kimlik doğrulaması yapıldığında Hesap düğmesi
Hesap düğmesi (açık) web bileşeni

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

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

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

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

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.

Ö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