Web Components

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

Ενσωμάτωση Wink

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

Συμπεριλάβετε το φύλλο στυλ μας.
Συμπεριλάβετε το Javascript μας.
Συμπεριλάβετε τον φορτωτή εφαρμογής μας.

Φύλλο στυλ

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

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

Javascript

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

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

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

Components

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

Φορτωτής εφαρμογής

Ο φορτωτής είναι υπεύθυνος για τη διατήρηση της κατάστασης και τη διαχείριση της αλληλεπίδρασης μεταξύ των 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>

Φορτωτής περιεχομένου

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

Διαθέσιμα χαρακτηριστικά:

layout
id
sort

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

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

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

Διαθέσιμοι τύποι ταξινόμησης:

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>

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

Αναζήτηση

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

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

Lookup web component — *Web component Αναζήτησης*

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

Lookup modal — *Παράθυρο Αναζήτησης με αποτελέσματα*

Δρομολόγιο

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

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

Web component Δρομολογίου

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

Search modal — *Επιλογέας δρομολογίου ως παράθυρο*

Αναζήτηση

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

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

Search web component — *Web component Αναζήτησης*

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

Φόρμα δρομολογίου

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

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

Itinerary formweb component — *Web component φόρμας δρομολογίου*

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

Λογαριασμός

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

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

Account web component — *Web component κουμπιού λογαριασμού*

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

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

Ενσωμάτωση TripPay

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

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

Φύλλο στυλ

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

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

Javascript

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

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

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

Components

Πληρωμή

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

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

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

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

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

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

Σφάλματα

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

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

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

Αφαιρέθηκε

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

Προσαρμογή

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

Εφαρμογή

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