Παραμετροποιώντας το WooCommerce (Customizing WooCommerce) - Θοδωρής Γκίτσος

Η παρουσίαση "Customizing WooCommerce" από το Meetup Λάρισας 2024 αναδεικνύει τρόπους παραμετροποίησης του WooCommerce, μιας πλατφόρμας ανοιχτού κώδικα με μεγάλη ευελιξία για προγραμματιστές. Εξετάζονται μέθοδοι όπως η χρήση plugins, child themes και custom plugins για αλλαγές στον κώδικα, καθώς και τεχνικές παραμετροποίησης μέσω hooks (actions, filters, events) που εξασφαλίζουν συμβατότητα και αποδοτικότητα.

Σε προχωρημένα θέματα, καλύπτονται εργαλεία όπως Conditional Tags, WooCommerce Logger, Action Scheduler και REST API για αυτοματοποίηση και διασύνδεση με εξωτερικά συστήματα. Τονίζεται η σημασία του ασφαλούς πειραματισμού, της σωστής οργάνωσης κώδικα και της συνεχούς εξάσκησης, με προτάσεις για χρήσιμες πηγές μάθησης και βέλτιστες πρακτικές.

Speaker: Θοδωρής Γκίτσος / Theo Gkitsos

Transcript

1. Σεπτέμβριος 2024, Larissa Meetup Customizing WooCommerce
2. ➔ Τι είναι το WooCommerce ➔ Πού γράφουμε τον κώδικά μας ➔ Τρόποι παραμετροποίησης του WooCommerce + Παραδείγματα ➔ Επιπλέον δυνατότητες για προχωρημένους (στα γρήγορα!) ➔ Τελευταίες συμβουλές ➔ Q&A Τι θα δούμε
3. WooCommerce
4. Σχετικά με το WooCommerce WooCommerce: Πόσο παραμετροποιήσιμο είναι τελικά; • Περίπου 23% market share στο eCommerce (2024) • Λογισμικό ανοιχτού κώδικα (Open source) • GNU GPLv2 (or later) • PHP, JavaScript, CSS, HTML • Χιλιάδες θέματα & πρόσθετα, ενώ υπάρχουν ακόμα εκμεταλλεύσιμα κενά • Φιλικό προς developers • Τεράστια κι ενεργή κοινότητα (...καλή μας ώρα)
5. Πού γράφουμε τον κώδικά μας
6. 1) Χρήση ενός δωρεάν Plugin Πού γράφουμε τον κώδικά μας; • Χρήση ενός δωρεάν WordPress plugin όπως το Code Snippets By Code Snippets Pro • Γράφουμε PHP, HTML, JavaScript • Ιδανικό για μικρές παραμετροποιήσεις • Εύκολη χρήση και καλή οργάνωση • Προστασία από κρίσιμα σφάλματα
7. 2) Στο Child Theme μας Πού γράφουμε τον κώδικά μας; • Επεκτείνει το γονικό θέμα • Δεν επηρεάζεται από ενημερώσεις • Γράφουμε τα πάντα - PHP, CSS, JS, HTML κτλ. • Επεξεργασία μέσω FTP, File Manager (Cpanel, Plesk etc.) ή μέσω του Επεξεργαστή Θέματος (Appearance > Theme Editor) • Δημιουργία κρίσιμων σφαλμάτων, εάν δεν προσέχουμε
8. 3) Σε δικό μας Custom Plugin Πού γράφουμε τον κώδικά μας; • Ιδανικό για πολύπλοκες παραμετροποιήσεις • Γράφουμε τα πάντα - PHP, CSS, JS, HTML κτλ. • Επεξεργασία τοπικά, ή μέσω FTP, ή του Επεξεργαστή Προσθέτων (Appearance > Plugin Editor) • Εύκολη συντήρηση, επέκταση και συνεργασία μέσω του Version Control • Το τεστάρουμε τοπικά ή σε staging περιβάλλον πριν το ανεβάσουμε • Plugin Boilerplate <?php /** * Plugin Name: My Plugin Name * Plugin URI: https://yourdomain.com/ * Description: This is a plugin example. * Version: 1.0.0 * Author: theogk * Author URI: https://theodorosgkitsos.com/ **/
9. Πώς παραμετροποιούμε το WooCommerce
10. Template Override Πώς παραμετροποιούμε το WooCommerce • Είναι PHP αρχεία - Δημιουργούν το front-end / HTML • Βρίσκουμε τα WooCommerce Templates στο GitHub ή στο /wp-content/plugins/woocommerce/templates/ • Τα αντιγράφουμε μέσα στον φάκελο του ενεργού child theme, ώστε να αντικαταστήσουν τα defaults • Δυσκολία στη συντήρηση και τη συμβατότητα Location in WooCommerce: /wp-content/plugins/woocommerce/templates/checkout/form-billing.php Location in our child theme: /wp-content/themes/storefront-child/woocommerce/checkout/form-billing.php
11. Function Override Πώς παραμετροποιούμε το WooCommerce • Κάποιες συναρτήσεις μπορούν να αντικατασταθούν με δικές μας • Τις ορίζουμε μέσα στο functions.php του child theme μας • Σπάνια χρήσιμο στο WooCommerce core • Δυσκολία στη συντήρηση και τη συμβατότητα if ( ! function_exists( 'woocommerce_page_title' ) ) { function woocommerce_page_title( $echo = true ) { if ( is_search() ) { // function continues…..
12. Πώς παραμετροποιούμε το WooCommerce OK. Αυτό είναι όλο; ΟΧΙ!
13. Actions, Filters, Events Πώς παραμετροποιούμε το WooCommerce > Actions, Filters, Events • Αναφέρονται συχνά ως “hooks” • Εκατοντάδες hooks στον κώδικα του WooCommerce, του WordPress core, αλλά και των προσθέτων & θεμάτων • Ο ιδανικός τρόπος να υλοποιήσουμε τις παραμετροποιήσεις μας • Μέγιστη δυνατή συμβατότητα με κώδικα οποιασδήποτε προέλευσης
14. Actions Πώς παραμετροποιούμε το WooCommerce > Actions • Μας επιτρέπουν να εκτελέσουμε κώδικα στα σημεία που εμφανίζονται • Μπορεί να υπάρχουν διαθέσιμες παράμετροι, ή και όχι
15. Actions - Example Πώς παραμετροποιούμε το WooCommerce > Actions <div class="summary entry-summary"> <?php do_action( 'woocommerce_single_product_summary' ); ?> </div> add_action( 'woocommerce_single_product_summary', 'wc_action_example', 12 ); function wc_action_example() { echo '<strong>Αυτό το κείμενο προστέθηκε με action!</strong>'; } do_action in WooCommerce Core content-single-product.php file add_action in our code $hook_name $callback $priority
16. Actions - Example Πώς παραμετροποιούμε το WooCommerce > Actions Και...
17. Filters Πώς παραμετροποιούμε το WooCommerce > Filters • Μας επιτρέπουν να τροποποιήσουμε μία “μεταβλητή” κατά την εκτέλεση της PHP • Πάντα έχουν τουλάχιστον μία παράμετρο, αλλά συνήθως περισσότερες • Η συνάρτησή μας πρέπει ΠΑΝΤΑ να επιστρέφει το νέο $value
18. Filters - Example Πώς παραμετροποιούμε το WooCommerce > Filters public function single_add_to_cart_text() { return apply_filters( 'woocommerce_product_single_add_to_cart_text', 'Add to cart', $this ); } add_filter( 'woocommerce_product_single_add_to_cart_text', 'wc_filter_example', 10, 2 ); function wc_filter_example( $original_text, $product ) { return 'Αγόρασε Τώρα!'; } apply_filters in WooCommerce Core file add_filter in our code $callback $hook_name $value $arg $priority $hook_name $accepted_args
19. Filters - Example Πώς παραμετροποιούμε το WooCommerce > Filters (drum roll)
20. Events Πώς παραμετροποιούμε το WooCommerce > Events • Μας επιτρέπουν να εκτελέσουμε κώδικα JavaScript όταν συμβαίνει ένα συγκεκριμένο JS event form.$singleVariation.slideDown( 200 ).trigger( 'show_variation', [ variation, purchasable ] ); Event trigger in WooCommerce Core JS file $( '.single_variation_wrap' ).on( 'show_variation', function( event, variation ) { // Our JS code to execute } ); Event listen in our JS code
21. Πώς βρίσκουμε αυτά τα hooks; Πώς παραμετροποιούμε το WooCommerce • Δυστυχώς δεν υπάρχει εύκολη λύση… • Αναζήτηση στα αρχεία του WooCommerce με χρήση ενός PHP IDE (VS Code, PHPStorm κτλ) στην τοπική μας WordPress εγκατάσταση • Rodolfo Melogli’s “Visual Hook Series” (Business Bloomer) • Χρήση του Stack Overflow / Google • Front-end JS events guide (temporarily accessible from my docs)
22. Επιπλέον δυνατότητες για προχωρημένους χρήστες
23. Conditional Tags Επιπλέον δυνατότητες • Εφαρμογή παραμετροποίησης μόνο στα σημεία που χρειάζεται • File location: /woocommerce/includes/wc-conditional-functions.php • Τα κυριότερα υπάρχουν και στα Developer Docs: Conditional Tags Examples is_woocommerce() is_shop() is_product_category() is_product_category( 'shirts' ) is_product_tag( 'new' ) is_product() is_cart() is_checkout() is_account_page() is_wc_endpoint_url( 'order-received' )
24. WooCommerce Logger Επιπλέον δυνατότητες • Χρήση του WooCommerce Logger για την καταγραφή Logging in WooCommerce • Προβολή εδώ: WooCommerce -> Κατάσταση -> Αρχεία Καταγραφής // init WC_Logger $logger = wc_get_logger(); $context = [ 'source' => 'your-log-slug' ]; // log whatever $logger->debug( wc_print_r( $whatever, true ), $context ); $logger->info( 'Interesting events', $context ); $logger->error( 'Runtime errors that do not require immediate action', $context );
25. Action Scheduler Επιπλέον δυνατότητες • Action scheduler documentation • Ενσωματωμένο ήδη στο WooCommerce, έτοιμο προς χρήση • Καλύτερη απόδοση, σταθερότητα & έλεγχος από το WP_Cron • WooCommerce -> Κατάσταση -> Προγραμματισμένες ενέργειες ➔ as_schedule_cron_action() ➔ as_schedule_recurring_action() ➔ as_schedule_single_action() ➔ as_enqueue_async_action()
26. Action Scheduler Επιπλέον δυνατότητες
27. Store API Επιπλέον δυνατότητες • Provides public Rest API endpoints for the development of customer-facing cart, checkout, and product functionality • Δεν απαιτεί authentication, κι αναφέρεται στον current user • Documentation Μερικές χρήσεις: ➔ Προβολή λίστας προϊόντων ➔ Προσθήκη/αφαίρεση προϊόντων στο καλάθι ➔ Αλλαγή ποσότητας προϊόντων στο καλάθι ➔ Εφαρμογή κουπονιών ➔ Υποβολή παραγγελίας demo-wordpress.gr/wp-json/wc/store/v1/cart/
28. WooCommerce REST API Επιπλέον δυνατότητες • Επιτρέπει τη διασύνδεση του WooCommerce με εξωτερικά συστήματα • Απαιτεί authentication (API keys) • Setup Guide & Technical documentation • Μπορείς να διαβάσεις και να επεξεργαστείς σχεδόν τα πάντα, πχ παραγγελίες, προϊόντα, κουπόνια, πελάτες, ζώνες αποστολής κ.ά. demo-wordpress.gr/wp-json/wc/v3/orders
29. WooCommerce Webhooks Επιπλέον δυνατότητες • Αποστέλλει μια ειδοποίηση (και δεδομένα) σε εξωτερικά συστήματα ή υπηρεσίες, όταν συμβεί “κάτι” στο WooCommerce, πχ μία νέα παραγγελία • Documentation
30. Τελευταίες συμβουλές
31. Τελευταίες συμβουλές Τελευταίες συμβουλές • Χρησιμοποίησε οπωσδήποτε child theme • Χρησιμοποίησε τα hooks εάν είναι δυνατόν • Μην πειραματίζεσαι σε production περιβάλλον • Χρησιμοποίησε ένα καλό IDE και μάθε το σε βάθος (+git) • Μην εμπιστεύεσαι κώδικα από το Stack Overflow / Google / GPT • Οργάνωσε τον κώδικά σου και γράψε δικό σου documentation • Δεν είναι τόσο δύσκολο εν τέλει! (Εξοικείωση & Εξάσκηση)
32. Resources Τελευταίες συμβουλές • WooCommerce Developer Docs https://developer.woocommerce.com/docs/ • WordPress Developer Resources https://developer.wordpress.org/ • Creating a custom WooCommerce plugin (Meetup SKG) • WooCommerce Tips by Business Bloomer • Misha Rudrastyh Blog • Documentation για ανάπτυξη του Brand σου (Spotify)
33. Σεπτέμβριος 2024, Larissa Meetup Σας ευχαριστώ! Theodoros Gkitsos theodorosgkitsos.com @theogk github.com/theo-gk