Skip to content

Grids

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

  1. Μετακινηθείτε στις σελίδες του πλέγματος κάνοντας κλικ στοShow moreκουμπί (όταν υπάρχουν περισσότερα είδη διαθέσιμα).
Προεπισκόπηση πλέγματος
Πλέγμα που εμφανίζει πολλαπλούς τύπους δωματίων

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

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

Υπάρχουν τρεις τύποι πλεγμάτων:

  1. Πλέγμα βασισμένο σε έναεπιμελημένη λίστα.
  2. Πλέγμα βασισμένο σε ένααποθηκευμένη αναζήτηση.
  3. Πλέγμα πλέγματος με βάση μια τοποθεσία και κριτήρια ταξινόμησης (δηλαδή, πλέγμα κατάταξης).

Πλέγμα επιμελημένης λίστας

Section titled “Πλέγμα επιμελημένης λίστας”

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

Πλοήγηση σεInventory > Curated Listsαπό την κύρια γραμμή πλοήγησης. Για αυτό το παράδειγμα, θα χρησιμοποιήσουμε τοFavoritesλίστα. Εάν δεν έχετε προσθέσει ακόμα τίποτα στη λίστα σαςFavorites, πηγαίνετε στοΕρευνανα μάθω πώς.

Δημιουργία πλέγματος λίστας επιμέλειας
Δημιουργία επιμελημένης φόρμας πλέγματος λίστας
  1. Κάντε κλικ στο Actions κουμπί στο Favorites λίστα.
  2. Κάντε κλικ στο Create a grid κουμπί.
  3. Θα εμφανιστεί ένα νέο παράθυρο, στο οποίο θα μπορείτε να ονομάσετε το πλέγμα σας. Δείτε παρακάτω.
  4. Κλικ OK κουμπί για να συνεχίσετε.

Το πλέγμα σας έχει δημιουργηθεί. Μεταβείτε στοTools > Gridsαπό την κύρια γραμμή πλοήγησης και κάντε κλικ στοCurated Gridsκαρτέλα για να δείτε το νέο σας πλέγμα.

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

  1. Δώστε του ένα όνομα για να θυμάστε περί τίνος πρόκειται το πλέγμα.
  2. Επιλέξτε το Προσαρμογή θέλετε να εφαρμόσετε σε αυτό το πλέγμα.
  3. Επιλέξτε την αρχική όψη της κάρτας που θέλετε να βλέπουν πρώτα οι χρήστες. Από προεπιλογή, είναι η εγγενής όψη αυτού του αποθέματος.
  4. Επιλέξτε το σήμα που θέλετε να χρησιμοποιήσετε στην κάρτα. Ένα σήμα επιτρέπει στους χρήστες να συγκρίνουν το απόθεμα με βάση μια συγκεντρωτική μέτρηση, όπως eco-friendly.
  5. Προσθέστε λέξεις-κλειδιά, διαχωρισμένες με κόμμα, που θα χρησιμοποιηθούν από Ανιχνευτές ιστού.
  6. Προσθέστε τίτλους και περιγραφές στις γλώσσες που θέλετε να βλέπει ο χρήστης.
  7. Κάντε κλικ στο Save κουμπί για να συνεχίσετε.
Πλέγμα επιμελημένης λίστας
Καταχώρηση πλέγματος επιμελημένης λίστας με συμπτυγμένο μενού ενεργειών

Παραπάνω εμφανίζεται μια εικόνα με όλες τις διαθέσιμες ενέργειες για το πλέγμα σας:

  • ΕκσυγχρονίζωΕνημερώνει τη διαμόρφωση του πλέγματός σας.
  • Προσθήκη στο WinkLinksΠροσθέτει το πλέγμα στον λογαριασμό σας WinkLinks.
  • ΕνθέτωΣας δείχνει πώς να ενσωματώσετε αυτό το πλέγμα ωςΠλέγμαστον ιστότοπό σας.
  • Χρήση με WordPressΣας δείχνει πώς να χρησιμοποιήσετε τοΠρόσθετο WordPressγια να ενσωματώσετε αυτό το πλέγμα στον ιστότοπό σας.

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

<html>
<head>
<link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
</head>
<body>
<wink-content-loader
layout="LIST"
id="9a212b5e-62a7-11ef-ac3f-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 σας δείχνουν πώς να χρησιμοποιήσετε τοπρόγραμμα φόρτωσης περιεχομένου-winkWeb Component και πείτε του να ανακτήσει ένα πλέγμα για τον κώδικά σας.
  • Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε την Javascript μας στον ιστότοπό σας.
  • Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε τοwink-app-loaderΣτοιχείο Web και πείτε του να ανακτήσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

Αποθηκευμένο πλέγμα αναζήτησης

Section titled “Αποθηκευμένο πλέγμα αναζήτησης”

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

Πλοήγηση σεInventory > Saved searchesαπό την κύρια γραμμή πλοήγησης. Εάν δεν έχετε δημιουργήσει ακόμη μια αποθηκευμένη αναζήτηση, μεταβείτε στη διεύθυνσηΕρευνανα μάθω πώς.

Δημιουργία αποθηκευμένου πλέγματος αναζήτησης
Δημιουργία αποθηκευμένης φόρμας πλέγματος αναζήτησης
  1. Κάντε κλικ στο Actions κουμπί στην αποθηκευμένη αναζήτησή σας.
  2. Κάντε κλικ στο Create a grid κουμπί.
  3. Θα εμφανιστεί ένα νέο παράθυρο, στο οποίο θα μπορείτε να ονομάσετε το πλέγμα σας. Δείτε παρακάτω.
  1. Κάντε κλικOKκουμπί για να συνεχίσετε.

Το πλέγμα σας έχει δημιουργηθεί. Μεταβείτε στοTools > Gridsαπό την κύρια γραμμή πλοήγησης και κάντε κλικ στοSaved Search Gridsκαρτέλα για να δείτε το νέο σας πλέγμα.

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

  1. Δώστε του ένα όνομα για να θυμάστε περί τίνος πρόκειται το πλέγμα.
  2. Επιλέξτε το Προσαρμογή θέλετε να εφαρμόσετε σε αυτό το πλέγμα.
  3. Επιλέξτε την αρχική όψη της κάρτας που θέλετε να βλέπουν πρώτα οι χρήστες. Από προεπιλογή, είναι η εγγενής όψη αυτού του αποθέματος.
  4. Επιλέξτε το σήμα που θέλετε να χρησιμοποιήσετε στην κάρτα. Ένα σήμα επιτρέπει στους χρήστες να συγκρίνουν το απόθεμα με βάση μια συγκεντρωτική μέτρηση, όπως eco-friendly.
  5. Προσθέστε λέξεις-κλειδιά, διαχωρισμένες με κόμμα, που θα χρησιμοποιηθούν από Ανιχνευτές ιστού.
  6. Προσθέστε τίτλους και περιγραφές στις γλώσσες που θέλετε να βλέπει ο χρήστης.
  7. Κάντε κλικ στο Save κουμπί για να συνεχίσετε.
Αποθηκευμένο πλέγμα αναζήτησης
Αποθηκευμένη καταχώρηση πλέγματος αναζήτησης με συμπτυγμένο μενού ενεργειών
<html>
<head>
<link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
</head>
<body>
<wink-content-loader
layout="LIST"
id="be3130d5-62a7-11ef-ac3f-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-loaderWeb Component και πείτε του να ανακτήσει ένα πλέγμα για τον κώδικά σας.
  • Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε την Javascript μας στον ιστότοπό σας.
  • Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε τοwink-app-loaderΣτοιχείο Web και πείτε του να ανακτήσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

Δημιουργήστε ένα ταξινομημένο πλέγμα μεταβαίνοντας στοTools > Gridsκαι κάντε κλικ στοRanked Gridκαρτέλα. Κάντε κλικ στοCreate ranked gridκουμπί.

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

  1. Επιλέξτε έναν προορισμό. Π.χ. Τόκιο.
  2. Δώστε του ένα όνομα για να θυμάστε περί τίνος πρόκειται το πλέγμα. Π.χ. Οικολογικά ξενοδοχεία στο Τόκιο
  3. Επιλέξτε το Προσαρμογή θέλετε να εφαρμόσετε σε αυτό το πλέγμα.
  4. Επιλέξτε την αρχική όψη της κάρτας που θέλετε να βλέπουν πρώτα οι χρήστες. Από προεπιλογή, είναι η εγγενής όψη αυτού του αποθέματος.
  5. Επιλέξτε με βάση ποιο χαρακτηριστικό θα ταξινομήσετε τις ιδιότητες. Π.χ. Οικολογική φιλικότητα.
  6. Προσθέστε λέξεις-κλειδιά, διαχωρισμένες με κόμμα, που θα χρησιμοποιηθούν από Ανιχνευτές ιστού.
  7. Προσθέστε τίτλους και περιγραφές στις γλώσσες που θέλετε να βλέπει ο χρήστης.
  8. Κάντε κλικ στο Save κουμπί για να συνεχίσετε.

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

Καταταγμένο πλέγμα
Ένα ταξινομημένο πλέγμα με συμπτυγμένο μενού ενεργειών

Παραπάνω εμφανίζεται μια εικόνα με όλες τις διαθέσιμες ενέργειες για το πλέγμα rankd σας:

  • ΕκσυγχρονίζωΕνημερώνει τη διαμόρφωση του πλέγματός σας.
  • Προσθήκη στο WinkLinksΠροσθέτει το πλέγμα κατάταξης στον λογαριασμό σας WinkLinks.
  • ΕνθέτωΣας δείχνει πώς να ενσωματώσετε αυτό το πλέγμα ωςΠλέγμαστον ιστότοπό σας.
  • Χρήση με WordPressΣας δείχνει πώς να χρησιμοποιήσετε τοΠρόσθετο WordPressγια να ενσωματώσετε αυτήν την κάρτα στον ιστότοπό σας.

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

<html>
<head>
<link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
</head>
<body>
<wink-content-loader
layout="RANKED"
id="2483d55e-62a5-11ef-ac3f-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 σας δείχνουν πώς να χρησιμοποιήσετε τοπρόγραμμα φόρτωσης περιεχομένου-winkWeb Component και πείτε του να ανακτήσει ένα ταξινομημένο πλέγμα για τον κώδικά σας.
  • Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε την Javascript μας στον ιστότοπό σας.
  • Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε τοwink-app-loaderΣτοιχείο Web και πείτε του να ανακτήσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

Οι προγραμματιστές που θέλουν να διαχειριστούν πλέγματα μπορούν να επισκεφθούν τοΠρογραμματιστές > API > Απόθεμα.