Enhancing WordPress and WooCommerce - Case study of ymca.gr

Transcript

1. 1 SYNADAKIS ANGELOS Γεια σας! Είμαι ο Συναδάκης Άγγελος… … και χρησιμοποιώ το WordPress για να φτιάχνω ιστοσελίδες από το 2006. Σχεδόν τόσο όσο και ο Matt!
2. 2 His words! Not mine.
3. 3 SYNADAKIS ANGELOS Γεια σας! Είμαι ο Συναδάκης Άγγελος… Αν θέλετε να μάθετε περισσότερες πληροφορίες σχετικά με την σχέση μου με το WordPress, μπορείτε να τσεκάρετε και το WordPress.org profile μου στο https://profiles.wordpress.org/asynadak.
4. 4 Τι θα πούμε σήμερα? Σήμερα, που λέτε, θα συζητήσουμε πως το WordPress (και το WooCommerce, btw) μπορούν να είναι ευέλικτα ώστε να ικανοποιούν οποιαδήποτε (;) ανάγκη μπορεί να έχει μία επιχείρηση. Θα το κάνουμε αυτό μελετώντας ένα κομμάτι από την υλοποίηση του ymca.gr.
5. 5 1 2 5 4 3 6
6. 6 Το συγκεκριμένο project είναι ένας τρόπος για να δώσουμε πίσω στη κοινότητα (της πόλης – όχι του WordPress). Επενδύουμε το χρόνο μας, τις ικανότητές μας και τις γνώσεις μας για να υποστηρίξουμε τις ψηφιακές προσπάθειες ενός οργανισμού του οποίου η βασική επιδίωξη είναι η κοινωνική προσφορά. Μας αρέσει να σκεφτόμαστε ότι επιταχύνουμε την κοινωνική προσφορά της οργάνωσης, επιταχύνοντας τα ψηφιακά εργαλεία που χρησιμοποιεί. Αυτό το κάνουμε με διάφορους τρόπους, αλλά σήμερα θα σταθούμε στο κομμάτι της ιστοσελίδας. Το περίφημο ymca.gr. Σχετικά με το Project
7. 7 103 lines of JavaScript coed Front End 1.032 lines of PHP code Functions 1.203 lines of CSS code Design 2 3 1 Τι Customization έχει συμβεί; Ένα από τα βασικότερα πλεονεκτήματα του WordPress είναι η ευκολία που προσφέρει στο Customization. Προφανώς, στο συγκεκριμένο πρότζεκτ, αξιοποιήσαμε αυτό το χαρακτηριστικό όσο το δυνατό περισσότερο (κοινώς, το κουράσαμε). 47 ενεργά plugins (αν και είμαι σίγουρος ότι καμιά 10αριά από αυτά δεν χρησιμοποιούνται απαραίτητα) Plugins 4
8. 8 Τι έχει συμβεί σε αυτό το Project? Πάμε να δούμε →
9. 9 1. Custom Program Information Το κάθε τμήμα έχει διαφορετικό υπεύθυνο! OK, όχι κάθε τμήμα, αλλά τα τμήματα είναι χωρισμένα στους τομείς που είπαμε και νωρίτερα και ο κάθε τομέας έχει και διαφορετικό υπεύθυνο (μπορεί και περισσότερους από έναν). Οπότε, σε κάθε πρόγραμμα/προϊόν θέλουμε μία περιοχή με τα σχετικά στοιχεία επικοινωνίας. Για το σκοπό αυτό έχουν γίνει σχετικά custom fields (με το ACF και όχι με κώδικα, αν και συνήθως μας αρέσει με κώδικα – κυρίως για να λέμε ότι γράψαμε περισσότερες γραμμές) στα προϊόντα τα οποία μετά εμφανίζουμε στη σελίδα του προϊόντος.
10. 10 add_action( 'woocommerce_product_thumbnails', 'custom_information', 10 ); function custom_information() { global $product; echo "<h1>".__('Πληροφορίες','sm')."</h1>"; echo "<b>".__('Υπεύθυνος:','sm')."</b> ".get_field( "person_in_charge" )."<br>"; echo "<b>".__('Τηλέφωνο:','sm')."</b> ".get_field( "telephone" )."<br>"; echo "<b>Email:</b> ".get_field( "contact_email" ); if ($product->has_attributes()){ echo "<h1 style='margin-top: 30px;'>Λεπτομέρειες</h1>"; wc_display_product_attributes( $product ); } }
11. 11 2. Show full product description instead of excerpt Το WooCommerce εμφανίζει by default το short product description στην περιοχή της σελίδας που είναι και η τιμή και το κουμπί για add to cart. Στο συγκεκριμένο έργο, εξαιτίας της φύσης των «προϊόντων» δεν μας ενδιαφέρει αυτό και θέλαμε το full description. Οπότε το αλλάξαμε ☺
12. 12 remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
13. 13 3. Customize WooCommerce Checkout Fields Ανάλογα με το προϊόν / πρόγραμμα που προσπαθεί να αγοράσει ο χρήστης, χρειαζόμαστε να ζητήσουμε και διαφορετικές πληροφορίες κατά το checkout process. Οπότε, κάνουμε customize on the fly τα checkout fields ανάλογα με το πρόγραμμα που βρίσκεται στο καλάθι του χρήστη. By the way, έχουμε και customization όπου μπορεί κάποιος να βάλει μόνο ένα πρόγραμμα στο καλάθι του. Αν θέλει και δεύτερο θα πρέπει να κάνει ξεχωριστή αγορά. Αυτό συμβαίνει γιατί το κάθε πρόγραμμα έχει τις δικές του προδιαγραφές και απαιτήσεις!
14. 14 add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields’ ); function custom_override_checkout_fields( $fields ) { unset($fields['billing']['billing_company']); unset($fields['billing']['billing_address_2']); foreach( WC()->cart->get_cart() as $cart_item ){ $product_id = $cart_item['product_id']; if( $product_id == 18607) { $fields['billing']['billing_first_name']['label'] = 'Όνομα παιδιού’; $fields['billing']['billing_last_name']['label'] = 'Επώνυμο παιδιού'; $fields['billing']['billing_email']['label'] = 'Διεύθυνση email γονέα'; $fields['billing']['billing_father_name'] = array( 'label' => __('Όνομα Πατέρα', 'sm’), 'required' => true, 'class' => array('form-row-wide’), 'clear' => true, 'priority’ => 21 ); … } } return $fields; }
15. 15 4. Προσθήκη των πεδίων και στην παραγγελία! Δεν αρκεί να συμπληρώσει ο χρήστης τα τροποποιημένα πεδία :/ Θα πρέπει να τα προσθέσουμε και στο view της παραγγελίας ώστε ο διαχειριστής να μπορεί να τα δει και να τα διαχειριστεί. Απόσπασμα από φάκελο του FBI.
16. 16 add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 ); function my_custom_checkout_field_display_admin_order_meta($order){ echo '<p><strong>'.__('Όνομα Πατέρα').':</strong> ' . get_post_meta( $order->get_id(), 'billing_father_name', true ) . '</p>’; echo '<p><strong>'.__('Όνομα Μητέρας').':</strong> ' . get_post_meta( $order->get_id(), 'billing_mother_name', true ) . '</p>’; echo '<p><strong>'.__('Κινητό Τηλέφωνο Πατέρα').':</strong> ' . get_post_meta( $order->get_id(), 'billing_father_mobile', true ) . '</p>’; … }
17. 17 5. Update και το Order Meta Σα να μην έφταναν όλα αυτά, πρέπει να περάσουμε τα στοιχεία αυτά και στο order meta ☺ Random screenshot γιατί δεν μπορουμε να το δείξουμε κάπως αυτό!
18. 18 add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta’ ); function my_custom_checkout_field_update_order_meta( $order_id ) { if ( ! empty( $_POST['billing_father_name'] ) ) { update_post_meta( $order_id, 'billing_father_name', sanitize_text_field( $_POST['billing_father_name'] ) ); } if ( ! empty( $_POST['billing_mother_name'] ) ) { update_post_meta( $order_id, 'billing_mother_name', sanitize_text_field( $_POST['billing_mother_name'] ) ); } if ( ! empty( $_POST['billing_father_mobile'] ) ) { update_post_meta( $order_id, 'billing_father_mobile', sanitize_text_field( $_POST['billing_father_mobile'] ) ); } … }
19. 19 6. Hide coupon code field αν έχουμε δωρεά! Αν ο χρήστης προσπαθεί να κάνει μία δωρεά – που στη πράξη είναι ένα ακόμα προϊόν απλά με μεταβλητή τιμή (βάζει ο χρήστης ότι θέλει να δώσει), τότε κρύβουμε το πεδίο του κουπονιού, γιατί είναι λίγο περίεργο το coupon code στο donation. Δεν υπάρχει πεδίο για Coupon Code. See?
20. 20 function hide_coupon_field_on_checkout( $enabled ) { if ( is_checkout() ) { foreach( WC()->cart->get_cart() as $cart_item ){ $product_id = $cart_item['product_id’]; if ($product_id == 21472) { $enabled = false; } } } return $enabled; } add_filter( 'woocommerce_coupons_enabled', 'hide_coupon_field_on_checkout' );
21. 21 7. Skip Cart Page αν έχουμε δωρεά! Αν ο χρήστης προσπαθεί να κάνει μία δωρεά – που στη πράξη είναι ένα ακόμα προϊόν απλά με μεταβλητή τιμή (βάζει ο χρήστης ότι θέλει να δώσει – τα είπαμε αυτά, μη τα ξαναλέμε), τότε δεν χρειάζεται να περάσει από την σελίδα του καλαθιού. Θέλουμε να πάει κατευθείαν στο checkout. Δεν περάσαμε από το Cart Page! See?
22. 22 add_filter( 'woocommerce_add_to_cart_redirect', ‘sm_redirect_on_add_to_cart’ ); function sm_redirect_on_add_to_cart() { if ( isset( $_POST['add-to-cart'] ) ) { $product_id = (int) apply_filters( 'woocommerce_add_to_cart_product_id', $_POST['add-to-cart'] ); if ( $product_id == 21472) { $add_to_cart_url = wc_get_checkout_url(); return $add_to_cart_url; } } }
23. 23 8. Έλεγχος για περιορισμό στην ηλικία Πολλά προγράμματα μπορεί να έχουν ηλικιακό περιορισμό. Τις περισσότερες φορές ο περιορισμός έχει να κάνει με range. Δηλαδή από μία ηλικία μέχρι μία άλλη (π.χ. από 10 έως 15 ετών). Οπότε, σε κάποια προγράμματα πρέπει να κάνουμε έναν έλεγχο της ημερομηνίας γέννησης για να δούμε αν είναι μέσα στο όριο που θέλουμε. Note to my future self → Make this customizable από τις ρυθμίσεις του εκάστοτε προϊόντος.
24. 24 add_action('woocommerce_checkout_process', 'check_birth_date’); function check_birth_date() { $program_start_date = "2007-01-01"; $program_end_date = "2007-12-31"; $program_start = strtotime($diaviti_start_date); $program_end = strtotime($diaviti_end_date); if ($product_id == 55731) { if( isset($_POST['billing_dob']) && ! empty($_POST['billing_dob']) ){ $datestamp = strtotime($_POST['billing_dob']); if ($datestamp < $program_start || $datestamp > $program_end) { wc_add_notice( __( "Οι εγγραφές στο συγκεκριμένο πρόγραμμα αφορά σε άτομα γεννημένα από 01/01/2007 έως 31/12/2007." ), "error" ); } } } } }
25. 25 9. Change admin email με βάση το πρόγραμμα που πωλήθηκε Για κάθε πρόγραμμα υπάρχει διαφορετικός υπεύθυνος (ήδη είπαμε ότι εννοούμε κάθε τομέα και όχι απαραίτητα κάθε πρόγραμμα). Οπότε, ανάλογα με το τι πουλήθηκε, θα πρέπει να ενημερωθεί και διαφορετικό άτομο! Χρησιμοποιούμε τα δεδομένα από τα custom fields που είδαμε νωρίτερα για να ενημερώσουμε το σωστό άτομο σχετικά με τη νέα παραγγελία / εγγραφή.
26. 26 add_filter( 'woocommerce_email_recipient_new_order', 'socialmind_filter_recipient', 10, 2 ); function socialmind_filter_recipient( $recipient, $order ){ $items = $order->get_items(); foreach ( $items as $item ) { $product_id = $item->get_product_id(); $recipient_temp = get_post_meta( $product_id, 'contact_email', true ); if ($recipient_temp) { $recipient = $recipient_temp; } } return $recipient; }
27. 27 10. Προσαρμογή των τρόπων πληρωμής ανάλογα με το πρόγραμμα Ανάλογα με το πρόγραμμα που προσπαθεί να αγοράσει ο χρήστης, σε ορισμένες περιπτώσεις χρειάζεται να αλλάξουμε τους τρόπους πληρωμής! Δεν το περιμένατε; Π.χ. Στη κατάθεση σε τράπεζα να εμφανίζουμε διαφορετικούς τραπεζικούς λογαριασμούς ή να κρύβουμε το PayPal ή τη κάρτα. Αυτή η λειτουργία έχει βοηθήσει και σε άλλα ηλεκτρονικά καταστήματα όπου μπορεί να πωλούνται προϊόντα ή υπηρεσίες από διαφορετικές εταιρίες (με την έννοια του διαφορετικού ΑΦΜ). Copy – Paste το προηγουμενο screenshot ☺
28. 28 add_filter( 'woocommerce_available_payment_gateways', 'socialmind_unset_gateway_by_product’ ); function socialmind_unset_gateway_by_product( $available_gateways ) { foreach( WC()->cart->get_cart() as $cart_item ){ $product_id = $cart_item['product_id’]; if ($product_id == 20834) { unset( $available_gateways['eurobank_gateway’]); unset( $available_gateways['paypal’]); } } return $available_gateways; }
29. 29 11. Customized Consent Fields Ανάλογα με το πρόγραμμα που προσπαθεί να αγοράσει ο χρήστης, χρειάζεται να πάρουμε και διαφορετικές εγκρίσεις ή αποδοχές. Δίπλα βλέπουμε ένα απλό παράδειγμα (γιατί αυτό ήταν πιο εύκολο να τραβήξω screenshot), αλλά σε κάποιες περιπτώσεις μπορεί να έχουμε 4-5 ή και παραπάνω checkboxes για τον χρήστη να αποδεχτεί.
30. 30 add_action( 'woocommerce_review_order_before_submit', 'sm_add_checkout_privacy_policy', 9 ); function sm_add_checkout_privacy_policy() { foreach( WC()->cart->get_cart() as $cart_item ){ $product_id = $cart_item['product_id’]; if ($product_id == 20833) { woocommerce_form_field( 'privacy_policy', array( 'type' => 'checkbox’, 'class' => array('form-row privacy’), 'label_class' => array('woocommerce-form__label woocommerce-form__label-for- checkbox checkbox’), 'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox’), 'required' => true, 'label' => 'Έχω διαβάσει και συμφωνώ με τον <a href="https://ymca.gr/wp- content/uploads/2020/01/Kanonismos-leitourgias-kataskinosis-Xalkidikis-3.pdf" target="_blank">Κανονισμός λειτουργίας κατασκήνωσης Χαλκιδικής</a>’, )); } } }
31. 31 Anonymous Donations Και άλλα custom features! Recommended Programs Waiting Lists Custom Caching για πάρα πολλούς - πάρα πολλούς όμως* - ταυτόχρονους χρήστες Προηγμένη αναζήτηση για συνδυαστικά προγράμματα γονέων / παιδιών Συνέχεια προσθέτουμε νέες λειτουργίες, όπως, κάποια future functionalities που θα υλοποιηθούν sooner or later: σύνδεση με ERP system, mobile notifications για συνδρομητικά προγράμματα και άλλα. *Εντάξει, όχι και τόσο πολλούς.
32. 32 WordPress as a framework for custom development .
33. 33 THANK YOU Synadakis Angelos socialmind.gr | linkedin.com/in/asynadak | fb.com/asynadak
34. 34 Follow on LinkedIn