Skip to content
Academy

Grids

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

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

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

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

Τύποι πλέγματος

Section titled “Τύποι πλέγματος”

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

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

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

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

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

Δημιουργώ

Section titled “Δημιουργώ”

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

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

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

Προσαρμογή

Section titled “Προσαρμογή”

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

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

Μερίδιο

Section titled “Μερίδιο”
Πλέγμα επιμελημένης λίστας
Καταχώρηση πλέγματος επιμελημένης λίστας με συμπτυγμένο μενού ενεργειών

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

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

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

Ενθέτω

Section titled “Ενθέτω”
<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 “Αποθηκευμένο πλέγμα αναζήτησης”

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

Δημιουργώ

Section titled “Δημιουργώ”

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

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

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

Προσαρμογή

Section titled “Προσαρμογή”

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

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

Μερίδιο

Section titled “Μερίδιο”
Αποθηκευμένο πλέγμα αναζήτησης
Αποθηκευμένη καταχώρηση πλέγματος αναζήτησης με συμπτυγμένο μενού ενεργειών

Ενθέτω

Section titled “Ενθέτω”
<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 και πείτε του να ανακτήσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

Καταταγμένο πλέγμα

Section titled “Καταταγμένο πλέγμα”

Δημιουργώ

Section titled “Δημιουργώ”

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

Προσαρμογή

Section titled “Προσαρμογή”

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

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

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

Μερίδιο

Section titled “Μερίδιο”
Καταταγμένο πλέγμα
Ένα ταξινομημένο πλέγμα με συμπτυγμένο μενού ενεργειών

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

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

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

Ενθέτω

Section titled “Ενθέτω”
<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

Section titled “API”

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

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

Section titled “Περαιτέρω ανάγνωση”