Σεπτέμβριος 2024, Larissa Meetup Customizing WooCommerce

➔ Τι είναι το WooCommerce ➔ Πού γράφουμε τον κώδικά μας ➔ Τρόποι παραμετροποίησης του WooCommerce + Παραδείγματα ➔ Επιπλέον δυνατότητες για προχωρημένους (στα γρήγορα!) ➔ Τελευταίες συμβουλές ➔ Q&A Τι θα δούμε

WooCommerce

Σχετικά με το WooCommerce WooCommerce: Πόσο παραμετροποιήσιμο είναι τελικά; ● Περίπου 23% market share στο eCommerce (2024) ● Λογισμικό ανοιχτού κώδικα (Open source) ● GNU GPLv2 (or later) ● PHP, JavaScript, CSS, HTML ● Χιλιάδες θέματα & πρόσθετα, ενώ υπάρχουν ακόμα εκμεταλλεύσιμα κενά ● Φιλικό προς developers ● Τεράστια κι ενεργή κοινότητα (...καλή μας ώρα)

Πού γράφουμε τον κώδικά μας

1) Χρήση ενός δωρεάν Plugin Πού γράφουμε τον κώδικά μας; ● Χρήση ενός δωρεάν WordPress plugin όπως το Code Snippets By Code Snippets Pro ● Γράφουμε PHP, HTML, JavaScript ● Ιδανικό για μικρές παραμετροποιήσεις ● Εύκολη χρήση και καλή οργάνωση ● Προστασία από κρίσιμα σφάλματα

2) Στο Child Theme μας Πού γράφουμε τον κώδικά μας; ● Επεκτείνει το γονικό θέμα ● Δεν επηρεάζεται από ενημερώσεις ● Γράφουμε τα πάντα - PHP, CSS, JS, HTML κτλ. ● Επεξεργασία μέσω FTP, File Manager (Cpanel, Plesk etc.) ή μέσω του Επεξεργαστή Θέματος (Appearance > Theme Editor) ● Δημιουργία κρίσιμων σφαλμάτων, εάν δεν προσέχουμε

3) Σε δικό μας Custom Plugin Πού γράφουμε τον κώδικά μας; ● Ιδανικό για πολύπλοκες παραμετροποιήσεις ● Γράφουμε τα πάντα - PHP, CSS, JS, HTML κτλ. ● Επεξεργασία τοπικά, ή μέσω FTP, ή του Επεξεργαστή Προσθέτων (Appearance > Plugin Editor) ● Εύκολη συντήρηση, επέκταση και συνεργασία μέσω του Version Control ● Το τεστάρουμε τοπικά ή σε staging περιβάλλον πριν το ανεβάσουμε ● Plugin Boilerplate

Πώς παραμετροποιούμε το WooCommerce

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

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…..

Πώς παραμετροποιούμε το WooCommerce OK. Αυτό είναι όλο; ΟΧΙ!

Actions, Filters, Events Πώς παραμετροποιούμε το WooCommerce > Actions, Filters, Events ● Αναφέρονται συχνά ως “hooks” ● Εκατοντάδες hooks στον κώδικα του WooCommerce, του WordPress core, αλλά και των προσθέτων & θεμάτων ● Ο ιδανικός τρόπος να υλοποιήσουμε τις παραμετροποιήσεις μας ● Μέγιστη δυνατή συμβατότητα με κώδικα οποιασδήποτε προέλευσης

Actions Πώς παραμετροποιούμε το WooCommerce > Actions ● Μας επιτρέπουν να εκτελέσουμε κώδικα στα σημεία που εμφανίζονται ● Μπορεί να υπάρχουν διαθέσιμες παράμετροι, ή και όχι

Actions - Example Πώς παραμετροποιούμε το WooCommerce > Actions add_action( 'woocommerce_single_product_summary', 'wc_action_example', 12 ); function wc_action_example() { echo 'Αυτό το κείμενο προστέθηκε με action!'; } do_action in WooCommerce Core content-single-product.php file add_action in our code $hook_name $callback $priority

Actions - Example Πώς παραμετροποιούμε το WooCommerce > Actions Και...

Filters Πώς παραμετροποιούμε το WooCommerce > Filters ● Μας επιτρέπουν να τροποποιήσουμε μία “μεταβλητή” κατά την εκτέλεση της PHP ● Πάντα έχουν τουλάχιστον μία παράμετρο, αλλά συνήθως περισσότερες ● Η συνάρτησή μας πρέπει ΠΑΝΤΑ να επιστρέφει το νέο $value

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

Filters - Example Πώς παραμετροποιούμε το WooCommerce > Filters (drum roll)

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

Πώς βρίσκουμε αυτά τα 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)

Επιπλέον δυνατότητες για προχωρημένους χρήστες

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' )

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 );

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()

Action Scheduler Επιπλέον δυνατότητες

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/

WooCommerce REST API Επιπλέον δυνατότητες ● Επιτρέπει τη διασύνδεση του WooCommerce με εξωτερικά συστήματα ● Απαιτεί authentication (API keys) ● Setup Guide & Technical documentation ● Μπορείς να διαβάσεις και να επεξεργαστείς σχεδόν τα πάντα, πχ παραγγελίες, προϊόντα, κουπόνια, πελάτες, ζώνες αποστολής κ.ά. demo-wordpress.gr/wp-json/wc/v3/orders

WooCommerce Webhooks Επιπλέον δυνατότητες ● Αποστέλλει μια ειδοποίηση (και δεδομένα) σε εξωτερικά συστήματα ή υπηρεσίες, όταν συμβεί “κάτι” στο WooCommerce, πχ μία νέα παραγγελία ● Documentation

Τελευταίες συμβουλές

Τελευταίες συμβουλές Τελευταίες συμβουλές ● Χρησιμοποίησε οπωσδήποτε child theme ● Χρησιμοποίησε τα hooks εάν είναι δυνατόν ● Μην πειραματίζεσαι σε production περιβάλλον ● Χρησιμοποίησε ένα καλό IDE και μάθε το σε βάθος (+git) ● Μην εμπιστεύεσαι κώδικα από το Stack Overflow / Google / GPT ● Οργάνωσε τον κώδικά σου και γράψε δικό σου documentation ● Δεν είναι τόσο δύσκολο εν τέλει! (Εξοικείωση & Εξάσκηση)

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)

Σεπτέμβριος 2024, Larissa Meetup Σας ευχαριστώ! Theodoros Gkitsos theodorosgkitsos.com @theogk github.com/theo-gk