Michalis Velonakis - Theming - 6th Heraklion Meetup

Transcript

3. Ένα eshop πρέπει να αντιμετωπίζεται σαν ένα φυσικό κατάστημα. Και λέω πρέπει, γιατί οι ανάγκες του είναι πολύ κοντά σε αυτό. Όπως και σε ένα φυσικό κατάστημα, ο στόχος είναι (συνήθως) να αυξήσουμε τις πωλήσεις. Όχι πάντα, αλλά συνήθως. Έχει όμως ένα επιπλέον σημαντικό βάρος σε σχέση με το φυσικό κατάστημα για να μπορέσει να πουλήσει: πρέπει να εμπνέει εμπιστοσύνη. Και αυτό είναι πολύ σημαντικό. Γιατί; γιατί σαν άνθρωπος έχω μάθει να αντιμετωπίζω με επιφύλαξη την τεχνολογία και να μην την εμπιστεύομαι όταν αυτή δείχνει έστω και ελάχιστα ότι κάτι δεν πάει καλά. Πόσο μάλλον να δώσω τα λεφτά μου εκεί… 3
4. Κατ’ αρχάς θα πρέπει το eshop να δουλεύει. Οκ, αυτό το θεωρούμε δεδομένο με το βασικό στήσιμο του WooCommerce. Στη συνέχεια, θα πρέπει η βασική εμπειρία χρήσης (το flow που ακολουθεί ο αγοραστής για να κάνει μια αγορά) να είναι αυτό που περιμένει, να μην έχει εκπλήξεις ή απροσδόκητα αποτελέσματα. Και αυτό το καλύπτει το βασικό στήσιμο του WooCommerce. Άρα αν απλά εγκαταστήσουμε το WooCommerce, είμαστε έτοιμοι. Σωστά; 4
5. Συγκρίνετε αυτά τα δύο καταστήματα. Ποιο σας εμπνέει (περισσότερη) εμπιστοσύνη; Και τα δύο λειτουργούν. Από ποιο θα ψωνίζατε; Σε ένα από τα δύο έχει γίνει μελέτη για την εμφάνιση, ενώ στο άλλο έχουν μείνει τα πράγματα default. Μαντέψτε ποιο πουλάει περισσότερο (τραγικά περισσότερο)…. 5
6. Άλλο ένα λιγότερο extreme παράδειγμα. Εδώ έχουμε ένα (τμήμα) απλό ένα eshop. Εδώ εκ πρώτης όψεως ίσως όλα να φαίνονται καλά (not!) αλλά αν πάμε να το χρησιμοποιήσουμε, θα δούμε διάφορες «παραφωνίες». Η γενική ασυνέπεια του site, με κάνει να το ξανασκεφτώ πριν αγοράσω από εδώ. Αυτό το site δεν είναι φτιαγμένο με WooCommerce. :Ρ 6
7. Το να μεταδώσεις το μήνυμα ότι δεν θα κλέψεις τα στοιχεία της πιστωτικής κάρτας και ότι θα στείλεις την παραγγελία. Το να κάνεις τον πελάτη να αισθανθεί ασφαλής να σε πληρώσει χωρίς να έχετε συναντηθεί από κοντά. Με λίγα λόγια, το να εμπνεύσεις στον άλλο εμπιστοσύνη, δεν είναι τόσο απλό όσο νομίζετε. Έχει να κάνει με ψυχολογία, marketing και σε αυτό εμπλέκεται και το λεγόμενο User Experience. Το πρώτο βήμα που μπορείτε να κάνετε όμως, είναι να φροντίσετε το μαγαζί σας να δείχνει πόσο πολύ το προσέχετε. Και για να γίνει αυτό θα πρέπει να αλλάξετε την εμφάνισή του. 7
8. Το WooCommerce, γνωστό και ως WC από τα αρχικά του, δεν είναι τίποτα άλλο από ένα τεράστιο και υπερπολύπλοκο WordPress plugin, σαν όλα τα άλλα  Αυτό σημαίνει ότι δουλεύει με τον τρόπο που δουλεύει το WordPress και γενικώς ακολουθεί μια παρόμοια λογική στο πως μπορεί κάποιος να του αλλάξει την εμφάνιση. Ή περίπου. Ή και καθόλου. Τέλος πάντων, ακολουθεί τη λογική «the WordPress way» και τουλάχιστον είναι «νόμιμο», στα όρια του νόμου τουλάχιστον. Αν και ακολουθεί τις πρακτικές που ορίζει το WordPress, η αλήθεια είναι ότι δεν ακολουθεί τελείως το πνεύμα του WordPress ως προς την απλότητα. Υπάρχει λόγος για αυτό βέβαια, αλλά αυτό είναι μια άλλη πολύ μεγάλη συζήτηση. 8
9. Υπάρχουν 3 τρόποι να αλλάξει κάποιος την εμφάνιση ενός eshop. Και οι τρεις σε επίπεδο theme: Μπορεί να κάνει css αλλαγές, πειράζοντας κάποιο css αρχείο του theme του 9
10. Μπορεί να επέμβει στα σημεία, αλλάζοντας πως εμφανίζονται συγκεκριμένα κομμάτια του eshop, μέσω hooks 10
11. Ή, αν αισθάνεται ότι θέλει μεγάλες αλλαγές, μπορεί να αλλάξει τελείως την εμφάνιση της κάθε σελίδας του eshop, πειράζοντας τα ίδια τα templates. 11
12. Το plugin έρχεται με ένα αρχείο woocommerce.css όπου υπάρχει μια βασική μορφοποίηση για όλο το eshop. Ο πρώτος και ευκολότερος τρόπος για να αλλάξουμε την εμφάνιση, είναι να γράψουμε CSS κανόνες στο style.css μας, που θα κάνουν override τους default κανόνες του WooCommerce. Αυτός είναι ο ενδεδειγμένος τρόπος για να κάνουμε μικρές αλλαγές, όπως αλλαγή χρωμάτων, γραμματοσειρών κλπ. Μπορούμε επίσης να μην φορτώσουμε καθόλου το css που έρχεται με το woocommerce και να ξαναγράψουμε όλα τα styles από την αρχή, αν θέλουμε να κάνουμε μεγαλύτερες αλλαγές, αλλά στις περισσότερες περιπτώσεις αυτό δεν χρειάζεται. Αυτό μπορεί να το χρειαστούμε και με στους άλλους δύο τρόπους. 12
13. Hooks: Εδώ αρχίζει το πράγμα να γίνεται ενδιαφέρον. Σχεδόν ότι βλέπουμε σε μια σελίδα του WooCommerce σχεδιάζεται μέσα από κάποια συνάρτηση (function), η οποία έχει κάποιο hook, μας επιτρέπει με άλλα λόγια μέσα από μηχανισμούς του WordPress να επέμβουμε και να αλλάξουμε το αποτέλεσμα, με καθαρά php functions. 13
14. Το WordPress, έχει το λεγόμενο «The Loop», για να δείχνει το περιεχόμενο. Αυτό είναι ένα πραγματικό loop (ένα php while ή for) που διατρέχει όλα τα posts που είναι να δείξει. Στο WooCommerce, υπάρχει κάτι αντίστοιχο, το λεγόμενο «shop loop», το οποίο περιέχει κι ένα loop, με τα προϊόντα που είναι να δείξει, αλλά ταυτόχρονα κάνει render και ότι άλλο σχετίζεται με το eshop. Το ίδιο το loop, στα templates δεν θα το δούμε σαν μια while ή for, αλλά σαν μια κλήση συνάρτησης: Μπορείτε να θεωρήσετε ότι αυτή η συνάρτηση καλεί άλλες συναρτήσεις που φτιάχνουν όλο το eshop κομμάτι της σελίδας μας. Για να πειράξουμε αυτά τα κομμάτια, επεμβαίνουμε μέσω hooks. 14
15. Για παράδειγμα, έστω ότι θέλουμε να βάλουμε το κειμενάκι «+ EU VAT» στην τιμή ενός προϊόντος. Αν ήταν νορμάλ WordPress τα πράγματα, θα πήγαινα σε κάτι σαν το single- product.php και θα έβρισκα που εμφανίζεται η τιμή. Δυστυχώς αυτό δεν είναι έτσι στο WooCommerce. H λογική που ακολουθούν τα templates θα έλεγα ότι μοιάζει περισσότερο με άλλα template engines (όπως της Joomla!) παρά στο WordPress, αλλά μην το πείτε παραέξω. Η αλήθεια είναι ότι δύσκολα θα γινόταν διαφορετικά, καθώς μην ξεχνάμε, το WooCommerce δεν είναι τίποτα περισσότερο από ένα plugin! Κάθε τμήμα της κάθε σελίδας δημιουργείται από κάποια συνάρτηση, οπότε για να αλλάξουμε ένα τμήμα, θα πρέπει στο functions.php αρχείο του theme μας, να βάλουμε το αντίστοιχο hook. Στην προκειμένη περίπτωση, βάζουμε το εξής: Γράφουμε τη συνάρτηση που κάνει την αλλαγή που θέλουμε (εδώ τη mailster_price_message) και τη «συνδέουμε» με την αντίστοιχη συνάρτηση που θέλουμε να αλλάξουμε. 15
16. Με την ίδια λογική μπορούμε να αφαιρέσουμε και στοιχεία: απλά αφαιρούμε το συγκεκριμένο Hook. Για παράδειγμα, αν θέλουμε να αφαιρέσουμε αυτό το μετρητή που λέει πόσα προϊόντα έχει η σελίδα που βλέπουμε, το κάνουμε ως εξής: 16
17. Και τώρα προκύπτει το ερώτημα. Οκ, και που βρίσκω ποιο hook να καλέσω για το κάθε τι; Ο ενδεδειγμένος τρόπος είναι από το site του WooCommerce, στο documentation, από εδώ: https://docs.woocommerce.com/wc-apidocs/hook-docs.html Ευτυχώς υπάρχει το ctr+f και μπορούμε να ψάξουμε εδώ μέσα… Το documentation του WooCommerce, δυστυχώς δεν είναι όσο καλό είναι του WordPress, ούτε τόσο καλογραμμένο, ούτε τόσο καλά δομημένο. Οπότε υπομονή και Google is your friend. 17
18. Τώρα τι γίνεται αν θέλετε να φέρετε τα πάνω κάτω και να κάνετε μεγάλες δομικές αλλαγές στο eshop σας; Κατ’ αρχάς να το ξανασκεφτείτε. Το default WooCommerce έρχεται με τις απαραίτητες από τον κανονισμό σελίδες (ναι υπάρχει κανονισμός που λέει ποιες σελίδες πρέπει να έχει ένα eshop), όπως τη διαδικασία του checkout (σούπερ τζιζ κομμάτι). Καλό θα είναι να ξέρετε τι κάνετε όταν θέλετε να αλλάξετε ριζικά μια σελίδα. 18
19. Το WooCommerce έχει μια συγκεκριμένη δομή από default templates. Αν έχετε ασχοληθεί λίγο με το theming του WordPress, θα ξέρετε ότι υπάρχουν κάποια στάνταρ template που χρειάζεται κάθε theme (όπως το index.php ή το single.php) και με βάση αυτά εμφανίζεται η κάθε σελίδα. Στο WooCommerce τα templates αυτά είναι πολύ συγκεκριμένα (και πολλά). Η δομή τους έρχεται μαζί με το plugin και είναι αυτή που βλέπετε πάνω κάτω. Προσοχή, αυτά μπορεί να αλλάζουν από έκδοση σε έκδοση (άρα κάποιος πρέπει να παρακολουθεί τις αλλαγές και να φροντίζει αν πειραχτούν, να τα αλλάξει και στο theme) Με βάση αυτά τα templates λοιπόν, μπορούμε να κάνουμε αλλαγές στο eshop μας. 19
20. Mπορείτε να βρείτε όλα τα διαθέσιμα templates στο φάκελο templates του WooCommerce. Αντιγράφετε τον περιεχόμενο του φακέλου, όπως είναι, στο theme σας, σε ένα φάκελο με το όνομα woocommerce και πλέον τα αρχεία του theme σας κάνουν override τα αρχεία του plugin. Μπορείτε να κάνετε ότι αλλαγές θέλετε σε όσα από αυτά τα αρχεία θέλετε και να τα σώσετε. Αν δεν θέλετε να πειράξετε κάποια αρχεία, απλά δεν τα αντιγράφετε στο theme σας. 20
21. Προσοχή στο version! Καθώς κάθε τόσο τα templates μπορεί να αλλάζουν, είναι πολύ σημαντικό να υπάρχει κάποιος μηχανισμός ελέγχου ότι το template που χρησιμοποιείτε είναι συμβατό με την τρέχουσα έκδοση του WooCommerce. Για να διασφαλιστεί αυτό, στο πάνω μέρος κάθε template υπάρχει κάτι σαν αυτό: Μεταξύ άλλων μας ενημερώνει ποια έκδοση του template είναι αυτή (αυτό το @version) Μην το ξεχάσετε ποτέ! Το WooCommerce θα μας ειδοποιήσει μέσα από το admin panel αν κάποιο template είναι προβληματικό ώστε να μπορέσουμε να το ενημερώσουμε. 21
22. Για να γίνουν τα πράγματα λίγο πιο απλά, μπορούμε να φτιάξουμε ένα αρχείο woocommerce.php στο root directory του theme μας και να γράψουμε μια φορά το τι θα περιέχεται γύρω από το eshop. Το αρχείο θα μπορούσε να είναι ως εξής: Αν χρησιμοποιήσουμε αυτό το αρχείο όμως, ότι αλλαγές κι αν κάνουμε στα archive templates δεν θα έχουν κανένα αποτέλεσμα! 22
23. Οι πωλήσεις (δηλαδή ο απόλυτος στόχος του μέσου eshop) εξαρτώνται από όλους τους παράγοντες του ιστοτόπου. Από την πλευρά του front-end, αυτό που βλέπει ο επισκέπτης δηλαδή θα πρέπει: να δουλεύει να είναι σχετικά γρήγορο να δουλεύει σε όλες τις συσκευές (responsive) να είναι και να φαίνεται τίμιο να είναι εύκολο στη χρήση και κοντά σε αυτό που έχει συνηθίσει ο μέσος πελάτης μας να έχει όλα τα στοιχεία επικοινωνίας μαζί μας και να μην κρύβει το ποιος είναι πίσω από το eshop Οπότε, ότι αλλαγές κάνετε, φροντίστε τουλάχιστον αυτά τα βασικά, να τα καλύπτετε. 23