Παραμετροποιώντας το WooCommerce (Customizing WooCommerce)

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