Πλέγματα

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

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

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

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

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

Τύποι πλεγμάτων

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

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

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

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

Δημιουργία

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

Κάντε κλικ στο κουμπί Ενέργειες στη λίστα Αγαπημένα.
Κάντε κλικ στο κουμπί Δημιουργία πλέγματος.
Θα εμφανιστεί ένα νέο παράθυρο που σας επιτρέπει να ονομάσετε το πλέγμα σας. Δείτε παρακάτω.
Κάντε κλικ στο κουμπί OK για να συνεχίσετε.

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

Προσαρμογή

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

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

Κοινοποίηση

Πλέγμα επιμελημένης λίστας — *Εγγραφή πλέγματος επιμελημένης λίστας με συμπτυγμένο μενού ενεργειών*

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

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

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

Ενσωμάτωση

<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 σας δείχνουν πώς να χρησιμοποιήσετε το wink-content-loader Web Component και να του πείτε να φορτώσει ένα πλέγμα για τον κώδικά σας.
Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε το Javascript μας στον ιστότοπό σας.
Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε το wink-app-loader Web Component και να του πείτε να φορτώσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

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

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

Δημιουργία

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

Κάντε κλικ στο κουμπί Ενέργειες στην αποθηκευμένη αναζήτησή σας.
Κάντε κλικ στο κουμπί Δημιουργία πλέγματος.
Θα εμφανιστεί ένα νέο παράθυρο που σας επιτρέπει να ονομάσετε το πλέγμα σας. Δείτε παρακάτω.

Κάντε κλικ στο κουμπί OK για να συνεχίσετε.

Το πλέγμα σας έχει δημιουργηθεί. Πλοηγηθείτε στο Εργαλεία > Πλέγματα από την κύρια γραμμή πλοήγησης και κάντε κλικ στην καρτέλα Πλέγματα Αποθηκευμένης Αναζήτησης για να δείτε το νέο σας πλέγμα.

Προσαρμογή

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

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

Κοινοποίηση

Πλέγμα αποθηκευμένης αναζήτησης — *Εγγραφή πλέγματος αποθηκευμένης αναζήτησης με συμπτυγμένο μενού ενεργειών*

Ενσωμάτωση

<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-loader Web Component και να του πείτε να φορτώσει ένα πλέγμα για τον κώδικά σας.
Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε το Javascript μας στον ιστότοπό σας.
Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε το wink-app-loader Web Component και να του πείτε να φορτώσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

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

Δημιουργία

Δημιουργήστε ένα καταταγμένο πλέγμα πλοηγούμενοι στο Εργαλεία > Πλέγματα και κάντε κλικ στην καρτέλα Καταταγμένο Πλέγμα. Κάντε κλικ στο κουμπί Δημιουργία καταταγμένου πλέγματος.

Προσαρμογή

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

Επιλέξτε έναν προορισμό. π.χ. Τόκιο.
Δώστε του ένα όνομα για να θυμάστε τι αφορά το πλέγμα. π.χ. Οικολογικά ξενοδοχεία στο Τόκιο
Επιλέξτε την Προσαρμογή που θέλετε να εφαρμόσετε σε αυτό το πλέγμα.
Επιλέξτε την αρχική όψη της κάρτας που θέλετε να δουν πρώτα οι χρήστες. Από προεπιλογή, είναι η φυσική όψη αυτού του αποθέματος.
Επιλέξτε ποιο χαρακτηριστικό θα χρησιμοποιηθεί για την ταξινόμηση των ακινήτων. π.χ. Οικολογικότητα.
Προσθέστε λέξεις-κλειδιά, διαχωρισμένες με κόμμα, που θα χρησιμοποιηθούν από Web Crawlers.
Προσθέστε τίτλους και περιγραφές στις γλώσσες που θέλετε να δει ο χρήστης.
Κάντε κλικ στο κουμπί Αποθήκευση για να συνεχίσετε.

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

Κοινοποίηση

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

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

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

Ενσωμάτωση

<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 σας δείχνουν πώς να χρησιμοποιήσετε το wink-content-loader Web Component και να του πείτε να φορτώσει ένα καταταγμένο πλέγμα για τον κώδικά σας.
Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε το Javascript μας στον ιστότοπό σας.
Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε το wink-app-loader Web Component και να του πείτε να φορτώσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

API

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

Επιπλέον ανάγνωση

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