My Blog
Elementor: Προσαρμοσμένο Ερώτημα για οποιοδήποτε Widget (πως να φτιάξεις δικό σου related widget)
- 17 Σεπτεμβρίου, 2024
- -
- Γενικά
- -
- nicolas
Καλησπέρα.
Όσοι χρησιμοποιείτε Elementor, σίγουρα θα έχετε βρεθεί στην κατάσταση όπου ένα elementor widget το οποίο επιστρέφει items (πχ αυτό που εμφανίζει τα άρθρα ή κάποιο άλλο, πχ για προιόντα ή items από custom post type), δεν έχει το ερώτημα επιστροφής που θέλουμε στις επιλογές.
Δηλαδή, δεν μας κάνει να τα επιστρέψει ούτε ανά κατηγορία, ούτε όλα και να τα ταξινομήσει ανά ημερομηνία ή όνομα, ούτε τίποτα τέλος πάντων.
Είναι περιπτώσεις όπου κάποιος πελάτης θα ζητήσει κάτι ιδιαίτερο, μπορεί πχ να ζητήσει να επιστρέψουν με βάση το πόσα άτομα χωράνε στο κάθε σκάφος που πουλάει. Επίσης μπορεί να θέλει κάτω από ένα άρθρο να εμφανίσουμε σχετικά άρθρα αλλά να επιλέγει αυτό χειροκίνητα ποια άρθρα θα εμφανίζονται.
Θα χρησιμοποιήσω λοιπόν ως παράδειγμα το τελευταίο (αν και η λογική του custom query είναι κατανοητή για όλα):
Πως να φτιάξεις δικό σου widget το οποίο εμφανίζει επιλεγμένα related items.
Έχουμε την περίπτωση ενός custom post type, με όνομα rooms το οποίο περιέχει items τα οποία αφορούν δωμάτια ξενοδοχείου.
Το κάθε room, κάτω κάτω (πριν το footer), εμφανίζει και άλλα related rooms.
Ο πελάτης ζήτησε αυτά να τα επιλέγει χειροκίνητα και όχι με κάποιο δυναμικό τρόπο.
Φτιάξαμε με το ACF ένα επιπλέον Post Object Field
Αυτό κατά την επεξεργασία ενός δωματίου, σου επιτρέπει να επιλέξεις και άλλα δωμάτια, δηλαδή να ορίσεις related δωμάτια στο κάθε δωμάτιο:
Στα related δωμάτια, παλαιότερα η εμφάνισή τους ήταν γενική και τυχαία και το μόνο που μπορούσες να περιορίσεις στο query ήταν είτε να εμφανίζονται από κάποια κατηγορία, είτε κατά όνομα, είτε κατά ημερομηνία και όλα αυτά συνδυαστικά:
Εδώ έρχεται λοιπόν το elementor να βοηθήσει.
Σύμφωνα με την ακόλουθη οδηγία: https://developers.elementor.com/docs/hooks/custom-query-filter/ , σε οποιοδήποτε widget υπάρχει η επιλογή (το πεδίο) "Query ID", μπορούμε να βάλουμε ένα αναγνωριστικό, ούτως ώστε να μανιπουλάρουμε το τι θα εμφανίζει, χρησιμοποιώντας συνάρτηση php εκτός της σελίδας, πχ στο functions.php του wordpress:
Εφόσον βάλαμε ένα όνομα και κάναμε save, το επόμενο βήμα ήταν να γράψουμε την συνάρτηση σύμφωνα με τις οδηγίες:
function related_rooms_query( $query ) { $current_room_id = get_the_ID(); $related_rooms = get_field('select_related_rooms', $current_room_id); echo " <script> console.log('Current Room ID:', '".$current_room_id."'); console.log('Related Rooms:', " . json_encode($related_rooms) . "); </script> "; if ( $related_rooms && is_array($related_rooms) ) { $query->set( 'post__in', $related_rooms ); $query->set( 'post_type', 'room' ); } else { $query->set( 'post__in', array(0) ); } } add_action( 'elementor/query/related_rooms_query', 'related_rooms_query' );
Για βοήθεια σε σχέση με τον παραπάνω κώδικα, μπορείτε να με ρωτήσετε, αν και νομίζω ότι είναι αρκετά κατανοητός.
Έχω προσθέσει και js debugging για να επιβεβαιώσετε ότι τρέχει.
Με εκτίμηση, Νίκος.
This post is also available in: English