Στοιχεία Ιστού

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

Ενσωμάτωση Wink

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

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

Φύλλο στυλ

Συμπεριλάβετε τα στυλ CSS μας στην κεφαλίδα του εγγράφου σας.

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

Javascript

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

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

Ο ιστότοπός σας είναι πλέον έτοιμος και μπορεί να εμφανίσει τα στοιχεία ιστού μας.

Στοιχεία

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

Πρόγραμμα φόρτωσης εφαρμογών

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

Πρόγραμμα φόρτωσης περιεχομένου

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

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

σχέδιο
ταυτότητα
είδος

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

Διαθέσιμοι τύποι διάταξης:

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>

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

Τροπική αναζήτηση — *Τρόπος αναζήτησης με αποτελέσματα*

Δρομολόγιο

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

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

Στοιχείο ιστού δρομολογίου

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

Αναζήτηση ως τρόπου — *Επιλογή δρομολογίου ως μέσο*

Ερευνα

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

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

Μορφή δρομολογίου

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

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

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

Λογαριασμός

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

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

Στοιχείο ιστού λογαριασμού — *Στοιχείο ιστού κουμπιού λογαριασμού*

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

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

Ενσωμάτωση TripPay

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

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

Φύλλο στυλ

Συμπεριλάβετε τα στυλ CSS μας στην κεφαλίδα του εγγράφου σας.

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

Javascript

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

Ο ιστότοπός σας είναι πλέον έτοιμος και μπορεί να εμφανίσει τα στοιχεία ιστού μας.

Στοιχεία

Πληρωμή

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

Υπάρχει ένα απαιτούμενο χαρακτηριστικό για το γραφικό στοιχείο:

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

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

:::σημείωση Για να μάθετε πώς να δημιουργήσετε τη σύμβαση κράτησηςid, διαβάστε τον οδηγό:Ενσωμάτωση με το TripPay. :::

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

Στοιχεία πληρωμής — *Σχήμα 1. Δείγμα φόρμας πληρωμής*