Web Components

Web Components είναι ένα πρότυπο που σας επιτρέπει να ενσωματώσετε ολόκληρες λειτουργίες Javascript στον ιστότοπό σας χωρίς να χρειάζεται να ξέρετε προγραμματισμό. Χάρη σε αυτήν την υπέροχη τεχνολογία, σας επιτρέπει να ενσωματώσετε το Wink travel inventory με πολύ λίγη προσπάθεια. Αυτό το άρθρο σας καθοδηγεί μέσα από τη συλλογή των web components μας και σας δείχνει πώς να τα χρησιμοποιήσετε.

Ενσωμάτωση Wink

Υπάρχουν τρία πράγματα που πρέπει να συμπεριλάβετε σε κάθε σελίδα όπου θέλετε να εμφανίσετε ένα από τα web components μας.

Συμπεριλάβετε το stylesheet μας.
Συμπεριλάβετε το Javascript μας.
Συμπεριλάβετε τον application loader μας.

Stylesheet

Συμπεριλάβετε τα CSS στυλ μας στο head του εγγράφου σας.

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

Javascript

Συμπεριλάβετε το Javascript μας στο κάτω μέρος του εγγράφου σας. (Συνιστούμε ακριβώς πάνω από το τέλος του </body> tag).

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

Ο ιστότοπός σας είναι τώρα έτοιμος και μπορεί να εμφανίσει τα web components μας.

Components

Διαβάστε για τη βιβλιοθήκη των components μας παρακάτω.

Application loader

Ο loader είναι υπεύθυνος για τη διατήρηση της κατάστασης και τη διαχείριση της αλληλεπίδρασης μεταξύ των components μας. (Συμπεριλάβετε το κάτω από το Javascript μας).

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

Content loader

Ο content loader είναι η καρδιά της βιβλιοθήκης web components μας. Είναι υπεύθυνος για την εμφάνιση του inventory σας (κάρτες, πλέγματα, χάρτες).

Διαθέσιμα attributes:

layout
id
sort

Το attribute sort είναι διαθέσιμο μόνο όταν το layout είναι RANKED και δεν θέλετε να χρησιμοποιήσετε ένα υπάρχον ranked grid. Σε αυτές τις περιπτώσεις, αφήστε το id κενό.

Διαθέσιμοι τύποι layout:

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

Διαθέσιμοι τύποι sort:

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>

Δείγματα μπορείτε να βρείτε για κάρτες, πλέγματα και χάρτες.

Lookup

Το Lookup λειτουργεί εξαιρετικά μαζί με ένα από τα ranked grids σας. Επιτρέπει στους χρήστες σας να αναζητούν ξενοδοχείο και προορισμό και το πλέγμα ενημερώνεται ανάλογα με το αποτέλεσμα της αναζήτησης.

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

Κάνοντας κλικ στο component παραπάνω ανοίγει ένα modal που σας επιτρέπει να πληκτρολογήσετε τον προορισμό ή το ξενοδοχείο που αναζητάτε.

Itinerary

Το κουμπί itinerary εμφανίζει το τρέχον δρομολόγιο στο κουμπί. Όταν το πατήσετε, ο πλήρης επιλογέας δρομολογίου εμφανίζεται ως modal.

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

Itinerary web component

Κάνοντας κλικ στο κουμπί παραπάνω ανοίγει ένα modal που σας επιτρέπει να ενημερώσετε το δρομολόγιό σας.

Search

Το Search είναι ένα κουμπί μόνο με εικονίδιο του επιλογέα δρομολογίου. Όταν το πατήσετε, ο πλήρης επιλογέας δρομολογίου εμφανίζεται ως modal.

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

Κάνοντας κλικ στο κουμπί παραπάνω ανοίγει ένα modal που σας επιτρέπει να ενημερώσετε το δρομολόγιό σας.

Itinerary form

Το component itinerary εμφανίζει μια φόρμα δρομολογίου με την οποία οι χρήστες μπορούν να αλληλεπιδράσουν.

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

Itinerary formweb component — *Itinerary form web component*

Αλλάζοντας το δρομολόγιο, σε οποιοδήποτε από τα components itinerary, ενεργοποιεί το event ενημέρωσης δρομολογίου σε οποιοδήποτε inventory εμφανίζεται αυτή τη στιγμή στη σελίδα.

Account

Το κουμπί account σας επιτρέπει να προσθέσετε την αυθεντικοποίηση Wink στον ιστότοπό σας.

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

Account web component — *Account button web component*

Κάνοντας κλικ στο κουμπί, όταν ο χρήστης δεν είναι αυθεντικοποιημένος, θα προωθηθεί για να αυθεντικοποιηθεί. Όταν ο χρήστης είναι αυθεντικοποιημένος, εμφανίζει το εικονίδιο προφίλ του χρήστη.

Όταν κάνετε κλικ στο κουμπί, ανοίγει το dropdown ειδικά για τον χρήστη.

Ενσωμάτωση TripPay

Υπάρχουν δύο πράγματα που πρέπει να συμπεριλάβετε σε κάθε σελίδα όπου θέλετε να χρησιμοποιήσετε το web component πληρωμών TripPay.

Συμπεριλάβετε το stylesheet μας.
Συμπεριλάβετε το Javascript μας.

Stylesheet

Συμπεριλάβετε τα CSS στυλ μας στο head του εγγράφου σας.

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

Javascript

Συμπεριλάβετε το Javascript μας στο κάτω μέρος του εγγράφου σας. (Συνιστούμε ακριβώς πάνω από το τέλος του <body> tag).

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

Ο ιστότοπός σας είναι τώρα έτοιμος και μπορεί να εμφανίσει τα web components μας.

Components

Payment

Το component πληρωμής σας επιτρέπει να ενημερώσετε το TripPay ότι ένας ταξιδιώτης θέλει να αγοράσει κάτι και τους κανόνες και τις τιμές για αυτά τα αντικείμενα.

Υπάρχει ένα υποχρεωτικό attribute για το widget:

id Το αναγνωριστικό του συμβολαίου κράτησης που θέλετε να εκτελεστεί.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Το widget προετοιμάζει το συμβόλαιο για εκτέλεση και εμφανίζει τις λεπτομέρειες πληρωμής (Εικόνα 1) στον χρήστη για να ολοκληρώσει την κράτηση.

Payment details — *Εικόνα 1. Δείγμα φόρμας πληρωμής*

Σφάλματα

Αν λάβετε μήνυμα σφάλματος κατά την ενσωμάτωση ενός από τα web components μας, είτε στο WinkLinks είτε στον δικό σας ιστότοπο, υπάρχουν μερικά πράγματα που μπορεί να έχουν πάει λάθος:

Διαθεσιμότητα

Το inventory μπορεί να μην είναι πλέον διαθέσιμο. Μεταβείτε στο Studio και ελέγξτε αν η κατάσταση της “κάρτας” είναι διαθέσιμη. Αν δεν είναι, θα εμφανιστεί με κόκκινο χρώμα. Σε αυτή την περίπτωση, μπορείτε να περιμένετε και ίσως ο προμηθευτής το κάνει ξανά διαθέσιμο ή να το αφαιρέσετε από τη λίστα σας.

Αφαιρέθηκε

Το inventory μπορεί να έχει αφαιρεθεί. Μεταβείτε στο Studio και ελέγξτε αν η κατάσταση της “κάρτας” είναι διαθέσιμη. Αν δεν είναι, θα εμφανιστεί με κόκκινο χρώμα. Σε αυτή την περίπτωση, μπορείτε να περιμένετε και ίσως ο προμηθευτής το κάνει ξανά διαθέσιμο ή να το αφαιρέσετε από τη λίστα σας.

Προσαρμογή

Μπορεί να έχετε καταλάθος αφαιρέσει την προσαρμογή που έχετε ορίσει να συνοδεύει το inventory σας. Βεβαιωθείτε ότι η προσαρμογή είναι ακόμα διαθέσιμη και ορίστε μια νέα αν λείπει.

Εφαρμογή

Αυτό αφορά μόνο προγραμματιστές ιστού. Αν καταλάθος αφαιρέσατε την Εφαρμογή· κάνοντας το client ID μη διαθέσιμο, παρακαλούμε δημιουργήστε μια νέα εφαρμογή και χρησιμοποιήστε το νέο client ID για να ενσωματώσετε τα Web Components μας.