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
Section titled “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ı
Section titled “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
Section titled “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
Section titled “Bileşenler”Aşağıda bileşen kütüphanemiz hakkında bilgi edinebilirsiniz.
Uygulama yükleyici
Section titled “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
Section titled “İç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
Özniteliksort
yalnızca düzen mevcut olduğunda kullanılabilirRANKED
ve 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
Section titled “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.
Gezi Planı
Section titled “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>
Yukarıdaki butona tıkladığınızda seyahat planınızı güncellemenize olanak tanıyan bir pencere açılacaktır.
Aramak
Section titled “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
Section titled “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 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>
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
Section titled “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ı
Section titled “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
Section titled “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
Section titled “Bileşenler”Ö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:
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>
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.