Skip to content

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

<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.

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

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

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

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