Προσοχή: To άρθρο είναι γραμμένο στα... κινέζικα. Αν δεν είσαι προγραμματιστής, διάβασέ το με δικό σου ρίσκο!
Το publees.com είναι η μοναδική υπηρεσία στην Ελλάδα για online δημοσίευση αγγελιών σε εφημερίδες. Είχαμε αναλάβει και υλοποιήσει τον αρχικό σχεδιασμό το 2011 και το site γνώρισε άμεση επιτυχία, χάρις στην μεθοδικότητα και εργατικότητα των ιδιοκτητών. Όμως, όπως τα πάντα γύρω μας εξελίσσονται, έτσι για το publees είχε έρθει η ώρα να το ανασχεδιάσουμε, διατηρώντας τη μέχρι τώρα ευκολία της διαδικασίας αλλά προσθέτοντας και αρκετές επιπλέον λειτουργίες με βάση τις ανάγκες που ανακαλύψαμε από τον 1ο χρόνο λειτουργίας.
Διαβάζοντας τον κώδικα
Τον ανασχεδιασμό του Publees.com αυτή τη φορά τον αναλάβαμε διαφορετικοί developers από την αρχική ομάδα που το σχεδίασε. Έπρεπε λοιπόν να διαβάσουμε τον προηγούμενο κώδικα για να μπορέσουμε να αντιληφθούμε πώς υλοποιήθηκε αρχικά και βασιζόμενοι σε αυτό να συνεχίσουμε. Σε αυτές, λοιπόν, τις περιπτώσεις μπορείς να εκτιμήσεις τι σημαίνει πραγματικά να ξέρει κάποιος να γράφει "καλό κώδικα"! Άλλωστε για να γράψεις καλό κώδικα, πρέπει να ξέρεις τις δυνατότητες - αλλά και τις ενδεχόμενες αδυναμίες - του εργαλείου που χρησιμοποιείς. Το Drupal βέβαια από δυνατότητες... άλλο τίποτα!
Το site γενικώς αποτελείται από δύο μεγάλα μέρη: (α) την αρχική φόρμα και (β) το καλάθι με το checkout. Για το (β) είχε επιλεγεί από τον αρχικό σχεδιασμό το Ubercart λόγω της φήμης που είχε κερδίσει στο Drupal 6. Η αρχική φόρμα, όμως, είναι μία custom multistep form που το κάθε βήμα μεταφέρει τον χρήστη στο επόμενο μέσω AJAX.
Η αρχική φόρμα δεν είναι κάτι δύσκολο ως πρώτο rendering για τα δεδομένα του Drupal: ένα custom menu callback που καλεί τη drupal_get_form() με όρισμα τη function που δημιουργεί το array της φόρμας, λίγο CSS κι αυτό είναι όλο. Όλη η δύναμη βρίσκεται παρακάτω: στα submit buttons και στο submit callback της φόρμας αυτής!
Multistep form
Το Drupal 7 έχει ένα πολύ δυνατό αλλά και ταυτόχρονα απλό μηχανισμό για την επαναφόρτωση μίας φόρμας με διαφορετικό περιεχόμενο. Το μόνο που χρειάζεται είναι να θέσουμε το “rebuild” της φόρμας σε TRUE! Από εκεί και πέρα, ό,τι αλλαγές κάνουμε στο $form_state θα μεταφερθούν με ασφάλεια στην πρώτη function που δημιούργησε τη φόρμα μας. Οργανώνοντας λοιπόν τα διαφορετικά βήματα με if statements και εκτελώντας ανάλογα με τις πληροφορίες που έχει το $form_state μπορούμε να μορφοποιήσουμε τη φόρμα που αποστέλλουμε πίσω στο χρήστη, κρύβοντας αλλά διατηρώντας τα προηγούμενα στοιχεία.
Χρησιμοποιώντας στο έπακρον τα #ajax callbacks
Στο παρελθόν, κάθε φορά που κάποιος μιλούσε στο οικοσύστημα του Drupal για ajax callbacks, θυμόταν και το συγκρότημα A-HA κι αυτό γιατί είχε βαπτιστεί AHAH. Ο τρόπος λειτουργίας του μέσα από το FAPI του Drupal 7 μπορεί να ενσωματώθηκε στο Drupal core, να άλλαξε όνομα και πλέον να λέγεται #ajax αλλά οι δυνατότητές του παρέμειναν ίδιες.
Προσθέτοντας έτσι ένα #ajax index key – μαζί με κάποιες επιπλέον παραμέτρους – στο submit button του κάθε βήματος, όταν ο επισκέπτης ολοκληρώνει την επιλογή του, το Drupal αναλαμβάνει να υποβάλλει τη φόρμα, να την επεξεργαστεί και να εμφανίσει το επόμενο βήμα.
Όταν η αγγελία φτάνει στο καλάθι
Το καλάθι που χρειαζόμασταν διαφέρει από το τυπικό καλάθι που παρέχει το Ubercart. Όχι, δεν είναι η φόρμα για τα κουπόνια! Όχι δεν είναι ότι έπρεπε να υπολογίζουμε το υποσύνολο και το ΦΠΑ on the fly αφού αυτά παρέχονται από το Ubercart μόνο στο στάδιο της παραγγελίας και όχι στο καλάθι! Η μεγαλύτερη πρόκληση βρισκόταν σε ένα μηχανισμό που προστέθηκε στο νέο site: να μπορεί ο χρήστης να επιλέξει τον αριθμό των αντιτύπων για τις εφημερίδες που διάλεξε ώστε να τις παραλάβει στο σπίτι του χωρίς να τις ψάχνει στα περίπτερα!
Για να γίνουν όλα αυτά πραγματικότητα χρειάστηκε συνεπώς μία καλή γνώση τόσο του πώς δουλεύει το FAPI του Drupal όσο και του πώς δουλεύει το theme layer ώστε να μορφοποιήσουμε την HTML της φόρμας και να ενσωματώσουμε το νέο πεδίο στον πίνακα του καλαθιού. Ακόμη κι έτσι όμως, κάποια μικροπροβλήματα προέκυψαν. Εμπειρικό Μυστικό: Όταν κάνετε render μία φόρμα στο theme layer, φροντίστε να κάνετε unset το #theme της φόρμας! Θα με θυμηθείτε ;)
Checkout
Για το checkout δεν έχουμε να γράψουμε πολλά. Στη σελίδα της καταχώρησης της παραγγελίας, ακολουθήσαμε ουσιαστικά την ίδια λογική που χρησιμοποιήσαμε και για τη μορφοποίηση του καλαθιού ώστε να ενσωματώσουμε τον αριθμό των αντιτύπων που επέλεξε ο χρήστης αλλά για όλα τα υπόλοιπα το Ubercart λειτούργησε όπως έπρεπε. Όμως... Για σταθείτε!
Ανέφερα ότι μέχρι αυτό το σημείο δεν έχουμε γράψει ούτε μία γραμμή jQuery;
Με όλη αυτή τη δύναμη των #ajax callbacks που παρέχει το Drupal εγγενώς, έχουμε φτάσει στο τέλος κι ακόμη δεν έχουμε γράψει ούτε μία γραμμή jQuery. Το αλάτι όμως νοστιμίζει το φαγητό έλεγε η γιαγιά μου και λίγη δόση javascript δεν έβλαψε ποτέ κανέναν!
Άλλωστε, ο προγραμματισμός με jQuery στο Drupal είναι πολύ πιο όμορφος όταν γράφουμε behaviors σα να γράφουμε custom modules. Δεν υπάρχει λόγος να στριμώχνουμε όλο τον κώδικά μας σε μία τεράστια ενότητα! Αρκεί να γράψουμε ένα Drupal behavior για κάθε ξεχωριστή λειτουργία και ελέγχοντας το context να εκτελούμε ή να μην εκτελούμε τον κώδικά μας. Άσε που δε χρειάζεται να χρησιμοποιήσουμε και $.delegate(), $.live() ή $.on() συναρτήσεις, για να εκτελείται ο κώδικάς μας, κάθε φορά που ένα καινούριο στοιχείο εισέρχεται στο DOM (όπως στην περίπτωση της αρχικής φόρμας). Τα behaviors εκτελούνται κάθε φορά που γίνεται ένα AJAX request ρυθμισμένο από το FAPI. Είχαμε λόγο που τα λέγαμε παραπάνω!
Ωραία όλα αυτά, αλλά για το CSS δε μας είπες...
Πράγματι δεν ανέφερα τίποτα για CSS. Ίσως λίγο στην αρχή του κειμένου, αλλά τίποτα ιδιαίτερο.
Να δεις που θα είναι γιατί γράφαμε SASS!
Στο publees.com πήραμε τη μεγάλη απόφαση να δοκιμάσουμε κάτι καινούριο. Ακούγαμε για το SASS και για το πώς κάνει τους developers να αγαπούν και πάλι το CSS αλλά δεν το είχαμε δοκιμάσει μέχρι τώρα. Κι αφού το Omega theme που χρησιμοποιήσαμε έχει πλέον ειδική εντολή για το drush για παρακολούθηση των φακέλων και μετατροπή των .scss αρχείων σε .css, κάτι άρχισε να μας τρώει να το δοκιμάσουμε!
Τελικά είχαμε δίκιο και οι μεταβλητές μαζί με τα λεγόμενα mixins μας έκαναν να νιώσουμε ξανά τη φρεσκάδα της δημιουργίας και να παραδεχτούμε ότι τελικά το Sass είναι αυτό που λέει: Syntactically Awesome Style Sheets!
Κάπως έτσι έκλεισε ο κύκλος του Publees... Κάπως έτσι ξεκίνησε για όλους εμάς ένα καινούριο ταξίδι δυνατοτήτων, με περισσότερη εμπειρία στην πλάτη μας, που όχι μόνο δε μας βαραίνει, αλλά γεμίζει την τσάντα του μυαλού μας για τα επόμενα project!
