Infusionsoft Failure

Has anyone here ever used InfusionSoft? It’s an amazingly powerful piece of online software that brings together a lot of features dealing with email marketing, sales, tracking, statistics, and shopping carts. There’s tons to talk about and it’d take a couple year’s worth of blog posts to go through every feature and that would only happen after the year it takes me to learn InfusionSoft. This blog post is exclusively about the shopping cart feature and the headaches that come with it.

Currently I’m working with a company called eInnov8 (pronounced ee innovate) and we are remodeling the Green Bay Packer Hall of Fame website. My job in this huge undertaking is to work inside of InfusionSoft to create a template for the shopping cart. We already had a template that was used for the actual site and it had been tested in every major browser and it performed flawlessly. All I should have had to do was copy most of the code for that template over to InfusionSoft and throw in a few extra style rules to make the code that they generated fit in with the theme surrounding it. Sounds simple right?

If there is one thing that you need to learn about InfusionSoft it is this: nothing is simple and if it seems simple, beware. Here’s how this shopping cart template thing works: there are 3 boxes to add your code into - one for styles, one for header HTML and one for footer HTML. When someone visits the shopping cart in their browser it first shows header HTML, then the stylesheet, then their auto-generated shopping cart code, then the footer HTML. Once again this seems very simple, until you realize there is something there that you didn’t see before. Above the header HTML they’ve inserted several blanks lines (no big deal) and imported jQuery with a script tag.

This still doesn’t seem like a big problem, but it turns out to be catastrophic… at least to Internet Explorer. You see, by adding the script tag to the top, it ended up coming before the DOCTYPE tag. When the DOCTYPE tag isn’t the first non-whitespace that Internet Explorer reads from the HTML it decides that the best way to render would be Quirks Mode, which means that it no longer renders the page according to web standards (not that they ever did, but now it’s worse). If you’re curious and/or out of the loop, go to Wikipedia to see more about Quirk’s Mode. It took me 5 hours to completely restructure and manipulate the HTML and CSS to get it to look the same on all browsers, and even then there are some minor differences.

Obviously if they’re pulling in jQuery, they probably need it for something, but regardless of this fact, the script could have been added at the beginning of the other auto-generated shopping cart code. How hard is that? Anyway, I decided to take a look at their JavaScript to see how they were using jQuery. On the shopping cart home page, there is only one tiny script and it looks like this:

jQuery(document).ready(function() {
    jQuery("td.leftlink").each(function() {
        var $this = jQuery(this);
        $this.css("background", $this.css("background-image") +
            " no-repeat 0px 0px");
    });
});

That tiny bit of code really rubbed me the wrong way. It’s completely useless in terms of actually accomplishing anything useful. It can easily be overridden in the footer HTML through an extra stylesheet, so it’s more of a nuisance than anything. Not to mention that this could have easily been written with jQuery with only a few more lines of code. It turns out that in other pages in the shopping cart they end up using jQuery more extensively, mainly for AJAX, but there’s still no excuse for including it above the DOCTYPE.

I sent in a ticket to InfusionSoft to try to fix this and here’s what I received after several days over silence:

After speaking further with my lead and developer the coding and spaces placed on the shopping cart has been placed there to have our shopping function properly. Unfortunately there is no way to have those spaces removed or the javascript that has been placed there. I have created another ticket and had it sent up for an enhancement to the application for the ability to edit the shopping cart further and hopefully we can implement this in a future version. Currently though there is no way to remove this.

If you ask me, it just sounds like they’re being lazy. This should be a simple fix and they’re claiming it can’t be done.

These weren’t the only things about the InfusionSoft shopping cart that bugged me. First off, they used a layout completely build out of tables, which if you think about it makes some sense so that they don’t have anyone completely ruining the structure, but it’s not just made out of tables; it’s made from tables within tables withing tables. The number of embedded tables is ridiculous. This would also be okay, but they put so few classes and ID’s onto the elements that it’s almost completely impossible to have any real style control. You have to do something like table>tr>td>table>tr>td…etc in order to get to the specific depth of tables that you want, but even then there are multiple tables at that depth.

Well, I’m sick of ranting. Just try to keep these things in mind if you ever decide to use InfusionSoft for your shopping cart. Happy Coding.