Κάρτες

Μια κάρτα αντιπροσωπεύει έναν μεμονωμένο προμηθευτή (π.χ. ξενοδοχείο ή πάροχο εμπειριών) ή απόθεμα (δηλαδή τύπο δωματίου, αίθουσα συνεδριάσεων, σπα κ.λπ.) και εμφανίζει τις λεπτομέρειες μέσω μιας διαδραστικής, κρατήσιμης διεπαφής κάρτας. Ένας χρήστης μπορεί να αλληλεπιδράσει με μια κάρτα με τους εξής τρόπους:

Κάντε κλικ στο κουμπί Κράτηση.
Κάντε κλικ στον σύνδεσμο Gallery για να δείτε όλες τις φωτογραφίες και τα βίντεο για αυτό το απόθεμα.
Κάντε κλικ στον σύνδεσμο Best deal, αν υπάρχει, για να δείτε το δωμάτιο με την καλύτερη τιμή.
Κάντε κλικ στον σύνδεσμο Hotel details, αν υπάρχει, για να δείτε πληροφορίες για το κατάλυμα.

Μια κάρτα υποστηρίζει πολλαπλές όψεις για να ελαχιστοποιήσει το μέγεθος της κάρτας και να κατηγοριοποιήσει τα δεδομένα· καθιστώντας τα εύκολα κατανοητά από τον χρήστη και δίνοντάς σας μεγαλύτερη πιθανότητα να μετατρέψετε τον χρήστη σε κράτηση.

Μια κάρτα έχει είτε δύο είτε τρεις όψεις:

Μια κάρτα ξενοδοχείου δείχνει τα δεδομένα του καταλύματος στην εμπρόσθια όψη και τον καλύτερο τύπο δωματίου στην πίσω. Η τιμή, και στις δύο πλευρές, εμφανίζει την καλύτερη τιμή για το ξενοδοχείο.
Μια κάρτα τύπου δωματίου δείχνει τα δεδομένα του τύπου δωματίου στην εμπρόσθια όψη και τα δεδομένα του καταλύματος στην πίσω. Η τιμή εμφανίζει την τιμή του τύπου δωματίου στην εμπρόσθια και την καλύτερη τιμή για το ξενοδοχείο στην πίσω.
Όλες οι άλλες κάρτες (π.χ. σπα, εστιατόριο κ.λπ.) έχουν 3 όψεις. Παράδειγμα: Τα δεδομένα του σπα εμφανίζονται στην εμπρόσθια σελίδα με την καλύτερη τιμή του σπα. Τα δεδομένα τύπου δωματίου για το δωμάτιο με την καλύτερη τιμή βρίσκονται στη δεύτερη πλευρά. Τα δεδομένα του καταλύματος μαζί με το δωμάτιο με την καλύτερη τιμή βρίσκονται στην τρίτη όψη της κάρτας.

Card preview — *Εμπρόσθια όψη κάρτας τύπου δωματίου με διαθεσιμότητα*

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

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

Δημιουργία κάρτας

Actions — *Ενέργειες αποτελεσμάτων αναζήτησης*

Παραπάνω είναι μια εικόνα από το Search και σας δείχνει μερικά από τα πράγματα που μπορείτε να κάνετε με τα αποτελέσματα αναζήτησής σας. Μία από αυτές τις ενέργειες είναι το Make a card. Κάντε κλικ σε αυτό το κουμπί και θα ανακατευθυνθείτε στη σελίδα φόρμας κάρτας όπου μπορείτε να ξεκινήσετε να προσαρμόζετε την κάρτα σας.

Προσαρμογή κάρτας

Η φόρμα σας επιτρέπει να προσαρμόσετε την κάρτα σας με τους εξής τρόπους:

Δώστε της ένα όνομα για να θυμάστε τι αφορά η κάρτα.
Επιλέξτε την Customization που θέλετε να εφαρμόσετε σε αυτήν την κάρτα.
Επιλέξτε την αρχική όψη της κάρτας που θέλετε να δουν πρώτα οι χρήστες. Από προεπιλογή, είναι η εγγενής όψη αυτού του αποθέματος.
Επιλέξτε το badge που θέλετε να χρησιμοποιήσετε στην κάρτα. Ένα badge επιτρέπει στους χρήστες να συγκρίνουν αποθέματα με βάση ένα συνολικό μέτρο όπως το eco-friendly.
Προσθέστε λέξεις-κλειδιά, χωρισμένες με κόμμα, που θα χρησιμοποιηθούν από Web Crawlers.
Προσθέστε τίτλους και περιγραφές στις γλώσσες που θέλετε να δει ο χρήστης.
Επιλέξτε μία ή περισσότερες εικόνες που θα εμφανίζονται όταν οι χρήστες κάνουν κλικ στον σύνδεσμο Gallery.
Κάντε κλικ στο κουμπί Save για να συνεχίσετε.

Μετά την αποθήκευση της κάρτας σας, ανακατευθύνεστε στη σελίδα των καρτών σας και η κάρτα σας είναι πλέον έτοιμη να μοιραστεί με τον κόσμο.

Κοινή χρήση κάρτας

Card — *Κάρτα με συμπτυγμένο μενού ενεργειών*

Παραπάνω βλέπετε μια εικόνα με όλες τις διαθέσιμες ενέργειες για την κάρτα σας:

Update Ενημερώνει τη διαμόρφωση της κάρτας σας.
Add to WinkLinks Προσθέτει την κάρτα στον λογαριασμό σας στο WinkLinks.
Embed Σας δείχνει πώς να ενσωματώσετε αυτήν την κάρτα ως Card στον ιστότοπό σας.
Use with WordPress Σας δείχνει πώς να χρησιμοποιήσετε το WordPress plugin μας για να ενσωματώσετε αυτήν την κάρτα στον ιστότοπό σας.

Καλύπτουμε μερικές από αυτές τις επιλογές, με περισσότερες λεπτομέρειες, παρακάτω.

Ενσωμάτωση

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>

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

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Ακολουθεί πώς να ενσωματώσετε την κάρτα σας στον ιστότοπό σας:

Η γραμμή 3 σας δείχνει πώς να ενσωματώσετε τα στυλ Wink στον ιστότοπό σας.
Οι γραμμές 6 έως 9 σας δείχνουν πώς να χρησιμοποιήσετε το wink-content-loader Web Component και να του πείτε να φορτώσει μια κάρτα δωματίου επισκέπτη για τον κωδικό σας.
Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε το Javascript μας στον ιστότοπό σας.
Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε το wink-app-loader Web Component και να του πείτε να φορτώσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

API

Οι προγραμματιστές που θέλουν να διαχειριστούν κάρτες μπορούν να μεταβούν στο Developers > API > Inventory.

Περαιτέρω ανάγνωση

Μάθετε περισσότερα για τη συλλογή μας από Web Components.
Μάθετε περισσότερα για το Wink WordPress plugin.