Magento's One Page Checkout

To the developer on the Magento forums whom I promised an answer, here’s a stab at a short one. You want to change /template/checkout/onepage/review.phtml. This is the review section for the one page checkout.

Let me just start by saying that Magento is an excellent piece of software. It has one of the most impressive and flexible architectures I have seen. And it’s written in PHP, a language I don’t generally care for. But it does have one flaw which lately has become my full-time job to work around.

It’s “template” system is ridiculously complex and counter-intuitive. And, completely undocumented. (being Open Source you can get away with that) So you spend a lot of time doing the change and refresh game, and even then your results are unpredictable. But let me break down at least one part I am more familiar with, the “one page checkout”. I put the quotes there because it’s not really one page, it’s at least 5, but through Ajax and some magic you at least never change URL’s, does that define a page?

So a typical Magento “package” includes all template and layout files for a site. You don’t NEED to have an entire package to make customizations but if you can’t do them through “skinning” (css/js/images) then you are stuck with this big mess of code.

For example, one our sites, lets say it’s fatloss.com we have a package that from the root goes:

/app/design/frontend/fatloss/default/ and we have 2 important directories there layout and template.

Template contains the .phtml files that define chunks of information that can display on your site. In the layout directory are files that define which chunks will be used and where.

I assume if you have read this far you are a Magento developer so I will not try to put this in any larger context than explaining it to the developer who asked the question.

If you don’t know about it already, go into the Admin and go to Configuration then down at the Bottom chose Developer and then “Display template hints”. Then when you reload the page you will see red lines around the various templates along with their names. Very useful. But how did those templates get their and why?

The first place to start is in /layout/page.xml. There you will see a block called <default>. This define what ever page will include unless it is specifically removed. All this XML is no fun to parse, but it holds the key to getting your page to work.

Focusing again on the one page cart, you then can look in checkout.xml. In that files is a block called <one_page_index> which is what defines the one page checkout.

The first thing that is specified is the “Master” template to be used. This is normally 1column.phtml, 2-column-right, 2column-left, and 3columns. This define the overall layout of the page. Once you determine which one of those you are using (by looking checkout.xml) you look for a block that says something like $this->getChildHtml(‘checkout/onepage’) which says “give me the HTML defined by the template called onepage.phtml in the directory called checkout. Standby, you may get to look at some actual code soon.

In onepage.phtml it iterates over 5 sections defined in the function called getSteps. These steps are by default: login,billing,shipping,payment,review. These are then called programatically by onepage.phtml So on the page you will separate forms for “co-billing-form” and “co-shipping-form” which are created by the foreach loop in onepage.phtml. These pages are found in the directory called /checkout/onepage. There, if you want to make changes, are the files you want (assuming you are in the correct package).

Ah, but not so simple because it’s JavaScript time. Each one of these is then wrapped in a Prototype JavaScript class (see the file opcheckout.js in the skin directory that you are using). This goes through and decorates the tables with the appropriate classes and ID’s. Then at submit time those classes are submitted to the Validator class’ validate function. So what you see when you “view source” was just a jumping off point for what is actually being displayed.

More to follow the next time someone cares.

Don't throw the baby out with the bathwater, unless it's a really bad baby.

During my career in software development I have swung back and forth on the idea of “Custom Development”. Normally I am of the “never write what you can buy” mindset, but just like when I wanted to write everything from scratch because I knew I could do it better I think this is too simplistic.

People who write commercial software want to appeal to the largest amount of customers, they want to have the longest list of features, they want to be the most flexible so that as many potential customers as possible can use their software to fit their needs. Very logical, and for a lot of people, a great model.

I think in music software you have really seen this approach crash and burn a couple of times. With flexibility comes complexity, with complexity comes a more difficult to maintain and test code base, till finally you have built in so many features and options that your software is impossible to use, slow as molasses, and crashes all the time (I’m talking to you Cubase 5).

So taking my Steinberg example a little further where does that leave you. Well with Steinberg they rebuilt their product from the ground up and came out with an excellent product called Nuendo.

I LOVED Nuendo. It did recording. No MIDI, no real built in effects, and a one screen project layout similar to Pro Tools that meant no getting lost in a million windows. An easy-to-set up but flexible routing scheme. Plus it had a couple of amazing features lying quietly below the surface. Each audio clip had (and still has) it’s own version of the Photoshop “history” panel, meaning that you could go back to a particular effect or treatment, that you did 10 steps ago, and remove just that step and have all other processes in tact. Awesome.

But the real selling point was, it sounded better. Not in a “golden ears” kind of way where I talk about it having “more air”, but in a “Oh crap, all my old stuff blows” kind of way. I even went back to the studio and did a ton of A/B testing just to make sure it wasn’t my imagination. It wasn’t, my current stuff sounded crunchy and thin compared to Nuendo.

Sadly, Nuendo years were numbered because people don’t buy with their ears. Nuendo was folded into Cubase and the screen got cluttered and complex. It still sounded awesome, but you were back to splitting your time between reading the manual and recording. And, to no ones surprise, it went back to crashing, not as often, but way more than Nuendo, which never crashed (on me at least).

And everyone is shocked when Garageband comes out and people are all over it. I too scoffed at what was wisely not called “iMusic” until I heard what people were doing with it. And then I realized I had fallen into the trap again. More Features = Better.

And how does this relate to software development again? Well I am arguing for the value of software that does One Thing, and does it very, very well. And that is hard to support in a commercial environment unless that one thing is very common. But if that one thing is something particular to your company, then custom development, with all its inherent risks, makes sense. Especially if you can keep a mindset of simplicity. Anything that doesn’t help you do that one thing better, is not going in the product.

So I guess what I am learning is that commercial packages always bring with them unnecessary complexity, which has to be weighed against a custom product that does just exactly what you want and nothing more. And as long as you are wise about, it will probably do it better than the more complex product.

This is the one argument that makes TDD (Test Driven Development) seem not like an extreme reaction to CDD (Caffeine Driven Development). If you write a test you have to clarify exactly what something will do in the simplest terms possible, then you write the simplest amount of code that passes the tests. It keeps you focused on doing simple things in a very robust way.

So don’t use Word when Notepad will do. Don’t use Notepad when a piece of paper will do. Don’t use a piece of paper when, uh, actually, I should write this down.

Selenium testing with Python and Nose

I have been doing a lot of writing functional tests for our websites. “Regression Tests” which means the stuff we are so sick of testing we probably sleep walk through it so had better automate it. It’s the one time when you are sure everything is great that your website is broken.

When it came time to write a whole suite of tests I chose to write them in Python even though the site is all PHP. There is an API for PHP now, but it’s relatively new and I am completely unfamiliar with it and the PHPUnit test framework. Plus it was an excuse to write some Python.

The built-in test framework for Python is unittest. It’s very “Pythoniic” to have the testing framework already part of the language, not as an add-in.

unittest is great if you are writing several unique tests, but it has no good way to run sets of tests where you are feeding different suites of data. So after looking around I found nose an extended testing framework. nose is actually packed with features but the feature I was looking for was test “generators”. Generators are an intrinsic part of Python so it makes sense to capitalize on it for testing.

The basic syntax is like this

def test_sites():
for i in items:
yield validate, n, nn

def validate():
assert n > nn

That’s it. nice and simple. And while generators can only supply 2/3’s of a tuple for arguments, putting arrays inside dictionaries or dictionaries within dictionaries allows for great flexibility.

For me it allows us to run through our shopping cart and put a bunch of different variations while keeping the basic set of commands and clicks. And then I could run the same datasets through another scenario by just writing another generator.

Sweet.

Selenium is an open-source web-testing framework originally developed by Thoughtworks and can be found at SeleniumHQ. I also recommend the online “Sauce On-Demand” for Selenium testing in the cloud with almost every OS/Browser combo and video playback of your test runs. They can be found at Sauce Labs

Javascript Libraries - Prototype and jQuery

After just starting to get up to speed with jQuery (truly awesome library) I have had to dig into Prototype. Not that Prototype is bad, but trying to keep all the syntax straight between all these different languages is getting harder and harder. Both libraries use the $() shortcut, so they are the two libraries that play the least well together. I seemed doomed to never have enough time to master one skill before I have to move on to another.

Being your own Big Brother

I sit at a computer all day and I am on the web all day. I don’t know if you have noticed but there is a TON of interesting stuff on the web to read, listen, watch. Have you heard about this whole Facebook thing? So much, that it can sometimes get me off track from what I need to be doing.

This is a little, slightly nerdy hack for putting your internet blinders on. On both Windows and Mac and Linux there is a file called hosts that directs domain names to IP’s. There is usually not much in it since you get 99% of your resolutions from DNS (the internet, usually your ISP). However, you can override these resolutions by making changes to this host file. The first step is to make a list of the sites that cause you distraction. Let’s say Facebook, YouTube, feeds.adobe.com, and lolcats.com. You would then edit your host file which resides on PC and Mac in the following places

Mac: /etc/hosts (you will need to access this from Terminal)
Windows: \windows\system32\drivers\etc\hosts

Copy your current host file to hosts.free (or whatever), then edit the hosts file to include entries like this.

127.0.0.1          www.facebook.com
127.0.0.1          www.youtube.com
127.0.0.1          www.lolcats.com

Now save that file. Now visit Facebook. Oh, depending on your setup you get an error or a “Your Website is not set up” or a local website. But you won’t get facebook.

Now, you probably don’t want to lock this down forever so “Save As” your locked down version as hosts.lock so you have both versions now with separate names. You can use this batch file for PC to easily switch back and forth. You could even schedule it so you lock yourself down during work yours, and you can freely browse the web during all other times.

PC Batch File for Locking:

copy c:\windows\system32\drivers\etc\hosts c:\windows\system32\drivers\etc\hosts.bak

ren c:\windows\system32\drivers\etc\hosts.lock hosts
echo “Web Locked. Get to Work”

To Unlock:

copy c:\windows\system32\drivers\etc\hosts c:\windows\system32\drivers\etc\hosts.bak

ren c:\windows\system32\drivers\etc\hosts.free hosts
echo “Web Unlocked. Enjoy.”

I will provide a little more sophisticated batch files or programs and an Applescript/Linux Shell script version later but you get the idea.

For an extra level of personally enforced focused, instead of your localhost (which works whenever, whereever you are) you can try: 64.13.233.9 which is the IP for http://nowdothis.com, a site for helping you mono-task.

The little brain that could

Recently over the last 3-4 years I have found myself reaching my intellectual capacity and knowing that I didn’t have the horsepower to grasp a certain concept. This can be hard to separate out from when you are just in over your head (npi) and need to back up and start with something more basic.

Regardless I began to look at ways to try and improve my “Brain Power”. Having watched a couple of documentaries that talked about brain “Plasticity” they made a strong case for pushing your brain like a muscle to make it stronger. So in my own sporadic, fitful, bipolar way I have been trying that.

I generally have one solution to all problems, buy a book on it. So I have some links to some good books/sites on “Natural Brain Enhancement” and a couple of self-learned tips. These books are in order of helpfulness to me, with an emphasis on technology so other people may want to cherrypick out ones that seem more up their alley. Here are the “tips” which are pretty much the really obvious things.

1. Meditate

What I know of tradition buddhist mediation, it would seem to be the strongest exercise one can do to increase one’s power of concentration and openness. It can be as fun as backpacking in 101 degree heat sometimes, but it pays off. With that said, my own practice is shaky sometimes.

2. Read books you don’t understand

I have uncovered the accidental improvements that one gets from reading books that are just out of my league. For example, “The Ethics” by Bernard Spinoza. This book is almost willfully obtuse. I literally could not grasp the meaning of the first sentence. Still can’t. But I read it through anyway, and I was able to grasp pieces here and there and just the whole exercise of being completely lost and maintaining my focus was quite beneficial. When and if I grasp that book, I will consider it a major accomplishment.

Now to some suggestions:

Pragmatic Thinking and Learning by Andy Hunt

This book is from the “Pragmatic” series which is a book company for programmers. However, this book steps out of their usual repretoire and covers the working of thinking and learning. The study of the “Dreyfuss” model, a method of knowledge transfer that transformed nursing is laid out as a model for personal or organization learning. Since this book is “pragmatic” it surrounds the theory with exercises that one can do to improve things like being able to engage both your logic and intuitive brain spheres on the same problem.

Change Your Brain Change Your Life by David Amen M.D.

I got sucked into this by one of those 2 hour PBS infomercials they run during pledge drive. But the book is quite good, backed up by strong research, and helps the layman understand a little more about the biochemisty of the brain and how food and environment, as well as your physical and mental activities can affect your brain health. Especially as one gets older, it is important to fight the brains tendancy to solidify.

Brain Lock by Jefferey M Schwartz M.D.

This book is actually a little dated now but is a fascinating study into OCD and the real, non-pharmacutical methods that this psychiatrist uses to treat his patients. Again, some real insights into brain chemistry and how you can actually alter it by thinking and acting differently. And remember that OCD is not just the knob-checking, tile-counting behavior it is protrayed as. OCD is just as often manifest with an inability to not “unlock” your brain from a thought. That thought may be worrying about your mother or if an earthquake will strike. The two books above cite this one as the first real significant scientific study linking behavior to the ability to change brain chemistry.

Oh, I will be so smart one day.

Gina learns that big dogs bite.

Gina learns that big dogs bite.

The Buy Nothing Year

Below I said “Don’t consume, create”. That wasn’t some sort of environmental slogan, it was a affirmation for myself. Often when I get the urge to express myself, it gets sublimated into buying something. And I buy a lot of crap I don’t need, mostly books that tell me how I can finally be who I really am and music software. Neither of these do I need any more of. In fact, today I am doing a purge and eliminating every self-help or “I wish I knew” book that I have.

And from now on I “Buy Nothing” meaning nothing except food, etc. The bare minimum. I have tons of stuff already to last me from here to forever and I don’t *need* anything else. It’s so insidious that I will say that and mean it and then realize that 5 minutes later I just bought the new Death Cab for Cutie album. It’s an addiction and a habit that’s hard to break. But its a fundamental truth that you will never find yourself outside yourself so the more I look inward rather than to Amazon.com for who I am, the more I will actually receive.