Skip to content
Academy

Web Components

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

Ενσωμάτωση Wink

Section titled “Ενσωμάτωση Wink”

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

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

Φύλλο στυλ

Section titled “Φύλλο στυλ”

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

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

Javascript

Section titled “Javascript”

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

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

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

Components

Section titled “Components”

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

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

Section titled “Φορτωτής εφαρμογής”

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

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

Section titled “Φορτωτής περιεχομένου”

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

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

Αναζήτηση

Section titled “Αναζήτηση”

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

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>
Lookup web component
Web component Αναζήτησης

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

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

Δρομολόγιο

Section titled “Δρομολόγιο”

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

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>
Itinerary web component
Web component Δρομολογίου

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

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

Αναζήτηση

Section titled “Αναζήτηση”

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

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>
Search web component
Web component Αναζήτησης

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

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

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

Section titled “Φόρμα δρομολογίου”

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

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>
Itinerary formweb component
Web component φόρμας δρομολογίου

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

Λογαριασμός

Section titled “Λογαριασμός”

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

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>
Account web component
Web component κουμπιού λογαριασμού

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

Account button when authenticated
Web component κουμπιού λογαριασμού (αυθεντικοποιημένος)

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

Account button when authenticated
Web component κουμπιού λογαριασμού (ανοιχτό)

Ενσωμάτωση TripPay

Section titled “Ενσωμάτωση TripPay”

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

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

Φύλλο στυλ

Section titled “Φύλλο στυλ”

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

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

Javascript

Section titled “Javascript”

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

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

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

Components

Section titled “Components”

Πληρωμή

Section titled “Πληρωμή”

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

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

  • id Το αναγνωριστικό του συμβολαίου κράτησης που θέλετε να εκτελεστεί.
<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

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

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

Σφάλματα

Section titled “Σφάλματα”

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

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

Section titled “Διαθεσιμότητα”

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

Αφαιρέθηκε

Section titled “Αφαιρέθηκε”

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

Προσαρμογή

Section titled “Προσαρμογή”

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

Εφαρμογή

Section titled “Εφαρμογή”

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