Στοιχεία Ιστού
Στοιχεία Ιστούείναι ένα πρότυπο που σας επιτρέπει να ενσωματώσετε ολόκληρες λειτουργίες Javascript στον ιστότοπό σας χωρίς να γνωρίζετε πώς να γράφετε κώδικα. Χάρη σε αυτήν την εντυπωσιακή τεχνολογία, σας επιτρέπει να ενσωματώσετε το απόθεμα ταξιδιών Wink με πολύ μικρή δυσκολία. Αυτό το άρθρο σας καθοδηγεί στη συλλογή μας από στοιχεία ιστού και σας δείχνει πώς να τα χρησιμοποιείτε.
Ενσωμάτωση Wink
Section titled “Ενσωμάτωση Wink”Υπάρχουν τρία πράγματα που πρέπει να συμπεριλάβετε σε οποιαδήποτε σελίδα όπου θέλετε να εμφανίσετε ένα από τα στοιχεία ιστού μας.
- Συμπεριλάβετε το φύλλο στυλ μας.
- Συμπεριλάβετε την Javascript μας.
- Συμπεριλάβετε το πρόγραμμα φόρτωσης εφαρμογών μας.
Φύλλο στυλ
Section titled “Φύλλο στυλ”Συμπεριλάβετε τα στυλ CSS μας στην κεφαλίδα του εγγράφου σας.
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Συμπεριλάβετε την Javascript μας στο κάτω μέρος του εγγράφου σας. ( (Συμπεριλάβετε την Javascript μας στο κάτω μέρος του εγγράφου σας.)Συνιστούμε την ετικέτα ακριβώς πάνω από το τέλος του σώματος).
<html> <body> <script src="https://elements.wink.travel/elements.js" type="module" defer></script> </body></html>
Ο ιστότοπός σας είναι πλέον έτοιμος και μπορεί να εμφανίσει τα στοιχεία ιστού μας.
Στοιχεία
Section titled “Στοιχεία”Διαβάστε παρακάτω για τη βιβλιοθήκη στοιχείων μας.
Πρόγραμμα φόρτωσης εφαρμογών
Section titled “Πρόγραμμα φόρτωσης εφαρμογών”Ο φορτωτής είναι υπεύθυνος για τη διατήρηση της κατάστασης και τη διαχείριση της αλληλεπίδρασης μεταξύ των στοιχείων μας. (Συμπεριλάβετέ το κάτω από το 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 “Πρόγραμμα φόρτωσης περιεχομένου”Το πρόγραμμα φόρτωσης περιεχομένου βρίσκεται στην καρδιά της βιβλιοθήκης στοιχείων ιστού μας. Είναι υπεύθυνο για την εμφάνιση του αποθέματός σας (κάρτες, πλέγματα, χάρτες).
Διαθέσιμα χαρακτηριστικά:
- σχέδιο
- ταυτότητα
- είδος
Το χαρακτηριστικό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>
Δείγματα μπορούν να βρεθούν γιακαρτέλλες,πλέγματακαιχάρτες.
Αναζήτηση
Section titled “Αναζήτηση”Η Αναζήτηση λειτουργεί άψογα σε συνδυασμό με ένα από τα πλέγματα κατάταξης. Επιτρέπει στους χρήστες σας να αναζητούν ξενοδοχείο και προορισμό και το πλέγμα ενημερώνεται ως απόκριση στο αποτέλεσμα αναζήτησής τους.
<html> <body> <wink-lookup></wink-lookup> </body></html>
Κάνοντας κλικ στο παραπάνω στοιχείο ανοίγει ένα modal που σας επιτρέπει να πληκτρολογήσετε τον προορισμό ή το ξενοδοχείο που αναζητάτε.
Δρομολόγιο
Section titled “Δρομολόγιο”Το κουμπί δρομολογίου εμφανίζει το τρέχον δρομολόγιο στο κουμπί. Όταν κάνετε κλικ σε αυτό, εμφανίζεται ο πλήρης επιλογέας δρομολογίου ως modal.
<html> <body> <wink-itinerary></wink-itinerary> </body></html>
Κάνοντας κλικ στο παραπάνω κουμπί ανοίγει μια λειτουργία που σας επιτρέπει να ενημερώσετε το δρομολόγιό σας.
Ερευνα
Section titled “Ερευνα”Η αναζήτηση είναι ένα κουμπί που εμφανίζεται μόνο με εικονίδιο του επιλογέα δρομολογίου. Όταν κάνετε κλικ σε αυτό, εμφανίζεται ολόκληρο το κουμπί επιλογής δρομολογίου ως modal.
<html> <body> <wink-search></wink-search> </body></html>
Κάνοντας κλικ στο παραπάνω κουμπί ανοίγει μια λειτουργία που σας επιτρέπει να ενημερώσετε το δρομολόγιό σας.
Μορφή δρομολογίου
Section titled “Μορφή δρομολογίου”Το στοιχείο δρομολογίου εμφανίζει μια φόρμα δρομολογίου με την οποία οι χρήστες μπορούν να αλληλεπιδράσουν.
<html> <body> <wink-itinerary-form></wink-itinerary-form> </body></html>
Αλλάζοντας το δρομολόγιο, σε οποιοδήποτε στοιχείο του δρομολογίου μας, ενεργοποιείται το συμβάν ενημέρωσης δρομολογίου σε οποιοδήποτε απόθεμα που εμφανίζεται αυτήν τη στιγμή στη σελίδα.
Λογαριασμός
Section titled “Λογαριασμός”Το κουμπί λογαριασμού σάς επιτρέπει να προσθέσετε έλεγχο ταυτότητας Wink στον ιστότοπό σας.
<html> <body> <wink-account></wink-account> </body></html>
Κάνοντας κλικ στο κουμπί, όταν ο χρήστης δεν έχει πιστοποιηθεί, θα προωθηθεί ο χρήστης για πιστοποίηση. Όταν ο χρήστης πιστοποιηθεί, εμφανίζεται το εικονίδιο προφίλ του.
Όταν κάνετε κλικ στο κουμπί, ανοίγει το αναπτυσσόμενο μενού που αφορά τον χρήστη.
Ενσωμάτωση TripPay
Section titled “Ενσωμάτωση TripPay”Υπάρχουν δύο πράγματα που πρέπει να συμπεριλάβετε σε οποιαδήποτε σελίδα όπου θέλετε να χρησιμοποιήσετε το στοιχείο ιστού πληρωμών TripPay.
- Συμπεριλάβετε το φύλλο στυλ μας.
- Συμπεριλάβετε την Javascript μας.
Φύλλο στυλ
Section titled “Φύλλο στυλ”Συμπεριλάβετε τα στυλ CSS μας στην κεφαλίδα του εγγράφου σας.
<html> <head> <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link> </head></html>
Javascript
Section titled “Javascript”Συμπεριλάβετε την Javascript μας στο κάτω μέρος του εγγράφου σας. ( (Συμπεριλάβετε την Javascript μας στο κάτω μέρος του εγγράφου σας.)Συνιστούμε την ετικέτα ακριβώς πάνω από το τέλος του σώματος).
<html> <body> <script src="https://elements.trippay.io/elements.js" type="module" defer></script> </body></html>
Ο ιστότοπός σας είναι πλέον έτοιμος και μπορεί να εμφανίσει τα στοιχεία ιστού μας.
Στοιχεία
Section titled “Στοιχεία”Πληρωμή
Section titled “Πληρωμή”Το στοιχείο πληρωμής σάς επιτρέπει να ενημερώσετε το TripPay ότι ένας ταξιδιώτης θέλει να αγοράσει κάτι, καθώς και τους κανόνες και τις τιμές για αυτά τα είδη.
Υπάρχει ένα απαιτούμενο χαρακτηριστικό για το γραφικό στοιχείο:
id
Το αναγνωριστικό της σύμβασης κράτησης που θέλετε να εκτελεστεί.
<html> <body> <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay> </body></html>
:::σημείωση
Για να μάθετε πώς να δημιουργήσετε τη σύμβαση κράτησηςid
, διαβάστε τον οδηγό:Ενσωμάτωση με το TripPay. :::
Το γραφικό στοιχείο προετοιμάζει τη σύμβαση για εκτέλεση και εμφανίζει λεπτομέρειες πληρωμής(Σχήμα 1)στον χρήστη για την οριστικοποίηση της κράτησης.