“Integrating” WordPress and Zen Cart (and PHPList and Sphider)

I’d been toying around with the idea of re-doing An Afternoon to Remember’s web site with a real shopping cart instead of the PayPal freebie one that I had been using. Since the main site’s content was already built using WordPress I checked on some shopping carts that were WordPress plugins. Unfortunately, none of them really met my needs. I eventually settled on Zen Cart as it did everything I needed and a whole lot more.

There is a project to integrate WordPress and Zen Cart but that puts WordPress inside the Zen Cart and not the other way around. Initially I was hoping for a plugin along the lines of WPG2 that allowed for a simple <zc> tag and I would be off and going. No such thing exists and it doesn’t look like it ever will. Given that Amy (my wife) knew the WordPress admin interface and Zen Cart’s admin interface can be overwhelming, I figured it was best to not try and integrate the two. That left me with the choice of making a common theme so that they would appear to be the same to the customer. The downside of this is that there are two admin interfaces, two packages to update, two sets of templates and style sheets, etc… It’s essentially double the work but I still feel it’s the best way to do what I needed.

I am fairly familiar with WordPress’ theming system at this point so after doing the initial site layout in Gimp I figured I’d CSS’ify it and put it into Zen Cart. Shouldn’t take more than a day, right? Well, not quite. I’ve really been spoiled by the WordPress theme system. It’s well laid out and you make the changes in one place. Zen Cart is a much older and less flexible project. You essentially end up making changes in many parts of the source tree and some third-party plugins require you to patch the core code. It’s also a fairly steep learning curve. The existing themes were unsuitable for my needs since I wasn’t going with anything like the default layout. User contributed themes didn’t help out much either. So it took me a bit longer than I expected.

After I was happy with the Gimp layout (first time I ever did this and it worked out really, really well), I put a basic HTML page in place and started adding all of the <div> tags I was going to need for various page elements. A simple style sheet was then created and I tweaked things here and there until I got it looking like I wanted. Zen Cart templates seem to have 5 primary page elements. A header, left sidebar, body, right sidebar and footer. My design only made use of three. In the admin interface, I turned off the left and right sidebars so I could leave that code intact in my template file (I wanted to make as few changes as possible to the default template.) Most of the changes ended up being cosmetic (changing class names or id’s) rather than large structural changes. The admin system offers a lot of customization although not always the easiest to find. Be sure to read the Zen Cart FAQ as it has tons of information and likely answers any questions you may have. It took a good two weeks of my evenings to get familiar with Zen Cart and work the theme into something I was happy with.

After making tons of changes on the Zen Cart side of things, it was becoming difficult to track everything and rolling back changes became quite a pain. I put everything into a Subversion repository so changes would be logged and rollback were more possible (excepting DB changes to schema and data.) With hindsight, I would have done this from the start and going forward with any project, I will. If you are not sure or are not able to set up a Subversion repository, take a look at using any version control system. It will save you a lot of headache down the road.

Once the Zen Cart side of things and the Subversion repository were in place, the WordPress theme was relatively a snap. I started off with the default theme and stripped most everything out. It’s very vanilla with the exception of some PHP code to generate the left sidebar. None of the plugins that are available really did what I wanted. The Breadcrumb NavXT plugin is used to do the navigation breadcrumbs although I did make a slight change regarding the last link being clickable with my Gallery2 stuff. WPG2 was something I used in the old web site and it came over as well. Some slight changes were needed in my Gallery2 theme but that ended up being fairly trivial and I changed it to use Slimbox. My favorite new plugin however is PageMash. The left sidebar is generated based on hierarchy and PageMash is a really simple visual method of changing the static page tree. That plugin has saved me a ton of time.

Since I created an HTML page and a style sheet separate from either Zen Cart or WordPress, this made it much easier to make the templates act how I wanted them to rather than making my page design match them templates of either system. It was only luck that it turned out this way, but if I ever do something like this again, I’ll be sure to develop my look and feel in a generic HTML/CSS page and then work that into whatever framework(s) I happen to be using.

I started the Afternoon to Remember mailing list with Mailman since I was very familiar with it. Mailman is a great program but it lacks in two areas. The user interface is not easily customizable and it is pretty sucky at sending out HTML emails. Until a few years ago, mutt, was my email client of choice and mutt is not exactly known for it’s awesome handling of HTML email. :-) While I am fine with a text email, many people really dig the “bling” of HTML emails. I eventually settled on PHPList. It seems to be geared for sending out “newsletters” and does not facilitate two way communication (which I don’t need) but it’s themeable and is simple for customers to use. There is a great plugin for integrating with WordPress. The author, Jesse Heap, was really helpful with a problem that I was having.

Since there are essentially two sites and each content system has their own search facilities I was planning on writing some glue code that would pull in search results. I looked into the Zen Cart code to attempt this and quickly gave up. A little bit of research turned up Sphider. It’s a spidering search engine written in PHP. It is themeable and seems to be pretty good.

The site has now gone live and I’m really happy with the results. I’m also happy with the choices I made regarding which software to use. I may regret that when it comes time to upgrade Zen Cart. :-) About the only thing I wish I did differently would be the use of Subversion from the beginning. There are still rough edges that need smoothing especially when it comes to the style sheets. They are still pretty messy and can stand to be cleaned up and scrutinized. And then, there is always content, content and more content…

If you have any specific questions, please feel free to ask and if you find anything useful, link to An Afternoon to Remember or go there any buy some tea. :-)

About this entry