Tableless, accessible, nearly validating osCommerce — Rewriting the beast

Posted on May 29, 2008

Rocky Mountain Baggers

osCommerce accessibility stinks

ArrayosCommerce default installation is a huge mess for accessibility. Every piece of code that the platform spits out has endless tables and poorly coded HTML — finding your way through the code is like trying to clear brush.

The simple solution to osCommerce accessibility is to install the Simple Template System and put together a XHTML/CSS’ed out template.  That only solves one part of the problem, however, because your wonderful template is going to be wrapping around a whole slew of undesirable code.

Over a year ago, a client of mine wanted an osCommerce website. I wanted to create a masterpiece of accessibility. I tackled osCommerce head-on and re-wrote most of the code that creates the HTML.  It was a nightmare, but I created a nearly validating eCommerce website with osCommerce.

The experience was so scarring that I haven’t yet written about it :-) Nearly every file was affected, so upgrading it would be a nightmare, but it’s truly an effort of love.

KWD presents: a nearly validating, tableless osCommerce website

osCommerce screenshot

Looking at this site after so long, it’s pretty crazy the amount of work I put into it.  And get this: for the complete website (including design, breakdown, and customization of osCommerce), I only charged $2,000. Those were the days :-)

Most of the products are default osCommerce, so the images look really small.  Check out the Keyboards category for a few I added.

This project involved so many changes to the core that it’s pretty silly when looking back on it. 

Some of the major changes I made:

  • Improved the checkout process and user account page design & flow
  • Lightbox integration (some image paths don’t work on this mirror site)
  • Integrated product reviews on the product page, rather on its own page
  • Created breadcrumbs and page titles that are SEO friendly and actually reflect where you are
  • Created unordered list navigation that shows category children — the same code creates the drop-down navigation and the sidebar nav
  • Rewrote the checkout process and account registration HTML (try signing up for an account!)
  • Rewrote the pagination code to include more information through title tags, ie: “Displaying Results 1-6″ and “Results 7-10″ and “Previous 6 Results”

It’s still got some minor code issues before it fully validates (I was close on the live site — only one issue — but on the mirror site there are a few).  If anyone knows how to modify the BASE tag in osCommerce, please let me know — I couldn’t find where it was generating!

If you’re interested in any of the files, let me know.  Please leave your feedback, comments, criticism…I’d love to know what you think!

This entry was posted in Code, Web Design Portfolio and tagged , , , , , , , , . Bookmark the permalink.
  • http://www.katzwebdesign.net Zack Katz

    So there’s another kid on the block it turns out: Tableless osCommerce Addon…but of course I think mine was harder to do :-)

  • http://www.oscommerce.com osCommerce Programmer

    STS is the worst template system around but typically chosen by HTML designers who cannot program.

    Nearly validating is meaningless.

    SERP is the only thing that counts and osCommerce can get page #1 without any need for that kind of purist approach to code.

  • http://www.oscommerce.com osCommerce Programmer
  • http://www.katzwebdesign.net Zack Katz

    What’s your problem? Wrong side of a creaky bed?

    If STS is bad, what is better?

  • Paul Campbell

    Been working on a similar project myself, so congrats for your progress it’s truly a labour of love.

    I’ve redone the navigation framework, and rewritten the box class, categories list etc. but still have a lot of work to do for the remaining inner content.

    If I could go back would I start again?

    No!

  • hi

    Hi , my friend .I also hv to do the job .How can we solve this ?tell me ?
    Cata

  • http://www.katzwebdesign.net Zack Katz

    @hi — Do you absolutely need to? Seriously, it’s easier to start with an accessible ecommerce solution than to work with the outdated osCommerce code.

  • http://www.homestansted.co.uk chris

    ok heres the facts! accessibility is about, err, accessibility and not seo.

    ppl are right you can get 1st page serp using oscommerce, however any web designer that has translated table based html to css xhtml (tableless) will tell you that the site INCREASD in terms of page rank.

    time after time we see this fact in what we do.

    thats not to say that we have an accessible version of OSC! personally i am trying to wrap up most of the code in classes, so you can do somthing like:

    //display products
    $products=eng->getproducts_as_array();
    //now loop through and display products.

  • http://www.mywebshop.nl My Webshop

    if you need a oscommerce

    webwinkel    , go2 My
    Webshop